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/**'
  },
```