使用 Gulp 连接和缩小后删除生成的 CSS 文件答案

【问题标题】：Remove generated CSS files after concatenating and minifying with Gulp使用 Gulp 连接和缩小后删除生成的 CSS 文件
【发布时间】：2019-01-14 03:25:41
【问题描述】：

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

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

这是我的 gulpfile 的 sn-p：

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 很陌生，所以有些事情我不太了解，例如为什么这些任务不能合并为一个。无需提及我的代码没有产生预期的结果。

我很感激这方面的一些帮助。谢谢！

【问题讨论】：

你的 gulp 版本是什么？你得到什么结果/错误？
在您的“css”任务中，您首先调用“sass-min”，然后再调用“css-deps”，它本身再次调用“sass-min”。 'clean-css' 会删除 publicPath + 'css/*.css' 目录中的文件，这似乎是你刚刚在 'css-deps-min' 任务中创建它们的位置。您还有两个版本：publicPath + '/css' 和 publicPath + 'css'。只有其中一个是正确的，没有看到你的 publicPath 变量我不能说哪个是错的。
docker@cli:/var/www$ gulp -v [04:55:17] CLI 版本 2.0.1 [04:55:17] 本地版本 3.9.1 docker@cli:/var /www$
var resourcesPath = 'resources/assets/'; var publicPath = 'public/'; var inputStylesPath = '资源/资产/sass'; var outputStylesPath = 'public/css'; var tmpStylesPath = '/tmp'; var inputJSPath = '资源/资产/js'; var outputJSPath = 'public/js';
问题是我无法删除生成的css，只留下我想要的。这就是我想要弄清楚的。除此之外，node cli 没有显示任何错误。

标签： javascript node.js gulp mean-stack

【解决方案1】：

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

【讨论】：