gulpfile.jsのここを直したい

課題

1. watch中にファイルを追加しても自動的には管理対象にならないので、どうにかしたい
2. Node.jsの4.0からES6が使えるようになっているので、書き直したい
3. Jadeのコンパイルが1分以上も続くようになってきたので、必要なファイルだけがコンパイルされるように直したい
4. この機会にグローバルへのインストールが必須なものは排除したい

1. watch中にファイルを追加しても自動的には管理対象にならないので、どうにかしたい

watch中にファイルを追加しても何も起こらない例：

gulpfile.js

gulp.task('watch', function() {
  gulp.watch(['./src/**/*.styl'], ['build-stylus']);
});

gulpのwatchメソッドではなく、gulp-watchを使うことで解決できます。

gulpfile.js

var gulpWatch = require('gulp-watch');

gulp.task('watch', function() {
  gulpWatch(['./src/**/*.styl'], function() {
    gulp.start('build-stylus');
  });
});

2. Node.jsの4.0からES6が使えるようになっているので、書き直したい

ES5で書かれている例：

gulpfile.js

var gulpWatch = require('gulp-watch');

gulp.task('watch', function() {
  gulpWatch(['./src/**/*.styl'], function() {
    gulp.start('build-stylus');
  });
});

とりあえずconstと=>を使って、varとfunctionを置き換えればOK。

gulpfile.js

const gulpWatch = require('gulp-watch');

gulp.task('watch', () => {
  gulpWatch(['./src/**/*.styl'], () => {
    gulp.start('build-stylus');
  });
});

処理が一行だけなら、もう少しだけ短く書けますね。

gulpfile.js

const gulpWatch = require('gulp-watch');

gulp.task('watch', () => {
  gulpWatch(['./src/**/*.styl'], () => gulp.start('build-stylus'));
});

3. Jadeのコンパイルが1分以上も続くようになってきたので、必要なファイルだけがコンパイルされるように直したい

ファイルを保存するたびに全ファイルが更新されてしまう例：

gulpfile.js

var gulpJade = require('gulp-jade');

gulp.task('jade', function() {
  return gulp.src(['./src/**/*.jade'])
    .pipe(gulpJade())
    .pipe(gulp.dest('./dist/'));
});

gulp.task('watch', function() {
  gulp.watch(['./src/**/*.jade'], ['jade']);
});

watch系のタスクの中で、コンパイル処理を続けて書けばOK。

gulpfile.js

const gulpJade = require('gulp-jade');
const gulpWatch = require('gulp-watch');

gulp.task('jade', () => {
  return gulp.src(['./src/**/*.jade'])
    .pipe(gulpJade())
    .pipe(gulp.dest('./dist/'));
});

gulp.task('watch', () => {
  gulpWatch(['./src/**/*.jade'])
    .pipe(gulpJade())
    .pipe(gulp.dest('./dist/'));
});

4. この機会にグローバルへのインストールが必須なものは排除したい

グローバルへのインストールが必要なものの例：

• gulp本体
• Autoprefixer

$ npm install --global gulp
$ npm install --global postcss-cli autoprefixer

一方で、gulpプラグインのgulp-autoprefixerの方はグローバルへのインストールが不要です。

• gulp-autoprefixer

$ npm install --save-dev gulp-autoprefixer

gulp本体もgulpタスクをnpmコマンド経由で叩くようにすれば、グローバルへのインストールが不要になります。

↓こうするのを止めて、

$ gulp build

↓こう叩く

$ npm run build

必要な作業はpackage.jsonにエイリアスを張るだけです。

package.json

{
  "name": "my-awesome-project",
  "version": "1.0.0",
  "scripts": {
    "build": "gulp build",
    "watch": "gulp watch"
  },
  "devDependencies": {
    "gulp": "~3.9.0"
  }
}

まとめ

とりあえず以上ですが、読みやすくするために色々と端折りました。
長いバージョンはこちらで確認できます。^{1 2}

ご清聴、ありがとうございました。

1. 本物の方ではAutoprefixerは使わずに、kouto-swissを使用しています。 ↩

2. ディレクトリ構成がやや特殊なので参考にされる際は気をつけて下さい。 ↩