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

Question

我在我的项目中设置了一个gulpfile.js。它在大多数情况下工作得很好，除了生成源映射时，特别是对于它编译为 CSS.

的 LESS 文件。

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

的目录中

我遇到的问题是

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

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

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

Answer 1

I had to disable the autoprefixer in development because the source maps that were being generated

https://www.npmjs.com/package/gulp-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/'))
});

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

从 Less 的第 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 的代码。

此外，gulp-less 与 gulp-sourcemaps 一起创建 sourcemaps 的用法已在 https://github.com/plus3network/gulp-less#source-maps

中进行了描述

所以你应该可以使用：

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 sourcemaps 写入 ./public/css/maps

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

Problems generating source map files with current Gulp setup

css

minify

less

source-maps

gulp