# gulp.jsとは

- JavaScriptで書くタスクランナー
  - Node.jsで動きます
- 定義されたタスクを実行できる

# 使いどころ

- Sassのコンパイル
- autoprefixerを使ってベンダープリフィックスを付ける
- JavaScriptのlintとかminify
  - ES 2015をbabel
- live reload
- アプリケーションサーバーの起動管理

# 導入の仕方

Mac前提で

- `brew install node`
  - nodebrewとか使いたい場合はそちらで
  - 何もしないと5.x系が入ると思いますが、安定版（LTS）は4.x系
- `npm install gulp --global`

# npmとは

- Node.jsのパッケージマネージャー
  - RubyでいうところのGem（Gemfile）
  - PHPでいうところのComposer（composer.lock）
- Node.jsの場合`package.json`というファイルを使います
  - `npm init`すると雛形が作成できます
  - 決められたバージョンをインストールできるようにする仕組み

## 仕組み

- `npm install`すると`node_modules`というディレクトリーができてそこにパッケージがインストールされます
- `npm install --saveす`るとインストールされた上に`package.json`にそのモジュール名とインストールしたバージョンが記録されます。`dependencies`として。
- `npm install --save-dev`すると同様ですが`devDependencies`として記録されます
- 決められたバージョンをインストールできるようにする仕組み
# 例

```js:gulpfile.js
'use strict';

const gulp = require('gulp'),
      sass = require('gulp-sass'),
      bourbon = require('node-bourbon').includePaths,
      autoprefixer = require('gulp-autoprefixer'),
      uglify = require('gulp-uglify'),
      nodemon = require('gulp-nodemon');

const paths = {
  sass: [
    'assets/sass/**/*.scss',
    'assets/sass/**/*.sass'
  ],
  js: [
    'assets/js/**/*.js'
  ],
  vendorcss: [
    'node_modules/normalize.css/normalize.css'
  ],
  vendorjs: [
    'node_modules/jquery/dist/jquery.min.js'
  ]
};

gulp.task('sass', function() {
  gulp.src(paths.sass)
    .pipe(sass({
      outputStyle: 'compressed',
      includePaths: ['sass'].concat(bourbon)
    }))
    .on('error', function(err) {
      return console.log(err.stack);
    })
    .pipe(autoprefixer({
      browsers: ['last 2 versions'],
      cascade: false,
      remove: false
    }))
    .pipe(gulp.dest('public/css'));
});

gulp.task('js', () => {
  gulp.src(paths.js)
    .pipe(uglify())
    .pipe(gulp.dest('public/js'));
});

gulp.task('watch', ['sass', 'js'], () => {
  gulp.watch(paths.sass, ['sass']);
  gulp.watch(paths.js, ['js']);
});

gulp.task('vendor', () => {
  gulp.src(paths.vendorcss, {base: 'node_modules'})
    .pipe(gulp.dest('public/css/vendor'));
  gulp.src(paths.vendorjs, {base: 'node_modules'})
    .pipe(gulp.dest('public/js/vendor'));
});

gulp.task('nodemon', () => {
  nodemon({
    script: 'app.js',
    ext: 'js jade',
    ignore: ['assets/*']
  }).on('restart', []);
});

gulp.task('default', ['watch', 'nodemon']);
```