Question

我一直在麻烦地跑步和缩小。有时候缩小任务在sass任务完成之前开始。

当我单独运行时，它们工作正常。

这是我的gulp档案......

/// <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("default", ["clean", "sass", "react", "css"]);

他们没有，来自gulp.task documentation：

注意：任务将并行运行（一次性完成），因此不要假设任务将按顺序开始/结束。

有很多方法可以解决这个问题，这里应该有一些问题。

您可以使用run-sequence，使用具有系列和并行功能的gulp4.0（但在技术上仍然处于测试阶段），或者根据'sass'和'css'做一些像'react'任务一样的任务任务完成了。

所以试试：

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

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

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

现在只需

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

将以正确的顺序将它们关闭。

虽然我认为'干净'并不一定要先跑。 run-sequence确实有助于使事情的顺序更加明显。如果可以，我建议你查看gulp4。

无法通过捆绑和缩小设置gulp sass

1 个答案: