css - 如何使用 gulp-clean-css 编写一个新的 -min.css 文件而不是默认覆盖现有的 css 源文件？

Question

如何使用 gulp-clean-css 编写一个新的 -min.css 文件而不是默认覆盖现有的 CSS 源文件？

目前，我有这条线可以缩小文件。但是，它会用缩小版本覆盖原始版本。我希望它在原始文件基名的末尾创建一个扩展名为 -min.css 的新文件。

src(filePath).pipe(minifyCSS()).pipe(dest('./css/'));

我知道 npm 存储库中有一个 gulp-copy 我可以使用。我想知道是否有任何其他方法可以做到这一点。

谢谢

Answer 1

我认为如果不安装 任何 额外的 npm 包是不可能的，尽管考虑到 NodeJS 的性质，我认为这不会被认为是不合理的需要一个。

实现此目的的一种可能方法(无需 gulp-copy)是使用 gulp-rename和 rename 命令:

gulp.src(config.css)

    // Output the file before cleaning
    .pipe(gulp.dest(config.css))

    // Clean the file
    .pipe(cleanCss())

    // Rename with a .min suffix (e.g. app.css -> app.min.css)
    .pipe(rename({ suffix: ".min" }))

    // Output the minified CSS file
    .pipe(gulp.dest(config.css));

这将生成两个文件 - 未缩小的原始 .css 文件和缩小的 .min.css 文件。