デイジー・デジタル・デザイン

岩手県盛岡市・ホームページ制作・コンサルティング・ネット集客代行

gulp.jsを試してみたけれど

   

明日の「田舎IWDD」のネタ仕込みも含め、空いた時間でNode.jsのタスクランナー「gulp.js」を試してみました。gulpの詳細を知りたい方は適宜検索してみましょう。

やりたかったことは、この3つ。ふだん触っている時間が長い制作パターンを効率化できたらいいなと思ったわけです。

  1. Compassの自動コンパイル
  2. WordPressテーマファイルの監視
  3. ライブリロード

テスト的に2は後回しにして1と3を動かしてみました。参考にならないと思いますが、作ったgulpfile.jsはいちおうこんな感じで。とりあえず動いたけれど間違ってるかもしんないです。

// パッケージの読み込み
var gulp = require('gulp');
var compass = require('gulp-compass');
var livereload = require('gulp-livereload');

//compass
gulp.task('compass', function(){
    gulp.src('sass/*.scss').pipe(compass({
        config_file: 'config.rb',
        comments: false,
        css: 'css/',
        sass: 'sass/'
    }));
});

//watchでcompass書き出し+ライブリロード
gulp.task('watch', function(){
	livereload.listen();
    gulp.watch('sass/*.scss', function(event) {
        gulp.run('compass');
    }).on('change', function(file) {
    	livereload.changed(file.path);
    });
});

//デフォルトタスク
gulp.task('default', function(){
    gulp.run('watch');
});

動かしてみたら、gulpでのCompassのビルドがやたらと遅い。しかも書き換えが終わる前にブラウザがリロードしちゃってる。ビルド終了後にリロードするようにがんばって書き換える手もあるけれど…

  1. Compassの使用をやめる
  2. gulpの使用をやめる

…どちらかの選択になりそう。CoffeeScriptとか、他にもビルドするファイルがあるなら別だけれど、今のところ複雑なタスクは必要ないし、Compass使って手動リロードが無難なところかなあと思ってます。

今はやりのツールもやはり万能ではないわけで。動かしてみて、今の自分に合うか合わないかがわかっただけでも収穫とすべきなんでしょう。ううむ。

 - ウェブデザイン, ウェブ開発