时间戳

首页 > 解决方案 > 如何使用 gulp-clean-css 编写新的 -min.css 文件，而不是默认覆盖现有的 css 源文件？

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

问题描述

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

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

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

我知道我可以使用的 npm repo 中有一个 gulp-copy。我想知道是否还有其他方法可以做到这一点。

谢谢

标签： cssnode.jsgulpminifygulp-clean-css

解决方案

我不相信如果不安装任何额外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文件。

推荐阅读