用Gulp连接并缩小后删除生成的CSS文件

Question

我有一些gulp任务正在生成图像中显示的文件：

我要实现的目标是将这3个文件合并为一个文件并缩小结果。

这是我的gulpfile的摘要：

gulp.task('clean-css', function (done) {
    gulp
        .src(publicPath + 'css/*.css')
        .pipe(clean())
        .on('error', log);
    done();
});

gulp.task('css-deps', ['sass-min'], function(done){
    gulp.src(resourcesPath + 'css/*.css')
        .pipe(concat('deps.css'))
        .pipe(gulp.dest(publicPath + '/css'))
        .on('error', log);
    done();
});

gulp.task('css-deps-min', function(done){

    gulp.src(publicPath + 'css/*.css')
        .pipe(concat('styles.min.css'))
        .pipe(cleanCss())
        .pipe(filesize())
        .pipe(gulp.dest(publicPath + 'css'))
        .on('error', log)
    ;

    done();
});

gulp.task('css', function(done) {
    sequence('sass-min', 'css-deps', 'css-deps-min', 'clean-css', done);
});

Gulp的输出：

docker@cli:/var/www$ gulp clean && gulp css 
[05:25:01] Using gulpfile /var/www/gulpfile.js
[05:25:01] Starting 'clean'...
[05:25:01] Finished 'clean' after 6.61 ms
[05:25:03] Using gulpfile /var/www/gulpfile.js
[05:25:03] Starting 'css'...
[05:25:03] Starting 'sass-min'...
[05:25:03] Finished 'sass-min' after 7.36 ms
[05:25:03] Starting 'css-deps'...
[05:25:03] Finished 'css-deps' after 1.35 ms
[05:25:03] Starting 'css-deps-min'...
[05:25:03] Finished 'css-deps-min' after 1.05 ms
[05:25:03] Starting 'clean-css'...
[05:25:03] Finished 'clean-css' after 547 μs
[05:25:03] Finished 'css' after 14 ms
[05:25:04] Size deps.css : 4.96 kB
[05:25:04] Size app.css : 486 B
[05:25:04] Size react-components.css : 0 B
[05:25:04] Size app.css : 486 B
[05:25:04] Size react-components.css : 0 B

我对Gulp还是很陌生，所以有些事情我不太了解，例如为什么这些任务不能合并为一个任务。无需提及我的代码并没有产生预期的结果。

我希望对此有所帮助。谢谢！

Answer 1

不确定这是否值得回答“ answer”，但我仍然需要达到50名才能发表评论。

任何人，您都可以签出discussion来查看是否可以相应地简化并执行gulp任务。

从本质上讲，您首先将编译sass，然后运行minify任务，最后将文件并置在一起。

这样的事情：（假设您在sass-min中具有适当的缩小功能）

// This kicks everything off in one go.
gulp.task('css-task', ['sass-min'], function(done){
    gulp.src(resourcesPath + 'css/*.css')
        .pipe(clean())
        .pipe(cleanCss())
        .pipe(filesize())
        .pipe(concat('styles.min.css'))
        .pipe(gulp.dest(publicPath + '/css'))
        .on('error', log);
    done();
});

gulp.task('css', function(done) {
    sequence('css-task', done);
});

Answer 2

gulpfile的问题在于，尽管使用了gulp-senquence，但任务并未按顺序执行。我在gulp-sequence文档中找到了答案：缺少return关键字。请参见此处的示例https://www.npmjs.com/package/run-sequence#usage。