ビルドツール「gulp」を触ってみた

HTML5 Advent Calendar 2013の25日目のエントリー「打倒Grunt!Node.js用の新たなビルドシステムgulpことはじめ」を読んで、試しに「gulp」を触ってみました。

gulpfile.js作成

触ってみての雑感は、CSSプリプロセッサーのコンパイルやminify、JSファイルの結合やminifyといった基本的なことができますが、Gruntと比べてさほど違いがないので、gulpのほうが優れているというような印象は持ちませんでした。

一応今回gulpで試したことをメモ代わりとして残しておきます。今回試したことは以下の通りです。

ビルド環境構築

  • JSファイルの結合とminify
  • CSSプリプロセッサーは「Sass/Compass」のコンパイルとminify
config.rb(Comassのconfig.rb)
gulpfile.js(このエントリーの主役)
/public_html
          |- /dev(開発用のJSフォルダ)
          |    |
          |    |--- app_1.js
          |    |--- app_2.js
          |    |--- /lib(jQueryなどのライブラリ用のフォルダ)
          |          |-- jquery.js
          |          |-- jquery.easing.min.js
          |    
          |- /js(結合後のJSファイル置き場所、本番用のJS) 
          |    |
          |    |--- lib.js(jQueryなどの結合後のJSファイル)
          |    |--- app.js(ライブラリ以外の結合後のJSファイル)
          |
          |- /sass(sassファイルの置き場所)
          |
          |- /css(CSSファイルの置き場所)
          |

JSファイルの結合とminify

まずはJSファイルの結合とminifyですが、これらをするためにはプラグインが必要ですので以下のプラグインを使用します。

gulp-concat
複数ファイルを結合するためのプラグイン
gulp-uglify
UglifyJSを使ってJSファイルをminifyするためのプラグイン

gulpのインストール

プロジェクトフォルダに移動して、ターミナルで以下のコマンドを入力して、力強くenterキーを押します。 冒頭でのエントリーにも記載されていますので、詳しくはそちらをご覧ください。

sudo npm install -g gulp

gulpプラグインのインストール

プラグインを使うにはインストールが必要です。これも冒頭でのエントリーにも記載されていますが、例えば、gulp-concatを使う場合には、ターミナルで以下のコマンドを入力して、力強くenterを押します。

sudo npm install gulp-concat

gulpfile.jsの作成

ビルドするためには、gulpfile.jsの作成が必要です。そのJSファイルをプロジェクトフォルダのルートに置きます。そして、ごまごまとタスクをgulpfile.jsに記載していきます。

JSファイルの結合とminifyのタスク

JSファイルの結合とminifyのタスクのコードは以下のようになります。

// gulpやプラグインをインポート
var gulp = require('gulp')
, concat = require('gulp-concat')
, uglify = require('gulp-uglify')
;

 
//JSファイルをjsフォルダにコピー
gulp.task('scripts', function() {
  gulp.src('public_html/dev/**/*.js')
    .pipe(gulp.dest('public_html/js'));
});
 
//それぞれのJSファイルを結合
gulp.task('concat', function() {
  gulp.src(['public_html/dev/lib/jquery.js','public_html/dev/lib/jquery.easing.min.js'])//JSライブラリの指定
    .pipe(concat("lib.js"))//JSライブラリの結合後のJSファイル名を定義
    .pipe(gulp.dest('public_html/js'));//結合後のJSファイルの置き場所を定義
  gulp.src(['public_html/dev/hoge.js','public_html/dev/script.js'])//JSライブラリ以外のJSファイルの指定
    .pipe(concat("app.js"))//JSライブラリ以外の結合後のJSファイル名を定義
    .pipe(uglify())//uglifyを使ってJSファイルをminify
    .pipe(gulp.dest('public_html/js'));//結合後のJSファイルの置き場所を定義
});

// デフォルトタスク
gulp.task('default', function() {
    gulp.run('scripts', 'concat');
 
    //JSファイルの変更を監視
    gulp.watch('public_html/dev/**', function(event) {
        gulp.run('scripts');
    });
    gulp.watch('public_html/js/**', function(event) {
        gulp.run('concat');
    });
});

これでJSファイルの結合とminifyはできます。これだけで、結合前のJSファイルを単体で指定していますが、public_html/dev/*.jsのような記述で一括で指定することも可能。gulpだからといってコード量がGruntと比べて少ないという印象はありません。

そして、ターミナルで以下のコマンドを入力して、力強くenterを押してgulpを走らせます。

gulp

「Sass/Compass」のコンパイルとminify

そして、メイン(謎)の「Sass/Compass」のコンパイルですが、主にCompassを使うのでCompassのコンパイルというとになります。やはいこれらをするのにもプラグインが必要です。

使用するgulpプラグイン

gulp-compass
Compassをコンパイルするためのプラグイン
gulp-minify-css
CSSファイルをminifyするためのプラグイン

「Compass」のコンパイルとminifyのタスク

「Compass」のコンパイルとminifyのタスクのコードは以下のようになります。

// gulpやプラグインをインポート
// gulpやプラグインをインポート
var gulp = require('gulp')
, compass =  require('gulp-compass')
, minifyCSS = require('gulp-minify-css')
, path = require('path')
;

//Sassファイル(Compass)をコンパイル
gulp.task('compass', function() {
    gulp.src('public_html/sass/*.scss')
        .pipe(compass({
            project: path.join(__dirname, 'public_html'),
            comments: false
        }))
});


//コンパイルされたCSSファイルをminify
gulp.task('css', function() {
    gulp.src(['public_html/css/**/*.css'])
        .pipe(minifyCSS())
        .pipe(gulp.dest('public_html/css'));
});

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

    //Sassファイルの変更を監視
    gulp.watch('public_html/sass/**', function(event) {
        gulp.run('compass');
    });
});

ここから大いに悩みに悩みまくったのですが、コンパイルは一応されるのですが、指定もしていないのに、「css」フォルダが作成されずに代わりに「stylesheets」フォルダが作成され、そこにコンパイルされたCSSが作成され、且つ 'ENOENT, no such file or directory '****/public_html/css/cssfile.css 'というエラーが起こります。う〜ん、さっぱり分からん....

なので、苦肉の策として下記を追加

//コンパイルされたCSSファイルをcssフォルダにコピー
gulp.task('css', function() {
    gulp.src(['public_html/stylesheets/**/*.css'])
        .pipe(minifyCSS())
        .pipe(gulp.dest('public_html/css'));
});

// デフォルトタスク
gulp.task('default', function() {
    gulp.run('compass', 'css');
 
    //CSSファイルの変更を監視
    gulp.watch('public_html/stylesheets/**', function(event) {
        gulp.run('css');
    });
});

これでも最初は'ENOENT, no such file or directory '****/public_html/css/cssfile.css 'というエラーが起こり、「stylesheets」フォルダが作成されます。しかし、このエラーが起こった後に再度「gulp」コマンドを打つと何もなかったかのようにgulpが動作します(「stylesheets」フォルダは残ったままですが)。なぜに勝手に「stylesheets」フォルダが作成されるのかどうかgulp自体の情報も少なく結局のところそれっぽい情報に辿り着くことがなかったので、私のしょーもない間違いなのか、gulp-compassのバグなのか、他に原因があるのかどうか分かりません。これに関しては引き続き調べます。

gulpfile.js

今回作成したgulpfile.jsはGistに置いていますので、ご興味ありましたらご参考ください。もしくは、エラーの原因がお分かりでしたらご教授いただけたら幸いでございます。

e-river / gulpfile.js