marc tech

株式会社MAISON MARCが運営するブログです。Tech Blogとは名ばかりの、採用・福利厚生の情報や、日々の活動記録(?)からエンジニアのくだらない小話までMAISON MARCに関する情報をお伝えするブログとなっています!興味のある方は是非ご覧になってください。

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

f:id:marctech:20170929121739p:plain


こんにちは!フロントエンドエンジニアのセイです!

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

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

当初、上記の目的に沿ったコードをWEB上で検索したのですが、gulpSCSSコンパイルした CSSCSScomb をかけるものがほとんどでした。また編集している 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-debuggulp のタスク内で流れているデータをコンソールに表示しており、 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 は不要な処理を制御することが出来て、開発環境の高速化にも活かせると思いますので是非使ってみてください。

f:id:marctech:20170929185512p:plain:w80

  それではまた!