使用当前 Gulp 设置生成源映射文件时出现问题

Question

我在我的项目中设置了gulpfile.js。它大部分工作都很好，除了在生成源映射时，特别是对于它编译为 CSS 的 LESS 文件。

我整理了一个gist，其中包含我的 gulp 设置中的所有文件。请注意，除了 gulp file.js 本身之外，所有其他文件都位于名为 tasks 的目录中。

我遇到的问题是

1. 我不得不在开发中禁用自动前缀，因为生成的源映射是无效的，因为自动前缀在源映射生成后修改了原始的CSS 文件。作为补偿，我添加了在开发过程中添加供应商前缀的 mixin，我必须禁用这些以进行开发并为生产环境启用自动前缀。
2. 如果我想要源映射，我根本无法生成缩小的 CSS 文件。缩小会破坏源地图。
3. 虽然我设置了 LiveReload 和相关的浏览器插件，但我无法在进行更改时让 CSS 自动注入到页面中。

如果有人可以帮助我构建我的 gulp file.js 以更高效地工作，我将不胜感激。

同样，我的gulpfile.js 和相关任务都在这个gist 中。

Answer 1

我不得不在开发中禁用自动前缀，因为正在生成源映射

https://www.npmjs.com/package/gulp-autoprefixer 的文档描述了如何将 autoprefixer 与 gulp-sourcemaps 一起使用：

gulp.task('default', function () {
    return gulp.src('src/**/*.css')
        .pipe(sourcemaps.init())
        .pipe(autoprefixer())
        .pipe(concat('all.css'))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('dist'));
});

以上为 all.css 创建了一个新的源映射。所以应该先加载less编译器生成的sourcemap，见https://github.com/floridoo/gulp-sourcemaps#load-existing-source-maps

gulp-minify-css 的文档没有描述这种用法，但您可以这样做：

gulp.task('minify-css', function() {
  gulp.src('./static/css/*.css')
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(minifyCSS({keepBreaks:true}))
    .pipe(sourcemaps.write()) 
    .pipe(gulp.dest('./dist/'))
});

请注意，在大多数情况下，您只会缩小生产代码。具有源映射的开发代码不应该被缩小。

自第 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