2018-05-20

Atom Editor をインストール

インストール環境

macOS	High Sierra
プロセッサ	intel Core i5
メモリ	8GB

インストールしたAtomのバージョン

1.27.0

インストール

ブラウザーより https://atom.io を開く Download ボタンをクリックするとダウンロードが開始されます。
ダウンロードフォルダより atom-mac.zip をダブルクリックします。
解答された　atomファイルをアプリケーションにドラッグアンドドロップし、移設します。
アプリケーションフォルダにある、 Atomファイルをクリックすると

“Atom”はインターネットからダウンロードされたアプリケーションです。開いてもよろしいですか？

というポップが表示されるので開くをクリックします。

Atomの日本語化

Welcome Guideを表示します。

上部メニュー　→　Help　→　Welcome Guide

Install Packagesを表示します。

Install a Package　→　Open Installer

の順にボタンをクリックします。

Search packagesというテキストボックスに Japanese と入れて　Packagesボタンをクリックします。

Japanese-menu

を探し、 Install ボタンをクリックします。

半角スペース、タブの可視化

タブやスペース、改行などの見えない文字を記号として表示します。

Atom　→　環境設定　→　設定タブ　→　エディタ設定

の順にクリックします。

エディタ設定を下にスクロールすると、

不可視文字を表示

という項目にチェック

インデントガイドを表示

エディタ内にインデントガイドを表示します。

不可視文字を表示の近くに

インデントガイドを表示

にチェック

Atomに慣れてきたらWelcomeタブを非表示

Show Welcome Guide  When opening Atom

のチェックを外す

再表示したい場合はメニュー → ヘルプ → ウェルカムガイドをクリック
Show Welcome Guide When opening Atomのチェックを入れる

Telemetry Consentを非表示にする

Telemetry Consent → Atomの状態を製作者に送って良いか同意を求める画面

To help improve Atom,you can anonymously send usage state to the team.

Atomを改善するために、匿名で使用状態をチームに送信することができます。

The date we send is minimal.

日々送るデータは最小です。

Broadly, we send things like startup time, session time and exception

概ね、起動時間、セッション時間、例外などを送信します・

never code or paths.

決して、コードや、パスは送信されません。

See the atom/metrics package for details on what date is sent.

送信する情報は、atom/metrics packageを参照してください。

No, I don't want to helpボタン

いいえ、私は情報を送信したくないです。

By opting out, your usage patterns will not be taken into account.

上記ボタンをクリックする事によって、あなたの情報は使用されません。

Yes, I want to help improve Atom ボタン

はい、私はAtomの改善に協力したいと思います。

You are helping us assess Atom's performance and understand usage patterns.

Atomのパフォーマンスを評価し、使用パターンを理解するのに役立っています。

再表示する方法はわかりませんでした、すみません。

私は、No, I don't want to helpボタンをクリックしています。

各パッケージを入れる

Atom　→　環境設定　→　install

パッケージのインストールの下のSearch　Packagesに欲しいパッケージ名を入れます。
Packagesボタンをクリックします。
欲しいパッケージが表示されたら、欲しいパッケージを選択します。
Installボタンをクリックします。
パッケージ名をクリックすると使いかたが表示されます。

Project-manager

プロジェクト毎に管理する

プロジェクトの登録方法

ツリービューに登録したいフォルダを表示します。一度atomエディターを閉じ、再度atomエディターを起動します。何も表示していない状態(untitledのタブのみ)のatomエディターの状態で、編集したいファイルがあるディレクトリをatomにドラッグアンドドロップします。
command + shift + p でコマンドパレットを開きます。
「Project Manager」と入力すると、「:」のあとに「Edit Project, Save Project, List Projects」が表示されるので、「Save Project」を実行します。
Save Project Project内容を入力して save ボタンをクリックして登録完了します。

Title タイトル名だけで大丈夫です。

プロジェクトを呼び出す

一度atomエディターを再起動させます。

conmand + control + p
「Project Manager」と入力します。
一覧からProject Manager:List Projectを選択します。
つくったprojectを選択します。

open-recent

直近で開いていたファイルを記憶します。

smart-tab-name

タブに表示されるファイル名にパスを表示します。

file-icons

各ファイルをプログラミングごとにアイコンを変更します。

auto-encoding

文字コードを自動的に判別します。

入力関係

tag

　HTMLの閉じタグを自動で挿入してくれる </ まで入力するかoption + command + .

autocomplete-paths

ファイルのパスなどを自動補完します。

highlight-selected

一つの単語を選ぶとファイル中の同じ単語がハイライトする。

pigments

カラーコードをハイライトする。

css内で使用している全ての色を一覧表示できる cmd + shift + p でパレットを開いて pigments　find color を実行

色変換　#からRGBAに変換する事ができる Cssを右クリック　pigments convert to　XXをクリック

show-ideographic-space

全角スペースのハイライトします。

autoprefixer

自動でベンダープレフィックスをつけてくれます。 command + shift + pでコマンドパレットを表示して autoprefixerキーボードよりタイプする。

atom-beautify

コードの整形 Ctrl + alt + b 右クリックでも

atom-csscomb

Cssのプロパティをソートする

右クリック

● atom-minify jsとかcssを圧縮してくれる Option + shift + M

登録しておいたスニペットを自動補完

css-snippets

cssの入力補完

javascript-snippets

JavaScriptの入力補完。

jquery-snippets

jQueryの構文補完

文法チェッカー

w3c-validation

Cssとhtmlの文法チェッカー

linter

構文チェックのためのパッケージ

これに加えて各言語のlinterプラグインをインストール

linter needs to install dependenciesと表示されるので

linter-ui-default（linterのエラーを表示する）をインストールします。

Yesボタンをクリックします。

linter-jshint

javascriptの文法チェック

linter-htmlhint

HTMLの文法チェック

linter-sasss-lint

sassの文法チェック

Linter-csslint

cssの文法チェック

2018-05-16

SublimeText 3をmacにインストール

Sublime Textをインストール

Jon Skinner氏が作ったSublime Text

https://www.sublimetext.com

より DOWNLOAD FOR MAC をクリックします。

ダウンロードしたダウンロードフォルダにある、dmgファイルをダブルクリックして展開します。

SublimeText.app を Applications にドラッグアンドドロップします。

Finderより、アプリケーションフォルダからSublimeTextをダブルクリックします。

"Sublime Text"はインターネットからダウンロードされたアプリケーションです。開いてもよろしいでしょうか？と表示されます。

開くボタンをクリックします。

PackageControllをインストール

Sublime Textにはプラグインという便利な機能を個別にインストールすることができます。プラグインを簡単にするPackageControllをインストールします。

Sublime Textを開いて、メニューバー「View > Show Console」でコンソールを表示します。
https://packagecontrol.io/installation にある Pythonコードをコンソールに貼り付けます。
Enterキーを押して実行します。
Consoleを　esc キーをクリックして閉じます。
Command + shift + p でパッケージコントロールを起動します。
installと入力し、pachage contol: install package を選びます。
各種プラグインの名前を入れてインストールします。

メニューを日本語化

shift + Command + p でコマンドパレットを起動します。
installと入力し、Package Control:Install Packageを選択します。
japanize と入力しjapanizeを選択します。

日本語化の設定

ライブラリーフォルダーを表示します。

Finderを開いて、メニューバーにある、移動 → alt (option)キーを押すと、表示項目が増えます。

ライブラリ → Application Support → Sublime Text 3 →　Packages に移動します。
Packagesの下に、Defaultフォルダを作成してください。
Packages → Japanize にアクセスします。
拡張子が.jpのファイルをコピーします。
先に作ったDefaultフォルダに拡張子が.jpのファイルをペーストします。
Defaultフォルダの拡張子が.jpのファイルから、拡張子「.jp」を取り除きます。
Defaultフォルダにある、Main.sublime-menuファイルを、Packages → Userにコピペします。
以上で日本語化完了です。

スペースとタブを表示

コマンドパレットを表示させます。

ツール → Command Palette
shift + command + p

検索窓に　settings　と入力します。
Preferences: settings　を選択します。

「Preferences.sublime-settings --User」ファイルが開かれるので、「"draw_white_space": "all",」を追記します。

[設定後のPreferences.sublime-settings --Userファイル]

{
    "draw_white_space": "all",  
    "ignored_packages":  
    [  
        "Vintage"  
    ]  
}

プラグインをインストール

A File Icon

ファイルがあるとファイル名にアイコンが表示されます。
インストール方法
command + shift + p
検索窓に install　と入れます。
Package Control: Install Packageを選択します。
続いてA File Iconと入力してインストールします。

メニューバーにある
表示 → サイドバー → Show Side Bar とするとサイドバーが表示されます。
ファイル → Open → 開発したいフォルダを指定します。

All Autocomplete

HTMLや CSS などのコード保管機能。
インストール方法はA File Iconと同様にインストールします。

AutoFileName

