gulpの導入

準備

node.jsがインストールされているとして。
プロジェクトのディレクトリでpackage.jsonを作る。さらに、gulpコマンドが使えるようにする。

$ npm init
$ npm install -g gulp
$ gulp -v

ディレクトリ内の構造

---gulp
---package.json
---src
    ---js
    ---css
    ---www

gulpfile.jsを置く

プロジェクトのルートにgulpfile.jsを置き、ここにタスクを追加していくのだが、今回はgulp/tasks以下にファイルを作成し、そのファイルを読み込むようにする。

モジュールをいくつか追加する

$ npm install -D require-dir gulp gulp-if gulp-uglify gulp-webpack

gulpfile.jsの中身

gulpfile.js

var requireDir = require(require-dir');
requireDir('./gulp/tasks/', {resource": true});

tasksの設定

config.js

gulp/config.jsを作り、各タスクの設定を記述しておく

config.js

var dest = './build'; // 出力先ディレクトリ
var src = './src';  // ソースディレクトリ

module.exports = {
  // 出力先の指定
  dest: dest,

  // jsのビルド設定
  js: {
    src: src + '/js/**',
    dest: dest + '/js',
    uglify: false
  },

  // webpackの設定
  webpack: {
    entry: src + '/js/app.js',
    output: {
      filename: 'bundle.js'
    },
    resolve: {
      extensions: ['', '.js']
    }
  }
}

webpack.js

gulp/tasksにwebpack.jsを追加

webpack.js

var gulp = require('gulp');
var gulpif = require('gulp-if');
var uglify = require('gulp-uglify');
var webpack = require('gulp-webpack');
var config = require('../config');

gulp.task('webpack', function () {
    gulp.src(config.webpack.entry)
        .pipe(webpack(config.webpack))
        .pipe(gulpif(config.js.uglify, uglify()))
        .pipe(gulp.dest(config.js.dest));
});

webpackタスクの実行

$ gulp webpack

実行後ルートディレクトリ内にbuildディレクトリが作成され、その中に、コンパイル済みのjs/bundle.jsが作成される。

jade.js

jadeをビルドするためのモジュールを追加

$ npm install -D gulp-jade

gulp/tasksにjade.jsを追加

jade.js

var gulp = require("gulp");
var jade = require("gulp-jade");
var plumber = require("gulp-plumber");
var config = require('../config').jade;

gulp.task("jade", function(){
  gulp.src(config.src)
      .pipe(plumber()) // エラーが発生しても処理を継続
      .pipe(jade(config.options))
      .pipe(gulp.dest(config.dest));
});

config.jsに以下を追加

config.js

jade: {
    src: [
      src + '/www/**.jade'
    ],
    dest: dest,
    options: {pretty: true}
  },

css.js

scssをビルドするためにモジュールを追加

$npm install -D gulp-compass gulp-minify-css gulp-plumber gulp-concat gulp-autoprefixer

gulp/tasksにcss.jsを追加

css.js

var gulp = require('gulp');
compass = require ('gulp-compass');
minify = require('gulp-minify-css');
gulpif = require('gulp-if');
var config = require('../config').css;

gulp.task('css', function(){
if(!compass) init();
gulp.src(config.src + '/**.scss')
    .pipe(compass({
        config_file: null,
        css: config.dest,
        sass: config.src,
       image: config.src,
       http_path: config.dest
    }))
    .pipe(gulpif(config.minify, minify()))
    .pipe(gulp.dest(config.dest));
});        

config.jsに以下を追加

config.js

css: {
    src: src + '/css',
    dest: dest + '/css',
    output: 'main.css',  // 出力ファイル名
    autoprefixer: {
      browsers: ['last 2 versions']
    },
    minify: false
  },

build.js

jade,js,cssをまとめてビルドできるようにする。gulp/tasks以下にbuild.jsを追加

build.js

var gulp = require('gulp');

gulp.task('build', ['webpack', 'css', 'jade']);

watch.js

ソースを書き換えたら、自動でビルドが走るようにする。

必要なモジュールをインストール

$ npm install -D gulp-watch

watch.js

var gulp = require('gulp');
var watch = require('gulp-watch');
var config = require('../config').watch;

gulp.task('watch', function () {
    // js
    watch(config.js, function () {
        gulp.start(['webpack']);
    });

    // css
    watch(config.css, function () {
        gulp.start(['css']);
    });

    // jade
    watch(config.jade, function() {
        gulp.start(['jade']);
    });
});

config.jsに以下を追記

config.js

var path = require('path');
var relativeSrcPath = path.relative('.', src);

watch: {
    js: relativeSrcPath + '/js/**',
    styl: relativeSrcPath + '/css/**',
    jade: relativeSrcPath + '/www/**',
    www: relativeSrcPath + '/www/**'
  },