FEVDES BLOG

自分の経験をシェアしたい。Webデザインのテクニック&効率化。

3分で設定完了。コピペでできるgulpでCompassのコンパイル

   

gulp
gulpでCompassのコンパイルを、コピペで済ますようになって、最初の設定が3分で済むようになりましたので、いつもやっている手順を紹介します。

gulpやNode.jsのインストールがまだの方は、

ざっくりGulp.js入門(Mac向け) by @kazukichi3110

などを参考にインストールしてください。

SPONSORED LINK

(1)gulpをローカル環境にインストール

ターミナルを立ち上げ、gulpをローカル環境にインストール

cdコマンドで、作業のディレクトリに移動し、gulpをローカル環境にインストールします。

(2)package.jsonファイルを作成

Yes/Noを聞いてきますが、設定が不要ならYes(Enterキー)を教えて進んでかまいません。

(3)gulp-plumberをインストール

sassの記述にエラーがある場合、gulpが停止してしまいます。
記述ミスがあるたびに、gulpが停止してしまうのを防ぐために、「gulp-plumber」をインストールします。

(4)gulp-compassをインストール

compassを使用するために、「gulp-compass」をインストールします。

(5)gulpfile.jsを作成

「gulpfile.js」を作成します。

sass: ‘sass’が.scssファイル入れているディレクトリで、css: ‘css’がcssファイルが書き出されるディレクトリです。
制作環境に合わせて変更してください。

(6)config.rbの準備

「config.rb」が必要ですので、「config.rb」を作成し、適時変更して利用してください。

(7)gulp watchでコンパイル

ターミナルに「gulp watch」と打ち込めば実行されます。

sassファイルを保存するたびに、cssファイルが書き出されます。

まとめ

私のようなWebデザイナーだと、タスクランナーが便利とわかっていても、設定ファイルがプログラムっぽくて二の足を踏むのですが、使い出すと便利です。
gulpは、ざっくりとしかわからないのですが、必要な時に調べて導入すると便利です。
ちょっとしたことですが、小さなことから効率化できると、複利計算のように大きくスピードアップできます。

参考サイト

 - CSS