gulpでCompassのコンパイルを、コピペで済ますようになって、最初の設定が3分で済むようになりましたので、いつもやっている手順を紹介します。
2017/10/16 browser-sync追記
gulpやNode.jsのインストールがまだの方は、
ざっくりGulp.js入門(Mac向け) by @kazukichi3110
などを参考にインストールしてください。
(1)gulpをローカル環境にインストール
ターミナルを立ち上げ、gulpをローカル環境にインストール
cdコマンドで、作業のディレクトリに移動し、gulpをローカル環境にインストールします。
npm install --save-dev gulp
(2)package.jsonファイルを作成
npm init
Yes/Noを聞いてきますが、設定が不要ならYes(Enterキー)を教えて進んでかまいません。
(3)gulp-plumberをインストール
sassの記述にエラーがある場合、gulpが停止してしまいます。
記述ミスがあるたびに、gulpが停止してしまうのを防ぐために、「gulp-plumber」をインストールします。
npm install --save-dev gulp-plumber
(4)gulp-compassをインストール
compassを使用するために、「gulp-compass」をインストールします。
npm install --save-dev gulp-compass
(5)browser-syncをインストール
npm install --save-dev browser-sync
(6)gulpfile.jsを作成
「gulpfile.js」を作成します。
var gulp = require('gulp'); var compass = require('gulp-compass'); var plumber = require('gulp-plumber'); var browserSync =require('browser-sync'); // gulp-compass gulp.task('compass', function() { gulp.src('./html/sass/**/*.scss') .pipe(plumber()) .pipe(compass({ config_file: 'config.rb', sass: 'sass', css: 'css' })); }); gulp.task('browser-sync', function() { browserSync({ server: { baseDir: "./" //対象ディレクトリ ,index : "index.html" //インデックスファイル } }); }); gulp.task('bs-reload', function () { browserSync.reload(); }); // 監視する gulp.task('watch' , ['compass' , 'browser-sync'] , function(){ gulp.watch('./sass/**/*.scss', ['compass']); gulp.watch("./**/*.html", ['bs-reload']); gulp.watch("./css/**/*.css", ['bs-reload']); gulp.watch("./js/**/*.js", ['bs-reload']); });
sass: 'sass'が.scssファイル入れているディレクトリで、css: 'css'がcssファイルが書き出されるディレクトリです。
制作環境に合わせて変更してください。
(7)config.rbの準備
「config.rb」が必要ですので、「config.rb」を作成し、適時変更して利用してください。
require 'compass/import-once/activate' http_path = "/" css_dir = "./" sass_dir = "sass" images_dir = "images/" javascripts_dir = "js" cache = false output_style = :expanded line_comments = false
(8)gulp watchでコンパイル
ターミナルに「gulp watch」と打ち込めば実行されます。
gulp watch
sassファイルを保存するたびに、cssファイルが書き出されます。
まとめ
私のようなWebデザイナーだと、タスクランナーが便利とわかっていても、設定ファイルがプログラムっぽくて二の足を踏むのですが、使い出すと便利です。
gulpは、ざっくりとしかわからないのですが、必要な時に調べて導入すると便利です。
ちょっとしたことですが、小さなことから効率化できると、複利計算のように大きくスピードアップできます。