使用 Gulp 缩小原始 CSS 和 RTL CSS答案

【问题标题】：Minifying both original and RTL CSS with Gulp使用 Gulp 缩小原始 CSS 和 RTL CSS
【发布时间】：2017-09-28 23:10:56
【问题描述】：

我需要使用 Gulp 输出原始 CSS 和生成的 RTL 版本的缩小版本。但是，由于这些 CSS 最初是从 SASS 编译的，因此我还希望尽可能保留源映射。

这是在缩小之前使用gulp-rtlcss 的任务：

gulp.task("sass", function() {
    return gulp.src("scss/style.scss")
        .pipe(sourcemaps.init())
        // sass and autoprefixer here
        .pipe(gulp.dest("css"))
        .pipe(rtlcss())
        .pipe(rename({ suffix: "-rtl" }))
        .pipe(gulp.dest("css"))
});

这些代码输出：

style.css
style-rtl.css

我想要实现的是输出两者的缩小版，

style.min.css
style-rtl.min.css

我怀疑这只能在一个流中完成。有什么想法吗？

【问题讨论】：

标签： css sass gulp

【解决方案1】：

是的，它可以在单个流中完成。

首先我不了解您的代码块：我不知道您是如何设置 rtlcss() 变量的。我相信 rtlcss 仅用于将 ltr 样式转换为 rtl。要缩小样式表，您可以使用minifyCSS = require('gulp-clean-css');。然后在您的管道中添加.pipe(rename({suffix: '.min'}))。

额外信息：

有时您可能还想在管道流中包含/排除 rtl 文件 我已经使用 gulp 包 gulp-filter 在单个流中与 RTL 或 LTR（常规）样式表一起工作。您将首先定义一个过滤器，如下所示 const filterRTL = filter(["**/*.css", "**/!*-rtl.css"], {restore: true});

filterRTL 将删除流中的所有 RTL 文件，您可以按照自己的方式使用 LTR 样式。

gulp.task('minify', function(){
    gulp.src([unminified + "**/*.css", unminified + "*.css"])
    // .pipe(filterRTL)
    // .pipe(filterRTL2)
    .pipe(minifyCSS())
    .pipe(rename({suffix: '.min'}))
    .pipe(rename(function(opt) {
        opt.basename = opt.basename.replace("-rtl.min", ".min-rtl");
        return opt;
    }))
    .pipe(gulp.dest(minified));
});

在上面的 sn-p 中，我首先在没有 RTL 文件的情况下测试缩小，然后我将过滤器注释掉。

您还可以按任何方式重命名： 请注意代码块中的内联重命名功能。这会将mystyle-rtl.min.css 重命名为mystyle.min-rtl.css。我知道命名约定很好，但我没有选择它。 :)

【讨论】：