gulpで編集中のscssファイルをwatchしてCSScombした話

この記事は2017年9月29日に別ブログで投稿した記事を編集した再掲です。

こんにちは！メゾンマークのフロントエンドエンジニアです！

ネタな記事が増えていたので堅実な記事を書きたいと思い、開発環境を整備した際に書いたコードを紹介します。

目的：watchタスクで監視しているSCSSをCSScombで成形したい。

当初、上記の目的に沿ったコードをWEB上で検索したのですが、gulp で SCSS をコンパイルした CSS に CSScombをかけるものがほとんどでした。また編集している SCSS 自体を CSScomb にかける記事もあったのですが、別途ディレクトリを用意して解決していたので、別の方法があるのではないかと考え作成しました。

今回の開発環境は以下のようになっております。
最低限のタスクのみ書いているので実際に案件で使用する際は追記して使用してください。

• version
  "gulp": "3.9.1"
  "gulp-csscomb": "3.0.8"
  "gulp-debug": "3.1.0"
  "gulp-sass": "3.1.0"
• ディレクトリ構成

project
|--src
|   |--*.app.scss
|   |--*._layout.scss
|   |--*._object.scss
|   |--*._util.scss
|--package.json
|--gulpfile.js

gulp で監視しているファイルに変更を加えて保存し直すと、同じ処理が連続して走り、無限ループに入ってしまいます。

それを回避するために gulp-cached を採用しましたので、まずは下記のコードをご覧ください。

import gulp from 'gulp';
import cached from 'gulp-cached';
import csscomb from 'gulp-csscomb';
import debug from 'gulp-debug';

const src = ['./dev/scss/*.scss', './dev/scss/**/*.scss'];
const dist = './dev/scss/';

gulp.task('comb-init', () => {
  return gulp.src(src)
          .pipe(csscomb())
          .pipe(cached('cache'))
          .pipe(debug({title: 'init: '}))
          .pipe(gulp.dest(dist));
});

gulp.task('comb', () => {
  return gulp.src(src)
          .pipe(cached('cache'))
          .pipe(csscomb())
          .pipe(cached('cache'))
          .pipe(debug({title: 'comb: '}))
          .pipe(gulp.dest(dist));
});

gulp.task('default', ['comb-init'], () => {
  gulp.watch(src, ['comb']);
});

内容としては comb-init タスクで CSScomb をかけたデータを gulp-cached に通し、タスクが終了したのち、*.scss
ファイルを監視します。

変更があるファイルのみ CSScomb にかけて再度 gulp-cached を通すことによって、同じファイルが流れることを防ぎます。

gulp-debug で gulp のタスク内で流れているデータをコンソールに表示しており、 comb-init タスク内で流れたものは [init: ]、comb タスク内で流れたものは [comb: ] という名前で表示します。

gulp を実行した上で、_footer.scss
を編集し保存すると以下のようになります。

$ gulp
[16:38:06] Using gulpfile ~/gulpfile.babel.js
[16:38:06] Starting 'comb-init'...
[16:38:06] init:  src/app.scss
[16:38:06] init:  src/_layout.scss
[16:38:06] init:  src/_object.scss
[16:38:06] init:  src/_util.scss
[16:38:06] init:  4 items
[16:38:06] Finished 'comb-init' after 337 ms
[16:38:06] Starting 'default'...
[16:38:06] Finished 'default' after 29 ms
[16:38:32] Starting 'comb'...
[16:38:32] comb:  dev/scss/layout/_footer.scss
[16:38:32] comb:  1 items
[16:38:32] Finished 'comb' after 41 ms

ログを確認しますと init では全ての*.scss
ファイルが流れており、CSScomb まで流れたものは_footer.scss
のみとなっております。

はい、無限ループもしません！ ←

これでエディタに依存しない自動成形が出来ました。

gulp-cashed は不要な処理を制御することが出来て、開発環境の高速化にも活かせると思いますので是非使ってみてください。
それではまた！