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

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

sass gulp

无法通过捆绑和缩小设置gulp sass,sass,gulp,Sass,Gulp,我在一起运行sass和minimation时遇到了麻烦。有时，缩小任务在sass任务完成之前开始当我单独运行时，它们工作得很好这是我的吞咽文件 /// <binding /> "use strict"; var gulp = require("gulp"), concat = require("gulp-concat"), cssmin = require("gulp-cssmin"), merge = require("merge-stream"),

我在一起运行sass和minimation时遇到了麻烦。有时，缩小任务在sass任务完成之前开始

当我单独运行时，它们工作得很好

这是我的吞咽文件

/// <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"]);

//
“严格使用”；
var gulp=需要（“gulp”），
concat=需要（“吞咽concat”），
cssmin=需要（“吞咽cssmin”），
merge=require（“合并流”），
del=要求（“del”），
bundleconfig=require（“./bundleconfig.json”），
runSequence=require（'run-sequence'）；
var sass=需要（'gulp-sass'）；
var browserify=需要（'browserify'）；
var babelify=需要（“babelify”）；
var源=要求（‘乙烯基源流’）；
var webroot=“./wwwroot/”；
变量路径={
scss:webroot+“sass/***.scss”，
scssDest:webroot+“css/”
};
// 1. 反应
吞咽任务（'react'，函数（）{
返回browserify（{entries:'./wwwroot/clientapp/root'，扩展名：['.jsx'，'.js']，调试：true}）
.transform（'babelify'，{预设：['es2015'，'react']}）
.bundle（）
.pipe（源（'index.js'））
.管道（大口目的地（'./wwwroot/'）；
});
// 2. 无礼
gulp.task（'compile:sass'，function（）{
gulp.src（path.scss）
.pipe（sass（））
.管道（大口出口（通道出口））；
});
gulp.task（“sass”，[“compile:sass”]）；
函数getBundles（regexpatern）{
返回bundle配置过滤器（函数（bundle）{
返回regexpatern.test（bundle.outputFileName）；
});
}
吞咽任务（“css”，函数（）{
var tasks=getBundles（/\.css$/）.map（函数（bundle）{
返回gulp.src（bundle.inputFiles，{base:.“}）
.pipe（concat（bundle.outputFileName））
.pipe（cssmin（））
.管道（大口目的地（“.”）；
});
返回合并（任务）；
});
吞咽任务（“清洁”，功能（）{
返回del（['wwwroot/css/*'，'wwwroot/index.js']）；
});
任务（“默认”、“清除”、“sass”、“反应”、“css”）；

看起来您假设这些任务是串联运行的：

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

他们没有，从：

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

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

你可以使用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。