AutoFileName 画像やリンクのパスを保管してくれます。

コマンドパレットを表示します。
command + shift + p

検索窓に install　と入れます。
Package Control: Install Packageを選択します。

続いて AutoFileName を入れます。
表示されたAutoFileNameを選択します。

設定します。
環境設定 → [Package Settiongs] → [AutoFileName] → [Settings – User]

追加するコマンドは

//AutoFileNameで画像を挿入時にWidthを最初にします。
"afn_insert_width_first": true,
//AutoFileNameでwidhtとheightを挿入します。
"afn_template_languages": true,

[設定後のPreferences.sublime-settings --Userファイル]

{  
    "draw_white_space": "all",  
    "afn_insert_width_first": true,  
    "afn_template_languages": true,  
    "ignored_packages":  
    [  
        "Vintage"  
    ]  
}

BracketHighlighter

タグやクォーテションマークなどの開始と終了をハイライトします。

Color Highlighter

cssカラーを表示する

ConvertToUTF8

shift-jis をutf-8 変換する。

CSScomb

Goto-CSS-Declaration

IDやクラス名に関連するCSSに飛べます。

HTML-CSS-JS Pretify

ソースの整形
shif + command + H

Markdown Extended

Markdownをシンタックスハイライトするパッケージです。

Sass

SassはCSSを拡張するプリプロセッサで、このプラグインは言語サポートを追加します。

SideBarEnhancements

サイドバーのメニューを拡張します。

SublimeLinter

リアルタイムにエラーをチェックします。

ただ、これだけだとチェックができないので、言語ごとのプラグインを入れる必要があります。

SublimeLinter-contrib-sass-lint

sassのエラーチェック

SublimeLinter-csslint

CSSのエラーチェック

SublimeLinter-html-tidy

HTMLのエラーチェック

TrailingSpaces

末尾のスペースを自動で消してくれるプラグイン

View In Browser

HTMLやCSSで編集作業をして、ブラウザに移動してリロードして、という一連の面倒な作業が簡単になります。

「control」+「alt」+「v」と入力すればブラウザが起動して編集中のファイルをレンダリングしてくれます。
ユーザー用の設定ファイルの「”browser”:“chrome”」部分のブラウザ名を変更すれば任意のブラウザを起動できます。

W3CValidators

2018-05-16

node.jsインストール 2018

node.jsをインストール

nodebrewを利用したnode.jsの導入についてまとめました。

今回の開発環境

macOS	High Sierra
バージョン	10.13.4
プロセッサ	intel Core i5
メモリ	8GB

Node.jsのインストール

--- point ---
ここからの作業は macOS にログインするパスワードが必要です。
設定していない場合、システム環境設定から、ユーザーとグループを選択します。
ログインしているユーザーを選択して、パスワードを変更ボタンより、パスワードを登録します。

インストールのメニュー

以下の順でNode.jsをインストールします。

command line developer toolsをインストール
Homebrewをインストール
nodebrewをインストール
Node.jsをインストール

command line developer toolsをインストール

Homebrew をインストールするために、 command line developer tools をインストールします。
command line developer toolsとは、コマンドを入力して操作するアプリケーション、CUI (キャラクターユーザーインターフェース) のことです。
XcodeはMacOS用の統合開発環境です。
Xcodeをインストールすると、command line developer toolsもインストール同時にインストールすることができます。

ターミナルを起動します。

macOS 右上にある虫眼鏡をクリックします。
Spotlight検索という部分に terminal.app を入力します。
ターミナルをダブルクリックし、ターミナルを起動します。
$以下をコピペしてcommand line developer toolsをインストールします。

[terminalコマンド]

$ xcode-select --install

[結果]
xcode-select: note: install requested for command line developer tools と表示されます。

”xcode-select”コマンドを実行するには、コマンドライン・デベロッパ・ツールが必要です。ツールを今すぐインストールしますか？画面が表示されます。
インストールボタンをクリックします。
Command Line Tools 使用許諾契約画面が表示されます。
同意するボタンをクリックします。
ソフトウエアがインストールされました。画面が表示されます。
完了ボタンをクリックします。

Homebrewをインストール

nodebrewをインストールするために、Homebrewをインストールします。
Homebrewとは、パッケージ管理システムです。
パッケージは各種アプリの実行ファイルや、設定ファイルをまとめていて、アプリをmacOSにインストールすることを簡単にしてくれます。
ブラウザーより、https://brew.sh/index_ja を開きます。
スクリプトをターミナルにコピペします。

[terminalコマンド]

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

