gulp 入門 #gulp

gulp の特長

公式によると、以下の特長があるらしい。

Easy to use (使いやすく、複雑なタスクも扱いやすいよ)
Efficient (Node.js の Stream をベースにしているので、中間ファイルを生成せず効率的なビルド処理が行えるよ)
High Quality (プラグインは厳密なガイドラインに基づいているため、高品質が保証されているよ)
Easy to Learn (gulp 自体には最小限のAPIしか無いので、学習コストが低いよ)

gulp をインストールする

さっそく gulp をインストールしてみる。

npm install -g gulp

続いて、以下の package.json を用意して、npm install する。

{
  "name": "gulp-build",
  "version": "1.0.0",
  "main": "gulpfile.js",
  "author": "",
  "dependencies": {
    "gulp": "3.8.0",
    "gulp-concat": "2.2.0",
    "gulp-imagemin": "0.6.1",
    "gulp-minify-css": "0.3.4",
    "gulp-uglify": "0.3.0"
  },
  "scripts": {
    "build": "gulp"
  }
}

gulp タスクを定義してみる

gulp では、Grunt での Gruntfile.js にあたる gulpfile.js にタスクの定義 (というか実装) を行う。
今回は Grunt でよくやる concat, uglify, cssmin, imagemin を試してみる。

gulp.task でタスクを定義し、gulp.src で対象を決め、後は pipe で処理をつないでいくだけ。

gulpfile.js

var gulp = require('gulp'),
  concat = require('gulp-concat'),
  uglify = require('gulp-uglify'),
  minifyCss = require('gulp-minify-css'),
  imagemin = require('gulp-imagemin');

var path = {
  js: ['../vendor/**/*.js'],
  css: ['../vendor/**/*.css']
}

gulp.task('bench-concat', function() {
  gulp.src(path.js)
    .pipe(concat('all.js'))
    .pipe(gulp.dest('dist/js/'));
});

gulp.task('bench-uglify', function() {
  gulp.src(path.js)
    .pipe(uglify())
    .pipe(concat('all.min.js'))
    .pipe(gulp.dest('dist/js/'));
});

gulp.task('bench-cssmin', function() {
  gulp.src(path.css)
    .pipe(concat('all.min.css'))
    .pipe(minifyCss())
    .pipe(gulp.dest('dist/css/'));
});

gulp.task('bench-imagemin', function() {
  gulp.src(['../images/**/*.{png,jpg,gif}'])
    .pipe(imagemin())
    .pipe(gulp.dest('dist/images/'));
});

gulp.task('default', ['bench-concat', 'bench-uglify', 'bench-cssmin', 'bench-imagemin']);

gulpfile.js が配置されたディレクトリで gulp コマンドを実行すると、無事ビルドが成功する。超簡単。

gulp
[16:00:49] Using gulpfile ~/xxx/gulpfile.js
[16:00:49] Starting 'bench-concat'...
[16:00:49] Finished 'bench-concat' after 22 ms
[16:00:49] Starting 'bench-uglify'...
[16:00:49] Finished 'bench-uglify' after 13 ms
[16:00:49] Starting 'bench-cssmin'...
[16:00:49] Finished 'bench-cssmin' after 1.72 ms
[16:00:49] Starting 'bench-imagemin'...
[16:00:49] Finished 'bench-imagemin' after 3.63 ms
[16:00:49] Starting 'default'...
[16:00:49] Finished 'default' after 31 μs
[16:01:13] gulp-imagemin: Minified 90 images (saved 518.69 kB - 19.9%)

Grunt との比較

上記と同様のビルドを Grunt で書くと以下のような Gruntfile.js となる。もう少しタスクが複雑になってくるとはっきりしてくると思うけど、gulp の方が記述量少なくすっきりしていて、タスクの内容も把握しやすい。

Gruntfile.js

module.exports = function(grunt) {

  var path = {
    js: ['../vendor/**/*.js'],
    css: ['../vendor/**/*.css']
  }

  grunt.initConfig({
    concat: {
      options: {
        separator: ';'
      },
      dist: {
        src: path.js,
        dest: 'dist/js/all.js'
      }
    },

    uglify: {
      build: {
        files: {
          'dist/js/all.min.js': path.js
        }
      }
    },

    cssmin: {
      build: {
        src: path.css,
        dest: 'dist/css/all.min.css'
      }
    },

    imagemin: {
      build: {
        files: [{
          expand: true,
          cwd: '../images',
          src: ['**/*.{png,jpg,gif}'],
          dest: 'dist/images/'
        }]
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-imagemin');

  grunt.registerTask('bench-concat', ['concat']);
  grunt.registerTask('bench-uglify', ['uglify']);
  grunt.registerTask('bench-cssmin', ['cssmin']);
  grunt.registerTask('bench-imagemin', ['imagemin']);
  grunt.registerTask('default', ['bench-concat', 'bench-uglify', 'bench-cssmin', 'bench-imagemin']);
};

使ってみて

Grunt では複数の処理を組み合わせたビルドを行う場合、定義が分散して見通しが悪くなってしまいがちだったけど、gulp はよりシンプルに書けるイメージ。
プラグインも思ったより充実しているので、新規プロジェクトで使ってみるとかはアリだと思う。