単純な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インストール
これができるようになるだけで、世界が広がります。
おためしあれ。