gulpfile.jsの書き方確認。改 #gulp

先日sassをコンパイルした際に、gulp-combine-media-queries、メディアクエリをcssの下の方に整えるプラグインを入れていたんですが・・・・
cssを見てみたら整えられてない！なんで！？

先輩に教えていただき、問題解決とアドバイスをいただいたので、共有させていただきます・・・・。

20190401追記：
保存するたびにsassは以下全てコンパイルしてましたが、更新かけたやつだけコンパイルする都合があったのでgulp-changedを入れました。

gulpfile.js


var gulp = require('gulp');
var sass = require('gulp-sass');
var plumber = require('gulp-plumber');
var changed = require('gulp-changed');//20190401追加
var sourcemaps = require('gulp-sourcemaps');
var cmq = require('gulp-combine-media-queries');//@media
var runSequence = require('run-sequence');
var DEST = './css/';//20190401追加

//sass
gulp.task('sass',function(){
    return gulp.src('sass/*.scss')
    .pipe(sourcemaps.init())
    .pipe(plumber())
    .pipe(sass({style : 'expanded'}))
    .pipe(sourcemaps.write())
    .pipe(changed(DEST))
    .pipe(gulp.dest(DEST));
});
//media
gulp.task('cmq',['sass'], function () {
  return gulp.src('css/*.css')
    .pipe(cmq({
      log: false
    }))
    .pipe(gulp.dest('css'));
});
//監視
gulp.task('watch', function () {
    gulp.watch('sass/*.scss', ['cmq']);
});
gulp.task('default', function(callback) {
    runSequence('sass', 'cmq', callback);
});

runSequence

まずコマンドでgulpと叩いた時に実行されるやつ！
新しく追加したこちらのプラグイン
var runSequence = require('run-sequence');
gulpタスクの実行順序を指定できるものです。

defaultタスクに
runSequence('sass', 'cmq', callback);
で、左から順に処理をしてくれます。

gulp.task('default', function(callback) {
    runSequence('sass', 'cmq', callback);
});

function()←の中にcallbackと書かないとエラーになるので忘れずに！

左から順の指定をしてますが、特に順番を気にしないタスクの場合は
runSequence(['sass', 'cmq'], callback);
というように並列化したいタスクは配列で書きます。

return gulp

これがすごい大事だそうで・・・・gulp watchで実行されるやつを修正しました。

gulpfile.js


var gulp = require('gulp');

gulp.task('sass',function() {
    console.log('先にやって欲しい処理');
});
gulp.task('cmq',function() {
    console.log('後にやって欲しい処理');
});

gulp.task('watch', function () {
    gulp.watch('sass/*.scss', ['sass','cmq']);
});

前はこういう書き方だったんですけど、ターミナルみたらどうやらcmqを先に処理し終わってsassを実行してる感じでした。なんだと・・・・

というわけでそれぞれのタスクにreturn gulpをつけてタスクの処理を返す、
さらにメソッドの第2引数を使います。

gulpfile.js


gulp.task('sass',function(){
    return gulp.src('sass/*.scss')
    .pipe(sourcemaps.init())
    .pipe(plumber())
    .pipe(sass({style : 'expanded'}))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('css'));
});

gulp.task('cmq',['sass'], function () {
  return gulp.src('css/*.css')
    .pipe(cmq({
      log: false
    }))
    .pipe(gulp.dest('css'));
});

gulp.task('watch', function () {
    gulp.watch('sass/*.scss', ['cmq']);
});

gulp.task('cmq',['sass'], function () {
これがsassタスクが終わったらcmqタスクを実行、ということになるらしいです。
これはreturnつけて処理を返してるのでちゃんと動きます。

前の記事を書いてる時は処理の順序を気にせず書いていたので、いざcmqができてないとわかった時は焦りました・・・
こうして学んでいくんだなぁ・・・。