Edited at

gulpfile.jsの書き方確認。改

先日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ができてないとわかった時は焦りました・・・

こうして学んでいくんだなぁ・・・。