[結果]
- 途中で、returnキーの入力を求められます。

Press RETURN to continue or any other key to abort

macOSにログインするためのパスワードの入力をもとめられます。

Password:

結果長い結果の後、 ==> Installation successful!
と表示されます。

nodebrewをインストール

Node.js をインストールするために nodebrew をインストールします。
nodebrew は macOS で Node.js のバージョン管理するためのソフトウエアです。

brewコマンドを利用して、nodebrewをインストールします。

[terminalコマンド]

$ brew install nodebrew

nodebrewの初期設定

(初期設定しないとNode.jsインストール時にエラーが出ます。)

[terminalコマンド]

$ /usr/local/opt/nodebrew/bin/nodebrew setup_dirs

nodebrewのpathを設定

nodebrew をインストールすると、結果 Add path: と表記があるので path を設定します。

pathの設定

[terminalコマンド]

$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile

解説

echoコマンドとは ''(シングルクォーテーション)で囲んだ部分を表示します。

>>でechoコマンドを表示から矢印先の bash_profileファイルに出力できます。

\~/ (チルダスラッシュ)で bash_profileファイルはホームディレクトリにできた事がわかります。

.(ドット)で bash_profileファイルは隠しファイルであることがわかります。

Node.js のインストールの解説では、bash_profileファイルや bashrcファイルに path を設定してしています。

違いは bash_profileファイルはログイン時に動作し、bashrcファイルは bash を起動する時に毎回動作します。

わたしの記事では、再起動すると消え、再度 bash を起動する必要がある、 bashrcファイルより bash_profileファイルに設定したいと思います。

exportは環境変数を設定するコマンドです。

pathの反映

[terminalコマンド]

$ source ~/.bash_profile

bash_profileを確認してみます。

Finderを起動して、

メニューバーより、移動 → ホームの順にクリックします。

ここで

command + shift + . (ピリオド)

すると隠しファイルが表示されます。

bash_profileファイルをエディターで確認します。

export PATH=$HOME/.nodebrew/current/bin:$PATH

の記載があることを確認します。

なにもせずに閉じます。

nodebrewがインストールできたか確認します。

[terminalコマンド]

$ nodebrew -v

[結果]

nodebrew use v8.9.4

Node.jsをインストール

[terminalコマンド]

$ nodebrew install-binary latest

latestの部分を変えると安定版または最新版をインストールできます。

最新版	安定版
latest	stable

長い結果のあと Installed successfully と表示されれば完了です。

インストールされた nodeのバージョンを確認します。
[terminalコマンド]

$ nodebrew list

[結果]

v10.1.0 

current: none

使用するNode.jsのバージョンを指定します。

[terminalコマンド]

$ nodebrew use v10.1.0

[結果]

use v10.1.0

最終確認

[terminalコマンド]

$ node -v

[結果]

v10.1.0

2018-05-09

gulp/Sass入門・再入門

開催日

2018年5月3日

主催者

ハンズオン形式

Sassとは

CSSの拡張言語。
CSSとの互換性が高い。
Sassには記法と呼ばれる、書き方が違う方法があります。

Sass記法とSCSS記法について

Sass記法

CSSでいうプロパティーを {} (波括弧・中括弧) で挟むが、Sass記法では、波括弧を使用せず、スペースで波括弧を表す。

SCSS記法

SCSSは Sassy CSS の略で、書き方は、CSSに近く波括弧を使用します。

現在では、SCSS記法を用いた、方法が主流で、SCSS記法をSassとよばれています。

変数が使えて、色 font の定義ができます。

[SCSS] では

$font-stack: Helvetica, sans-serif;  
$primary-color: #333;  

body {  
    font: 100% $font-stack;  
    color: $primary-color;  
}

[CSS] に変換すると

body{  
    font: 100% Helvetica, sans-serif;  
    color: #333;  
}

ネスト(入れ子構造)ができます。

[SCSS] では

div {  
    p {  
        font-weight: bold;  
    }  
}

[css] では

div p{  
    font-weight: bold;  
}

複数のscssファイルを一つのCSSファイルとして連結して出力できます。
SCSSのファイル名を _ (アンダーバー)から始まるファイル名にすると、コンパイル (CSSに変換)されません。
メインのSCSSファイルに @import"ファイル名"; で_ファイルを記載して、連結ができます。

[パーツのSCSS]

\_reset.scss  
\_body.scss

[メインのSCSS]

style.scssの中に

@import "reset";  
@import "body";

とすると記載すると結合されます。
※　_(アンダーバー)と拡張子は省略ができます。

