如何使用 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

我认为如果不安装 any 额外的 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 文件。

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

How to use gulp-clean-css to write a new -min.css file instead of the default of overwriting the existing css source file?

css

minify

node.js

gulp

gulp-clean-css