僕なりのフロントエンド開発環境2016年版v2

2017年版も書いた
http://qiita.com/koh110/items/05ce5ca04922493ba327

---

Node v6にアップデート直後に動かなくなった部分があったので、今後アップデートがあってもなるべく早く追いつけるように開発環境をアップデート
http://qiita.com/koh110/items/83cb29f8ecc2738ea8bb
https://github.com/koh110/minjsapp

目指すスタイル

なるべく複数の機能を統括的に含めたツールを使わない。
内部で使っているモジュールのバージョンアップがあっても、それをラッピングしているツールがアップデートされるまで、Node.jsのバージョンアップができないという事がある。
ex) node-sassがNode.js v6に対応したのに、pleeeaseが対応版のnode-sassに対応されない。
ex) pleeeaseが対応したのにgulp-pleeeaseが対応されない

特にgulpはgulpで使うためだけにgulp-pleeeaseなどのラッパーが存在している事が多く、そういったラッパーを使っていると作者のバージョンアップが遅れ、それに引きづられて自分の開発環境もアップデートでしづらくなる性質がある。

そこで、ツールを使う時はなるべく本体そのまま使う or ツールの本家本元がgulpのプラグインを提供している場合は使ってもよい、というスタイルでいこうと思う。

gulp-pleeeaseをやめた

gulp-pleeease -> node-sass + autoprefixer (+ postcss)
先のスタイルに合わせて、gulp-pleeeaseをやめてそれぞれ欲しい機能に分離した。
やりたい事はsassのコンパイルをしてautoprefixerをかけたい。
gulp-pleeeaseというgulpで簡単に使えるプラグインが提供されていたから、pleeease楽でいいじゃんと思ってたけど、node-sass, autoprefixerのアップデートに追いつけていけなくなってそうだったので思い切ってばっさりと切り捨て。

sassコンパイル

before

見た目はすっきりしてる

gulp.task('sass', () => {
  return gulp.src('sass/*.scss')
    .pipe(pleeease({
      sass: true,
      minifier: false,
      out: 'style.css'
    }))
    .pipe(gulp.dest('dist'));
});

after

promise使って書きたいけど依存関係を浅くするためにタスクの見た目の悪さは我慢

gulp.task('sass', (cb) => {
  sass.render({
    file: 'sass/entry.scss'
  }, (err, result) => {
    if (err) {
      return cb(err);
    }
    fs.writeFile('dist/style.css', result.css, (err) => {
      if (err) {
        return cb(err);
      }
      cb();
    });
  });
});

autoprefixer

before

gulp.task('prefixer', () => {
  const pleeease = require('gulp-pleeease');
  return gulp.src('style.css')
  .pipe(pleeease({
    autoprefixer: {
      browsers: [
        'last 1 versions',
        'ie >= 10',
        'safari >= 8',
        'ios >= 8',
        'android >= 4'
      ]
    },
    minifier: false
  }))
  .pipe(gulp.dest('dist'));
});

after

autoprefixerを使うためにgulp-postcssの依存が増えた。
autoprefixerとpostcssとgulp-postcssの作者は一緒なので、autoprefixerのバージョンアップ時にはバージョンアップについていけると判断しこのモジュールは利用する事に決定。

gulp.task('styles', ['css', 'sass'], () => {
  const postcss = require('gulp-postcss');
  const autoprefixer = require('autoprefixer');
  return gulp.src('style.css')
  .pipe(postcss([autoprefixer({
    browsers: [
      'last 1 versions',
      'ie >= 10',
      'safari >= 8',
      'ios >= 8',
      'android >= 4'
    ]
  })]))
  .pipe(gulp.dest('dist'));
});