如何覆盖 GulpJS 中的输出文件？答案

【问题标题】：How to overwrite the output file in GulpJS?如何覆盖 GulpJS 中的输出文件？
【发布时间】：2018-08-20 07:29:59
【问题描述】：

我正在使用 GulpJS 将 LESS 和 SASS 文件编译成一个 CSS 文件。我成功地将文件合并为一个，但是，当我编辑任何 LESS/SASS 文件并再次编译时，它并没有覆盖 style.css，而是不断地复制旧元素。如果less/sass上有更新，有没有办法覆盖输出文件？

这是我在 gulp.js 中的代码：

var gulp = require('gulp');
var sass = require('gulp-sass');
var less = require('gulp-less');
var concat = require('gulp-concat');
var merge = require('merge-stream');
var bower = require('bower');

gulp.task('default', function () {

    var lessStream = gulp.src('./src/style.less')
        .pipe(less())
        .pipe(concat('style.less'));

    var scssStream = gulp.src('./src/style.sass')
        .pipe(sass())
        .pipe(concat('style.sass'));

    var cssStream = gulp.src('assets/dist/style.css', {
            base: './'
        })
        .pipe(concat('style.css'));

    var mergedStream = merge(lessStream, scssStream, cssStream)
        .pipe(concat('style.css'))
        .pipe(gulp.dest('assets/dist/'));

    return mergedStream;
    gulp.start('bower');
});

gulp.task('bower', () => {
    return gulp.src('assets/dist/style.css')
        .pipe(wiredep())
        .pipe(gulp.dest('assets/dist/'));
})

【问题讨论】：

什么版本的 gulp-less？看起来它是 4.0 的已知错误 github.com/stevelacy/gulp-less/issues/283
嗨，我正在使用 gulp-less 的 4.0 版，但似乎 CSS 反射没有问题，它生成得很好。我只是不知道用哪种方式覆盖输出文件...
你可以试试3.5版本吗？
我怀疑你的问题是你把concat everywhere （例如，而不是创建一个新的“style.css”，你似乎将新的 CSS 结果连接到已经存在的“style.css”）。 IE。再次查看您的脚本，并确定其中的每个 concat 是否真的有意义。

标签： sass gulp less overwrite preprocessor

【解决方案1】：

我认为问题出在这部分

var cssStream = gulp.src('assets/dist/style.css', {
        base: './'
    })
    .pipe(concat('style.css'));

var mergedStream = merge(lessStream, scssStream, cssStream)
    .pipe(concat('style.css'))
    .pipe(gulp.dest('assets/dist/'));

您正在获取现有的 assets/dist/style.css，将其与所有其他文件连接起来，然后将其保存在 assets/dist/style.css 中。因此，下次运行该过程时，您将获取 style.css（以及它已经拥有的所有内容）并将其与其他文件连接起来。

如果 style.css 只是来自 less 和 sass 文件的输出，我不会抓取它。

【讨论】：