SASSは上から順に呼ばれます。
mixin お好みの定義をつくり、@include で定義を呼び出すことができます。

例えば、ボタンを作ったとします。
[CSS]

.button_red{  
    height: 40px;  
    width: 50px;  
    background-color: red;  
    color: #fff;  
}

これを、背景色だけ変えたボタンを作る場合、

    height: 40px;  
    width: 50px;  
    color: #fff;

この部分は共通項目と利用するとします。

[SCSSの @mixin で定義の設定]

@mixin button{  
    height: 40px;  
    width: 50px;  
    color: #fff;  
}

[SCSSの @include で定義の呼び出し]

.button_red{  
    @include button;  
    background-color: red;  
}

とできます。

@mixin は引数を使うこともでき、例では、ボタンの横幅を場合によって変えることができます。

[SCSSの @mixin の設定]

@mixin button($size){  
    height: 40px;  
    width: $size;  
    color: #fff;  
}

[SCSS @includeで呼び出し]

.button_red{  
    @include button(60px);  
    background-color: red;  
}

もちろんメディアクエリも対応できます。

gulpとは

gulp(ガルプ)とは、さまざまな作業を自動化ができます。今回のSASSをCSSに変換するのもgulpを使用します。

そのほかの機能に画像の圧縮もできるとか。

今回の開発環境

macOS	High Sierra
プロセッサ	intel Core i5
メモリ	8GB

macにインストール

使用するアプリ

ブラウザー (お好みで)
- google chrome
https://www.google.co.jp/chrome/index.html

エディター (お好みで)
- Sublime Text
https://www.sublimetext.com
- atom
https://atom.io/
- Brackets
http://brackets.io/

node.jsをインストール

Command Line Toolsをインストール
Homebrewをインストール
nodebrewをインストール
Node.jsをインストール
fishをインストール

Command Line Toolsをインストール

Homebrew をインストールするために、 Command Line Toolsをインストールします。
Command Line Toolsとは、コマンドを入力して操作するアプリケーション、CUI (キャラクターユーザーインターフェース) のことです。

ターミナルを起動します。

macOS 右上にある虫眼鏡をクリックします。
Spotlight検索という部分に terminal.app を入力します。
ターミナルをダブルクリックし、ターミナルを起動します。
$以下をコピペしてcommand Line Toolsをインストールします。

$ xcode-select --install

 ”xcode-select”コマンドを実行するには、コマンドライン・デベロッパ・ツールが必要です。ツールを今すぐインストールしますか？

画面が表示されます。

インストールボタンをクリックします。

Command Line Tools 使用許諾契約画面

が表示され同意しますボタンをクリックします。

ソフトウエアがインストールされました。

画面が表示されますので完了ボタンをクリックします。

Homebrewをインストール

nodebrewをインストールするために、Homebrewをインストールします。
Homebrewとは、パッケージ管理システムです。パッケージは各種アプリの実行ファイルや、設定ファイルをまとめていて、アプリをmacOSにインストールすることを簡単にしてくれます。

ブラウザーより、https://brew.sh/index_ja を開きます。
スクリプトをターミナルにコピペします。

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

途中で、returnキーの入力を求められます。

Press RETURN to continue or any other key to abort enter(return)

macOSにログインするためのパスワードの入力をもとめられます。

Password:

nodebrewをインストール

Node.js をインストールするために nodebrew をインストールします。
nodebrew は macOS で Node.js のバージョン管理するためのソフトウエアです。

brewコマンドを利用して、nodebrewをインストールします。

$ brew install nodebrew

nodebrewの初期設定

(初期設定しないとNode.jsインストール時にエラーが出ます。)

$ nodebrew setup

nodebrewのpathを設定

nodebrew をインストールすると、結果 Add path: と表記があるので path を設定します。

pathの設定

$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile

解説

echoコマンドとは ''(シングルクォーテーション)で囲んだ部分を表示します。

>>でechoコマンドを表示から矢印先の bash_profileファイルに出力できます。

\~/ (チルダスラッシュ)で bash_profileファイルはホームディレクトリにできた事がわかります。

.(ドット)で bash_profileファイルは隠しファイルであることがわかります。

Node.js のインストールの解説では、bash_profileファイルや bashrcファイルに path を設定してしています。

違いは bash_profileファイルはログイン時に動作し、bashrcファイルは bash を起動する時に毎回動作します。

わたしの記事では、再起動すると消え、再度 bash を起動する必要がある、 bashrcファイルより bash_profileファイルに設定したいと思います。

