gulpとnode.jsの連携

このエントリーをはてなブックマークに追加

Gruntと比較してgulpがイケてるなと思うのはnode.jsつまりJavaScriptを利用してカジュアルにタスクをカスタマイズできるところです。

たとえば、昨日書いたSassをコンパイルするタスクは以下のようにnode.jsでカスタマイズするとかなり便利になった。

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var fs = require('fs');
var path = require("path");
 
//config
var root = "htdocs",
config = {
   "path" : {
      "htdocs"    : root,
      "sass"      : root+"/sass",
      "css"       : root+"/css"
   }
}
 
//watch task
gulp.task('watch', function() {
    gulp.watch(config.path.sass+'/**/*', function(arg){
        if(arg.type=="deleted"){
            var cssFilePath = arg.path.replace(config.path.sass,config.path.css).replace("scss","css");
            if(path.existsSync(cssFilePath)){
                fs.unlink(cssFilePath);
            }
        }else{
            gulp.run('sass');
        }
    });
});
  
//Sass & autoprefixer
gulp.task('sass', function () {
    gulp.src(config.path.sass+'/*')
        .pipe(sass())
        .pipe(autoprefixer("last 2 version", "ie 8", "ie 7"))
        .pipe(gulp.dest(config.path.css));
});

何をしているかというとSassディレクトリ内のscssファイルが削除された際に対応するcssファイルを削除する処理をJavaScriptで追加しています。こうするとscssファイルの名前を変更するなどした際にCSSディレクトリに溜まるゴミファイルの発生を防ぐことができるし、ファイル名変更時にはaddedとdeletedと2つのFile変更が発生してタスクが2回走るけどそういうのを防ぐことができる。

Gruntでもタスクを作ればできるが、gulpより手続きやお作法が多いのでかなりめんどくさいのでこれからはgulp押しでいきたいと思います。

関連エントリー

CSSスプライトを生成する「grunt-spritesmith」
CSS3のベンダープリフィックスを後付けする「grunt-autoprefixer」
grunt-webfontで書き出されるwebフォントの文字列を変更
メディアクエリをまとめるGruntタスク「grunt-combine-media-queries」

スポンサードリンク

«タスクランナーgulp入門 | メイン | Sassなどのエラー時にgulpタスクを終了させない為の「gulp-plumber」»

このエントリーのトラックバックURL
コメントを投稿