使用Gulp缩小原始CSS和RTL CSS

Question

我需要输出的原始CSS和生成的RTL版本使用Gulp的缩小版本。但是，由于这些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

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

Answer 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));

})；

在上面的代码片段中，我首先测试了没有RTL文件的缩小，然后我注释掉了过滤器。

重命名：请注意代码块中的内联重命名函数( inline function )。这会将mystyle-rtl.min.css重命名为mystyle.min-rtl.css。我知道命名约定很棒，但我并没有选择它。:)