Gulp minify-css 仅用于分发

Question

如何将 LESS 生成的 CSS 缩小到 'dist' 文件夹？当然，所有 gulp 插件都已正确安装。除了缩小 CSS 之外，一切正常。这是我的代码：

gulp.task('styles', function () {
    return gulp.src('app/less/*.less')
            .pipe($.less())
            .pipe(gulp.dest('.tmp/styles'));
            .pipe(minifyCSS({keepBreaks:false}))
            .pipe(gulp.dest('dist/styles'));
});

如果我将 .pipe(minifyCSS({keepBreaks:false})) 移到上方一行，它就会起作用。但是我只需要在 dist forlder 中压缩 CSS。

感谢您的建议。

Answer 1

这可能不是最好的方法，但我使用了两个不同的 gulp 任务。一个任务将 CSS 编译到我的构建目录中，然后另一个任务获取该输出并将其缩小到我的 dist 目录中。使用任务依赖性确保文件在 minify 任务运行之前构建。

gulp.task('styles', function() {
  return gulp.src(styles)
    .pipe(concat('app.less'))
    .pipe(gulp.dest('./build/styles'))
    .pipe(less())
    .on('error', console.log)
    .pipe(concat('app.css'))
    .pipe(gulp.dest('./build/styles'));
});

gulp.task('styles-dist', ['styles'], function() {
  return gulp.src('build/styles/app.css')
    .pipe(minifycss())
    .pipe(gulp.dest('./dist/styles'));    
});

Gulp minify-css 仅用于分发

Gulp minify-css only for distribution

css

minify

gulp

gulp-less