less - 使用less/concat/autoprefixer/minifycss 吞咽源地图？

Question

是否可以生成具有所有这些转换的源映射？

gulp.task('styles', function() {
    return gulp.src(source.styles)
        .pipe(plumber())
        .pipe(gulpif(/\.less$/, plumber().pipe(less({
            strictMath: true,
            strictUnits: true,
        }))))
        .pipe(concat('bundle.css'))
        .pipe(prefixer(['last 2 versions', '> 1%', 'ie 9'], {cascade: false}))
        .pipe(minifyCss())
        .pipe(gulp.dest('public/css'));
});

使用的库：

• 少吞咽
• gulp-if
• 吞咽连接
• gulp-autoprefixer
• gulp-minify-css

我知道less可以生成源映射，我认为 gulp-concat 不支持它们，autoprefixer应该保留它们，而 minify-css/ clean-css似乎没有提及源映射。我运气不好？

Answer 1

今晚我遇到了同样的问题，我仍在努力寻找一个干净的解决方案。然而，我只是设法让一些工作，所以我想我会分享：

注意：我既不使用gulpif也不使用minify

使用gulp-sourcemaps以来gulp-less似乎没有源映射选项（至少目前是这样）。

替换gulp-concat为gulp-concat-sourcemap以保留源映射。

gulp-sourcemaps 当前不支持 Gulp-concat（参见README）。在修复之前，这里有一个补丁版本：https ://github.com/floridoo/gulp-concat/tree/sourcemap_pipe2

gulp.task('less', function () {
  gulp.src(sources.less)
    .pipe(sourcemaps.init())
    .pipe(less())
    .pipe(prefix({ map: true })) 
    .pipe(concat('build.css'))
    .pipe(sourcemaps.write()
    .pipe(gulp.dest(dirs.build + 'assets/css'));
});

Answer 2

从第 2 版开始，您可以使用 Less 编译器的插件。gulp-less 还允许您使用这些插件（程序化），另请参阅http://lesscss.org/usage/#plugins-using-a-plugin-in-code

gulp-less 的文档描述了如何在https://github.com/plus3network/gulp-less#plugins使用 clean-css 和 autoprefix 插件。请注意，gulp-minify-css 也在利用 clean-css 的代码。

在https://github.com/plus3network/gulp-less#source-maps也描述了使用 gulp-less 和 gulp-sourcemaps 来创建源图

所以你应该能够使用：

var LessPluginCleanCSS = require("less-plugin-clean-css"),
    cleancss = new LessPluginCleanCSS({advanced: true});

var LessPluginAutoPrefix = require('less-plugin-autoprefix'),
    autoprefix= new LessPluginAutoPrefix({browsers: ["last 2 versions"]});


gulp.src('./less/**/*.less')
  .pipe(sourcemaps.init())
  .pipe(less({
    plugins: [autoprefix, cleancss]
   }))
  .pipe(sourcemaps.write('./maps'))
  .pipe(gulp.dest('./public/css'));

以上应该生成您的 Less 源的自动前缀和缩小的 CSS，并将 CSS 源映射写入 ./public/css/maps

或者，您可以考虑使用Pleeease 插件Pleeease 可以一次运行多个后处理器，请参阅http://pleeease.io/docs/#features