exportは環境変数を設定するコマンドです。

pathの反映

$ source ~/.bash_profile

bash_profileを確認してみます。

Finderを起動して、

メニューバーより、移動 → ホームの順にクリックします。

ここで

command + shift + . (ピリオド)

すると隠しファイルが表示されます。

bash_profileファイルをエディターで確認します。

export PATH=$HOME/.nodebrew/current/bin:$PATH

の記載があることを確認します。

なにもせずに閉じます。

nodebrewがインストールできたか確認します。

$ nodebrew -v

結果

nodebrew use v8.9.4

Node.jsをインストール

$ nodebrew install-binary latest

latestの部分を変えると安定版と最新版をインストールできます。

最新版	安定版
latest	stable

長い結果のあと Installed successfully と表示されれば完了です。

インストールされた nodeのバージョンを確認します。

$ nodebrew list

結果

v10.1.0 

current: none

使用するNode.jsのバージョンを指定します。

$ nodebrew use v10.1.0

結果

use v10.1.0

最終確認

$ node -v

結果

v10.1.0

fishをインストール

fishとはターミナルを強化するシステムです。今回の授業では、インストールしなくても大丈夫です。

fishをmacOSにインストールすると以下の捜査が簡単になります。

ターミナルの文字の補完機能
ディレクトリ間のタブ矢印移動
タイプミスをハイライト
fish をインストールします。

$ brew install fish

fish がインストールできたか確認します。

 $ fish -v

結果

 fish, version 2.7.1

fishを起動します。

$ fish

結果

Welcome to fish, the friendly interactive shell

fishの停止方法

~> exit

※ fishが動いていると、 $ が　~> になります。

作業ディレクトリの作成

ここから fish を使用するといいかもしれません。

私は、ホームディレクトリに workdirディレクトリその配下に gulp-lessonディレクトリを作りました。

$ mkdir -p ~/workdir/gulp-lesson

つくった作業ディレクトリに移動します。

$ cd ~/workdir/gulp-lesson

移動できたか確認します。

$ pwd

結果

/Users/ユーザー名/workdir/gulp-lesson

npm initでprojectの初期設定

package.jsonを作成します。

$ npm init -y

結果

Wrote to /Users/ユーザー名/workdir/gulp-lesson/package.json:  

{  
    "name": "gulp-lesson",  
    "version": "1.0.0",  
    "description": "",  
    "main": "index.js",  
    "scripts": {  
      "test": "echo \"Error: no test specified\" && exit 1"  
  },  
    "keywords": [],  
    "author": "",  
    "license": "ISC"  
}

package.jsonを確認します。

Finderで/gulp-lesson にある、package.jsonをエディターで確認します。

Gulpをインストール

ターミナルで/gulp-lessonにいる事を確認します。

$ pwd

結果

/Users/ユーザー名/workdir/gulp-lesson

※ gulp-lesson にいない場合は移動してください。

Gulpをインストール

$ npm install -D gulp

結果
gulp-lesson ディレクトリを確認すると、node_modulesディレクトリが作成されます。
今後プロジェクトごとにこの作業をします。

Gulpのsass用のオプションをインストール

$ npm install -D gulp gulp-sass

gulpfile.jsというファイルを作成

/gulp-lesson の下に touchコマンドで、gulpfile.js をつくります。

ターミナルで/gulp-lessonにいる事を確認します。

$ pwd

結果

/Users/ユーザー名/workdir/gulp-lesson

※ gulp-lesson にいない場合は移動してください。

touchコマンドで、gulpfile.js をつくります。

$ touch gulpfile.js

gulpfile.js をエディターで修正します。

[gulpfile.js]

// gulpプラグインの読み込み
const gulp = require('gulp');
// Sassをコンパイルするプラグインの読み込み
const sass = require('gulp-sass');

// style.scssをタスクを作成する
// gulp.task('default',function () {実行される処理})
// 第一引数のdefaultはタスク名を記載する
// defaultで省略することができます。
gulp.task('default', function () {
    // style.scssファイルを取得
    gulp.src('css/style.scss')
    // Sassのコンパイルを実行
    // pip()は処理をつなげることができます。
    // sassで読み込んだファイルをsassファイルをコンパイルし、
    // gulp.destでcssディレクトリに出力します。
        .pipe(sass())
    // cssフォルダー以下に保存
        .pipe(gulp.dest('css'));
});

SCSSファイルの作成

gulpfile.js 内では、 style.scssファイルを取得する為に gulp.src('css/style.scss') と記載があります。
css/style.scssの部分で css ディレクトリ内の style.scss を読み込みます。なので、css ディレクトリとその中に、 style.scss を作成します。

自分の階層を確認します。

$ pwd

結果

/Users/ユーザー名/workdir/gulp-lesson

違ったらgulp-lessonに移動します。

css ディレクトリを作成します。

$ mkdir css

css ディレクトリ内に sytle.scss ファイルを作成します。

$ cd css  

$ touch style.scss

HTMLファイルの作成

gulp_lessonディレクトリ内に index.html を作成します。

/gulp_lessonディレクトリに移動します。

ひとつ前の作業をしていると、

$ pwd

/Users/ユーザー名/workdir/gulp-lesson/css にいると思います。

$ cd ..

現在のディレクトリが /gulp-lesson にいる事を確認します。

$ pwd

結果

/Users/ユーザー名/workdir/gulp-lesson

/gulp-lesson　ディレクトリの中に index.html を作成します。

$ touch index.html

それぞれのファイル(style.scss index.html)に内容を記載します

エディターでファイルを修正します。

[index.html]

html
<!DOCTYPE html>  
<html lang="ja">  
<head>  
    <meta charset="UTF-8">  
    <title>初めてのgulpによる、Sass</title>  
    <meta name="Author" content=""/>  
    <link rel="stylesheet" type="text/css" href="css/style.css">  
</head>  
<body>  
<h1>初めてのgulpによる、Sass</h1>  
<div>  
<p>divの中にpがあります。</p>  
</div>  
<div class="button_red">ボタン赤です。</div>  
<div class="button_size">サイズの違い。</div>   
</body>  
</html>

[style.scss]

$font-stack: Helvetica, sans-serif;
$primary-color:#333;

body{
    font: 100% $font-stack;
    color: $primary-color;
}
div{
    p{
        font-weight: bold;
    }
}
@mixin button{
    height: 40px;
    width: 50px;
    color: #fff;
}
.button_red{
    @include button;
    background-color:#red;
}

@mixin buttonS($size){
    height: 40px;
    width: $size;
    color: #fff;
}
.button_size{
    @include buttonS(60px);
    background-color: #666;
}

初めてのGulpによるSass

/gulp-lessonにある、index.htmlをブラウザーで確認します。

表示すると、cssファイルがないので、htmlの文字だけが表示されるはずです。

現在のディレクトリが /gulp-lesson にいる事を確認します。

$ pwd

結果

/Users/ユーザー名/workdir/gulp-lesson

gulpでSassからCSSを出力します。

$ npx gulp

結果

[01:33:36] Using gulpfile ~/workdir/gulp-lesson/gulpfile.js
[01:33:36] Starting 'default'...
[01:33:36] Finished 'default' after 8 ms

確認

/gulp-lesson/css ディレクトリ内にstyle.cssが出力されたと思います。

エディターで確認して見ましょう。

