Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
22
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

@cawmate_hitomi

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ができてないとわかった時は焦りました・・・
こうして学んでいくんだなぁ・・・。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
22
Help us understand the problem. What are the problem?