Question

我在我的项目中设置了gulpfile.js。除了生成源映射之外，它的工作效果非常好，特别是对于它编译为LESS的{{1}}文件。

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

我遇到的问题是

我不得不在开发中禁用autoprefixer，因为生成源映射后，autoprefixer修改了原始tasks文件，因此生成的源映射无效。为了补偿，我添加了在开发过程中添加供应商前缀的mixins，我必须禁用它们进行开发并为生产环境启用autoprefixer。
如果我想要源地图，我根本无法生成缩小的CSS文件。缩小打破了源地图。
虽然我已经设置了LiveReload以及相关的浏览器插件，但是当我进行更改时，我无法将CSS自动注入页面。

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

同样，我的CSS和相关任务都在此gist。

Answer 1

我不得不在开发中禁用autoprefixer，因为正在生成的源地图

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编译器生成的源映射，请参阅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的代码。

在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源的autoprefixed和minified CSS，并将CSS源图写入./public/css/maps

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

1 个答案: