---
Title: 'gulp.jsとは #gulp.js #javascript'
Keywords:
  - gulp.js
  - javascript
Author: hiro_y
Web: 'https://mimemo.io/m/M0x5QZod8o3OjnP'
---

# gulp.jsとは

- JavaScriptで書くタスクランナー
  - Node.jsで動きます
- 定義されたタスクを実行できる
  - `gulpfile.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', () => {
  gulp.src(paths.sass)
    .pipe(sass({
      outputStyle: 'compressed',
      includePaths: ['sass'].concat(bourbon)
    }))
    .on('error', (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']);
```

- [Bourbon - A Lightweight Sass Tool Set](http://bourbon.io/)
- [postcss/autoprefixer: Parse CSS and add vendor prefixes to rules by Can I Use](https://github.com/postcss/autoprefixer)

# 余談: Bowerとは

- [Bower](http://bower.io/)
- クライアントコーディングとかで必要なパッケージを管理できる
- Node.jsでできている
- 導入は`npm install bower --save-dev`
- jQueryとかJSライブラリ、あとCSSのとか入れられる
- …でも正直npmでインストールできるものが多い
	- ので、bower使わずにnpmで済ませています
	- bowerが便利な場合も（まだ）あるのでそこは場合による

# 余談: Node.jsのバージョン

- 4.x系と5.x系の違い
- LTSかどうか
- 安定しているのが4.x系、新しい機能使いたいなら5.x系
- [Cordova](https://cordova.apache.org/)とか[Ionic](http://ionicframework.com/)とかたまに5.x系で動かなくなる…