我如何将两个任务合二为一

时间:2017-10-22 15:12:12

标签: npm sass gulp postcss

我有第一项任务:

gulp.task( 'sass', function() {
    gulp.src('src/sass/**/*.+(sass|scss)')
        .pipe( sass({
                outputStyle:'expanded'
            }).on( 'error', notify.onError(
            {
                message: "<%= error.message %>",
                title  : "Sass mistake!"
            } ) )
        )
        .pipe(gulp.dest('src/css'));
});

第二名:

gulp.task('optimize:css', ['sass'], function () {
    setTimeout(function () {
        gulp.src('src/css/styles.css')
            .pipe(
                postcss([
                    autoprefix({
                        browsers:['>2%']
                   }),
                   stylelint(config),
                   stylefmt(config)
                ])
            )
            .pipe(gulp.dest('dev/assets/css'))
            .pipe(cssmin())
            .pipe(rename({suffix: '.min'}))
            .pipe(gulp.dest('dev/assets/css'));
    },1000)
});

在第二个任务中,我使用setTimeout,因为如果我在没有它的情况下运行optimize:css,任务将在异步和优化中执行:css&#39;不会给我正确的结果

有没有办法使用一个任务而不是两个,没有超时,我会得到相同的结果。

1 个答案:

答案 0 :(得分:0)

您可以在Gulp documentation中找到任务依赖关系定义的示例。

在你的情况下,它看起来像这样:

// Notice "cb" argument here
gulp.task('sass', function (cb) {
    gulp.src('src/sass/**/*.+(sass|scss)')
        .pipe(sass({
                outputStyle: 'expanded'
            }).on('error', notify.onError(
            {
                message: "<%= error.message %>",
                title: "Sass mistake!"
            }))
        )
        .pipe(gulp.dest('src/css'))
        // And a fact that it is called at the end of the task
        .on('end', cb);
});

gulp.task('optimize:css', ['sass'], function () {
    gulp.src('src/css/styles.css')
        .pipe(
            postcss([
                autoprefix({
                    browsers: ['>2%']
                }),
                stylelint(config),
                stylefmt(config)
            ])
        )
        .pipe(gulp.dest('dev/assets/css'))
        .pipe(cssmin())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('dev/assets/css'));
});