body {
  font: 100% Helvetica, sans-serif;
  color: #333; }

div p {
  font-weight: bold; }

.button_red {
  height: 40px;
  width: 50px;
  color: #fff;
  background-color: #red; }

.button_size {
  height: 40px;
  width: 60px;
  color: #fff;
  background-color: #666; }

続いてindex.htmlをブラウザで再度確認します。

結果
色がついたかと思います。

Gulpのオプション

CSSのコードを整形
上記の結果だとCSSファイルは、

.button_size {
  background-color: #666; }

波括弧の位置が気になります。それらを整形します。
gulpfile.js を修正します。
.pipe(sass(ここに))

{
        outputStyle: 'expanded'
    }

を追記します。
[修正後のgulp file.js]

// gulpプラグインの読み込み
const gulp = require('gulp');
// Sassをコンパイルするプラグインの読み込み
const sass = require('gulp-sass');

// style.scssをタスクを作成する
// gulp.task('default',function () {実行される処理})
// 第一引数のdefaultはタスク名を記載する
// defaultで省略することができます。
gulp.task('default', function () {
    // style.scssファイルを取得
    gulp.src('css/style.scss')
    // Sassのコンパイルを実行
    // pip()は処理をつなげることができます。
    // sassで読み込んだファイルをsassファイルをコンパイルし、
    // gulp.destでcssディレクトリに出力します。
        .pipe(sass(    {
        outputStyle: 'expanded'
    }))

    // cssフォルダー以下に保存
        .pipe(gulp.dest('css'));
});

修正後ファイルを保存してターミナルより実行します。

$ npx gulp

再度、エディターで出力されたstyle.cssファイルをみてみます。

結果

.button_size {
  height: 40px;
}

波括弧の位置が変わったかと思います。

CSSのコードを圧縮

gulpfile.jsをエディターで修正します。

.pipe(sass(ここに))

{
      outputStyle: 'compressed'
    }

を記載します。

[修正後のgulpfile.js]

const gulp = require('gulp');
const sass = require('gulp-sass');

gulp.task('default', function () {
    gulp.src('css/style.scss')
        .pipe(sass(    {
        outputStyle: 'compressed'
    }))
        .pipe(gulp.dest('css'));
});

同様に $ npx gulp コマンドでSassをCSSに変更します。

エディターでCSS を確認します。

[CSS] 圧縮されて一行で記載されているかと思います。

SCSSファイルの自動更新

gulpfile.jsをエディターで修正します。
css/style.scssに変更があった場合、gulp.watchで監視します。

gulp.watch('css/style.scss', function(){処理の内容});

コンパイルエラーが発生した場合、watch(監視)が停止します。
.on('error', sass.logError) を追加する事によって、停止しないようにする事ができます。

        .pipe(sass({
            outputStyle: 'expanded'
        })).on('error', sass.logError)

のようにに記載します。

[修正後のgulpfile.js]

const gulp = require('gulp');
const sass = require('gulp-sass');

gulp.task('default', function () {
    gulp.watch('css/style.scss', function(){
        gulp.src('css/style.scss')
            .pipe(sass({
            outputStyle: 'expanded'
        })).on('error', sass.logError)

    // cssフォルダー以下に保存
        .pipe(gulp.dest('css'));
    });
});

ターミナルより、watch機能を起動します。

$ npx gulp

止め方はctrl + c
sassを変更して、自動的に更新されるか確認します。

style.scssファイルエディターで開いて修正し保存します。

[修正後のCSS]

$font-stack: Helvetica, sans-serif;
$primary-color:#333;

body{
    font: 100% $font-stack;
    color: $primary-color;
}
div{
    p{
        font-weight: bold;
        color: aqua;
    }
}
@mixin button{
    height: 40px;
    width: 50px;
    color: #fff;
}
.button_red{
    @include button;
    background-color:red;
}

@mixin buttonS($size){
    height: 40px;
    width: $size;
    color: #fff;
}
.button_size{
    @include buttonS(60px);
    background-color: #666;
}

変更を確認します。

出力されたcssがaquaになっていること。

index.htmlをブラウザーで確認すると、aqua色になっていることを確認します。

以上でgulpによる初めてのsassは完了です。

質疑応答

githubやファイルの受け渡しについて Node_moduleはファイル数が多くギットで管理しない。
gulpfile.js ,　package.json　, style.scss　を頂いたり、gitで管理するとよい。

インストール環境

インストールしたAtomのバージョン

インストール

Atomの日本語化

半角スペース、タブの可視化

インデントガイドを表示

Atomに慣れてきたらWelcomeタブを非表示

Telemetry Consentを非表示にする

各パッケージを入れる

Project-manager

プロジェクトの登録方法

プロジェクトを呼び出す

open-recent

smart-tab-name

file-icons

auto-encoding

入力関係

tag

autocomplete-paths

highlight-selected

pigments

show-ideographic-space

autoprefixer

atom-beautify

atom-csscomb

登録しておいたスニペットを自動補完

css-snippets

javascript-snippets

jquery-snippets

文法チェッカー

w3c-validation

linter

linter-jshint

linter-htmlhint

linter-sasss-lint

Linter-csslint

Sublime Textをインストール

PackageControllをインストール

メニューを日本語化

日本語化の設定

スペースとタブを表示

プラグインをインストール

A File Icon

All Autocomplete

AutoFileName

BracketHighlighter

Color Highlighter

ConvertToUTF8

CSScomb

Goto-CSS-Declaration

HTML-CSS-JS Pretify

Markdown Extended

Sass

SideBarEnhancements

SublimeLinter

SublimeLinter-contrib-sass-lint

SublimeLinter-csslint

SublimeLinter-html-tidy

TrailingSpaces

View In Browser

W3CValidators

node.jsをインストール

今回の開発環境

Node.jsのインストール

インストールのメニュー

command line developer toolsをインストール

ターミナルを起動します。

Homebrewをインストール

nodebrewをインストール

nodebrewの初期設定

nodebrewのpathを設定

Node.jsをインストール

開催日

主催者

ハンズオン形式

目次

Sassとは

gulpとは

今回の開発環境

macにインストール