no-image

5分でおわるgulpでsassのコンパイル(テンプレートあり)

単純なGulpファイルを使って、scssのコンパイルをする方法です。

環境:Mac

nodeがインストール済みの場合

・テンプレートファイルをダウンロード
https://github.com/abenosite/gulp-01

・解凍後、ターミナルにドラッグ&ドロップ

以上で終了です。

5分で環境が構築できてしまいます。

すでにgulpがインストールされている時は

これでOK!

 

gulpファイルをgitで管理しておけば、チームの人に共有するのが簡単です。

エディターに依存しないしね。

グローバルにgulpを入れないほうがいいっていう記事もあるけど、グローバルにいれるから「gulp watch」だけで起動させることができます。

自分はそっちのメリットの方が大きいと思っています。

 

nodeがインストールされていない場合

nodeをインストールしてください。(下記のどちらかで対応)

(1)公式からインストールする場合

https://nodejs.org/ja/

(2)Node.jsのバージョンを変更する可能性がある場合

https://qiita.com/PolarBear/items/62c0416492810b7ecf7c

・テンプレートファイルをダウンロード(gulp-01-master.zip)

解凍したフォルダを「ターミナル」にドラッグ&ドロップしてください。

こんな表示になるはずです。

この表示になれば成功です。

あとは「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インストール

これができるようになるだけで、世界が広がります。

おためしあれ。