gulp-sassを導入してSassのコンパイルを自動化する

よろしければシェアお願いいたします

gul-sassを導入してSassのコンパイルを自動化する
私は今までの現場で、Sassを導入していたところがありませんでした。
ですが今回ふれる機会があり、実際にgulp+Sassで自動コンパイルをしているところをみて「なんと便利なんだろう」と感動したので導入方法をメモしておきます。

なおgulpのタスクは色々な書き方ができますが、今回はES2015で記述します。

※ES2015で記述するためには設定が必要になります。
設定されていない方はgulpのタスクをES2015(ES6)で記述できるように設定した話をご覧ください。

※またこの記事では、事前にgulpを導入していることが前提となります。
まだの方はノンエンジニアでも簡単に出来るgulp導入をご覧ください。

Sassの導入

では実際にSassを導入していきましょう。
コマンドラインで下記を実行して開発用にSassを入れていきます。

これだけで、ローカルへSassの導入は終わりです。
正しく導入できているか確認する場合は、package.jsonを開いて
「devDependencies」にgulp-sassが追加されていれば大丈夫です。

Sassコンパイル用タスクの作成

ではコンパイル用のタスクをgulpfile.babel.jsに記述していきます。


以前の記事でベンダープレフィックスの自動付与のタスクを書き込んでいたので、今回はSassコンパイル時に自動付与を行うよう設定しています。

gulp-watchでファイル変更を監視する

gulp-sassを入れただけだと、コンパイルして欲しい時に毎回タスク実行コマンドを叩かないといけません。面倒くさいですね。
私としてはファイルの更新を監視して、「保存(変更)があったら自動コンパイルする」という形にしたいです。

そこで使用するのが「gulp-watch」というもので、ファイルの変更を監視してくれます。
これはgulpがデフォルトで用意している機能なので、特にインストールは必要なくタスクのみ記述します。

watch用タスクの作成

前手順で作成したタスクの続きに、watch用のタスクを追記していきます。

これでファイルを更新すると、勝手に自動コンパイルされます。
ただしコンパイルに失敗するとエラーでタスクが全て止まってしまうため、
次の記事でエラー落ちしないようにタスクを追記していきます。

スポンサーリンク
広告1
広告1

よろしければシェアお願いいたします

フォローする

スポンサーリンク
広告1