Question

我需要使用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

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

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文件的缩小，然后将过滤器注释掉了。

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

使用Gulp缩小原始和RTL CSS

1 个答案: