使用当前Gulp设置生成源地图文件时出现的问题

问题描述

限时删除！！

我在我的项目中设置了 gulpfile.js 。除了生成源映射，特别是对于 LESS 文件，它编译为 CSS 。

我整理了一个。

解决方案

文档描述如何使用带有gulp-sourcemaps的自动转码器： / p>

  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创建一个新的源映射。因此，您应该首先加载较少编译器生成的源图，请参见

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允许您使用这些插件（编程）另见

gulp-less的文档描述了如何使用clean-css和autoprefix插件在。注意gulp-minify-css也使用了clean-css的代码。

gulp-less和gulp-sourcemaps href =https://github.com/plus3network/gulp-less#source-maps =nofollow> https://github.com/plus3network/gulp-less#source-maps p>

所以你应该能够使用：

  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 （{
 plugins：[autoprefix，cleancss] 
}））
 .pipe（sourcemaps.write（'./ maps'））
 .pipe（gulp.dest ./public/css'））; 
 

上面应该生成你的Less源的自动前缀和缩小的CSS，CSS sourcemaps写入./ public / css / maps

I have set up a gulpfile.js in my project. It's working pretty nicely mostly, except when it comes to generating source maps, especially for the LESS files it compiles to CSS.

I have put together a gist which contains all the files in my gulp setup. Please note that other than the gulp file.js itself, all the other files are inside a directory called tasks.

The problems I am having are that

1. I had to disable the autoprefixer in development because the source maps that were being generated were invalid as the autoprefixer modified the original CSS file after the source maps were generated. To compensate, I have added mixins that add the vendor prefixes during development, and I have to disable those for development and enable the autoprefixer for the production environment.
2. I am unable to generate a minified CSS file at all if I want source maps. The minification breaks the source maps.
3. Although I have LiveReload set up, and the associated browser plugins, I cannot get the CSS to get auto-injected into the page as I am making changes.

If anyone can help me structure my gulp file.js to work more efficiently and more effectively, I would appreciate it.

Again, my gulpfile.js and associated tasks are in this gist.

解决方案

The docs at https://www.npmjs.com/package/gulp-autoprefixer describe how to use the autoprefixer with 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'));
});

The above create a new source map for all.css. So you should load the sourcemap generated by the less compiler first, see https://github.com/floridoo/gulp-sourcemaps#load-existing-source-maps

The docs of gulp-minify-css do not describe such an usage, but possible you can do:

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/'))
});

Notice that in most cases you minify only your code for production. Development code, which has source maps should not have to be minified.

Since version 2 of Less you can use plugins for the Less compiler. Also gulp-less allows you to use these plugins (programmatic) see also http://lesscss.org/usage/#plugins-using-a-plugin-in-code

Documentation of gulp-less describes how to use the clean-css and autoprefix plugin at https://github.com/plus3network/gulp-less#plugins. Notice that gulp-minify-css is leveraging clean-css's code too.

Also the usage of gulp-less with gulp-sourcemaps to create sourcemaps has been described at https://github.com/plus3network/gulp-less#source-maps

So you should be able to use:

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'));

The above should generate the autoprefixed and minified CSS of your Less source, with CSS sourcemaps written into ./public/css/maps

这篇关于使用当前Gulp设置生成源地图文件时出现的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..