バンドルとミニ化でgulp sassを設定できません

Question

私は悲鳴を上げながら一緒に汗を流しています。いくつかの時間は、ミニタスクは、サスのタスクが終了する前に開始されます。

私は別々に動作させると正常に動作します。ここで

私の一気ファイルがある

...

あなたは、これらのタスクは、直列に実行されていると仮定されているように見えます

/// <binding /> 
"use strict"; 

var gulp = require("gulp"), 
    concat = require("gulp-concat"), 
    cssmin = require("gulp-cssmin"), 
    merge = require("merge-stream"), 
    del = require("del"), 
    bundleconfig = require("./bundleconfig.json"), 
    runSequence = require('run-sequence'); 

var sass = require('gulp-sass'); 

var browserify = require('browserify'); 
var babelify = require('babelify'); 
var source = require('vinyl-source-stream'); 

var webroot = "./wwwroot/"; 
var paths = { 
    scss: webroot + "sass/**/*.scss", 
    scssDest: webroot + "css/" 
}; 

// 1. react 
gulp.task('react', function() { 
    return browserify({ entries: './wwwroot/clientapp/root', extensions: ['.jsx', '.js'], debug: true }) 
     .transform('babelify', { presets: ['es2015', 'react'] }) 
     .bundle() 
     .pipe(source('index.js')) 
     .pipe(gulp.dest('./wwwroot/')); 
}); 

// 2. sass 
gulp.task('compile:sass', function() { 
    gulp.src(paths.scss) 
     .pipe(sass()) 
     .pipe(gulp.dest(paths.scssDest)); 
}); 
gulp.task("sass", ["compile:sass"]); 

function getBundles(regexPattern) { 
    return bundleconfig.filter(function (bundle) { 
     return regexPattern.test(bundle.outputFileName); 
    }); 
} 
gulp.task("css", function() { 
    var tasks = getBundles(/\.css$/).map(function (bundle) { 
     return gulp.src(bundle.inputFiles, { base: "." }) 
      .pipe(concat(bundle.outputFileName)) 
      .pipe(cssmin()) 
      .pipe(gulp.dest(".")); 
    }); 
    return merge(tasks); 
}); 

gulp.task("clean", function() { 
    return del(['wwwroot/css/*', 'wwwroot/index.js']); 
}); 

gulp.task("default", ["clean", "sass", "react", "css"]); 

Answer 1

：gulp.task documentationから、

gulp.task("default", ["clean", "sass", "react", "css"]); 

そうではない。

注：タスクは並行して（一度に）実行されるため、タスクが順番に開始/終了すると想定しないでください。

これを修正するにはいくつかの方法がありますが、ここではいくつか質問があります。

run-sequenceを使用して、シリーズ機能とパラレル機能を持​​つgulp4.0を使用することができます（技術的にはベータ版です）。または、終了した 'sass'と 'css'タスクに応じて '反応'タスクのようなタスクを行います。 。

ので、試してみてください。単に今

gulp.task('react', ['css'], function() { ... 

gulp.task("css", ['sass'], function() { ... 

gulp.task('compile:sass', ['clean'], function() { ... 

と

gulp.task("default", ["react"]); 

正しい順序でそれらをオフに解雇されます

。

「クリーン」は必ずしも最初に実行する必要はありません。実行順序は物事の順序をはるかに明確にするのに役立ちます。もし私がgulp4を調べることをお勧めします。