単純なGulpファイルを使って、scssのコンパイルをする方法です。
環境：Mac
nodeがインストール済みの場合
・テンプレートファイルをダウンロード
https://github.com/abenosite/gulp-01
・解凍後、ターミナルにドラッグ&ドロップ
|
1 2 3 4 5 6 7 8 9 10 |
npm install gulp -g npm install --save gulp watch //終了：Ctrl + C //再開：gulp watch //1.gulpをグローバルにインストール（初回のみ //2.ディレクトリのnode_modulesにパッケージをインストール（初回のみ） //3.scssファイルに変更があった場合、コンパイルをする |
以上で終了です。
5分で環境が構築できてしまいます。
すでにgulpがインストールされている時は
|
1 2 |
npm install --save gulp watch |
これでOK！
gulpファイルをgitで管理しておけば、チームの人に共有するのが簡単です。
エディターに依存しないしね。
グローバルにgulpを入れないほうがいいっていう記事もあるけど、グローバルにいれるから「gulp watch」だけで起動させることができます。
自分はそっちのメリットの方が大きいと思っています。
nodeがインストールされていない場合
nodeをインストールしてください。（下記のどちらかで対応）
（1）公式からインストールする場合
（2）Node.jsのバージョンを変更する可能性がある場合
https://qiita.com/PolarBear/items/62c0416492810b7ecf7c
・テンプレートファイルをダウンロード（gulp-01-master.zip）
|
1 2 3 4 5 6 7 8 9 10 |
ディレクトリ gulp-01-master ├── assets | ├── scss | └── main.scss └── gulpfile.js └── index.html └── package.json └── README.md |
解凍したフォルダを「ターミナル」にドラッグ&ドロップしてください。
こんな表示になるはずです。
|
1 2 3 |
npm install gulp -g npm install --save gulp watch |
この表示になれば成功です。
あとは「main.scss」ファイルを変更して保存するたびにコンパイルが行われます。
コンパイルが行われるたびに、行数が増えて行きます。
もし、{}の閉じ忘れなどでコンパイルエラーが起きると、下記のようにgulpが止まります。
ただ、scssファイルを修正してから「gulp watch」をすれば、再度コンパイルがはじまります。
コンパイルを終了させるときは「Ctrl + C」
再開させるときは「gulp watch」です。
ターミナルの便利なコマンド
キーボードの「上矢印」押すと、前回のコマンド「gulp watch」を呼び出してくれます。
gulpをはじめたときの参考ワード
「gulp mac」
「node mac」
「npm install エラー」←「sudo」をつけると問題解決する場合あります
「コマンド ターミナル」ターミナル操作に慣れていない人むけ
自分は、ネットで公開されているgulpファイルを片っ端からダウンロードして試していた時期があります。
「gulp テンプレート mac」などで検索して、10個くらいのテンプレートを試せば、gulpのコツがつかめます。
・npmインストール
これができるようになるだけで、世界が広がります。
おためしあれ。