Skip to content

gulpでSassのコンパイルを自動化する

(前回:Windows10にgulpをインストール

今回は、gulpの使い方を理解するために、SassをCSSに変換するタスクの自動化を目標としたいと思います。

環境はこちらです。

gulp-sassのインストール

gulpでは、必要なパッケージをnpmでインストールし、その実行内容をgulpfile.jsに記述することでタスクを自動化するようです。

まずはgulp-sassをインストールします。

–save-devオプションをつけることによって、インストールしたものをpackage.jsonに自動で記入しています。

前回package.jsonを作成した際にいろいろ空欄にしているのでwarningがいくつか出ますが、エラーとならずに作業完了すればOKです。

実際に次のディレクトリをエクスプローラで確認してみます。

C:\Users\(ユーザー名)\Code\flocss\develop\gulp

node_modulesディレクトリの中にgulp-sassディレクトリが出来ており、package.jsonの”devDependencies”に「gulp-sass」が追加されていると思います。

gulp-sassを使ったタスクを作成

次に、gulpfile.jsにプログラムを書いていきます。

ちなみに、自分は、下記のようなディレクトリ構造で進めていますので、パスはこれに合わせて書いていきます。

sassディレクトリの.scssファイルをcssディレクトリに出力します。

タスクを実行

では、実際にgulpを動かしてSassのコンパイルをしてみます。

まずはターミナルでコマンド「gulp」を入力し、gulpを起動します。

どうやら何かが始まったようです。

自分の予想では、

Starting ‘default’ → Starting ‘watch’ → Finished ‘watch’ → Finished ‘default’

という順番で進むかと思っていましたが、どうやら違ったみたいです。

ともあれ正常に起動したようなので、エディタでscssファイルを編集してみることにします。

上記のようにSassファイルを編集し、保存します。

ターミナルに、下の2行が追加されました。

‘Sass’というタスクが開始、終了したようです。

実際にcssのディレクトリを確認してみます。

できました!(インデントは変だけど)

gulpの監視をやめるには、ターミナルでctrl-cを入力する必要があります。

gulpを扱う一通りの流れは把握できたので、今後便利そうなプラグインをどんどん入れていこうと思います。

Comments are closed.