使用当前Gulp设置生成源地图文件时出现的问题 [英] Problems generating source map files with current Gulp setup

问题描述

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

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

我遇到的问题是

1. 我不得不禁用开发中的autoprefixer，因为生成的源映射无效，因为autoprefixer在源映射生成之后修改原始的 CSS 文件。为了补偿，我添加了mixins，在开发期间添加了供应商前缀，我必须禁用这些开发，并为生产环境启用autoprefixer。


2. 我无法生成缩小CSS文件，如果我想要源地图。


3. 虽然我设置了LiveReload和相关的浏览器插件，但我无法让CSS在我进行更改时自动注入到页面中。

如果任何人可以帮助我构建我的gulp file.js更高效和更有效地工作，我会很感激。 >

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

解决方案

我必须禁用开发中的自动映射器，因为正在生成的源映射

文档 https://www.npmjs.com/package/gulp-autoprefixer 描述如何使用带有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创建一个新的源映射。因此，您应该首先加载较少编译器生成的源图，请参见 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的文档描述了如何使用clean-css和autoprefix插件在 https://github.com/plus3network/gulp-less#plugins 。注意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.

解决方案

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

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设置生成源地图文件时出现的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！