使用当前Gulp设置生成源图文件时出现的问题
我在我的项目中设置了一个gulpfile.js。它大部分工作得很好，除非是生成源代码映射，特别是它编译成CSS的CSS文件。
我已经设置了一个要旨，它包含了我的安装程序中的所有文件。请注意，除了gulp file.js本身之外，所有其他文件都在一个名为tasks的目录中。
我遇到的问题是
- 在开发过程中，我不得不禁用自动修复程序，因为生成的源映射是无效的，因为自动修复程序在生成源映射之后修改了原始的
CSS文件。为了弥补这一点，我在开发期间添加了添加供应商前缀的混合器，并且我必须禁用用于开发的前缀，并为生产环境启用自动修复程序。 - 如果我想要源文件的话，我根本无法生成一个缩小的CSS文件。缩小会破坏源映射。
- 虽然我已经设置了LiveReload和相关的浏览器插件，但我无法让CSS自动注入到页面中，因为我正在进行更改。
如果有人能帮我构建我的file.js，使我的工作效率更高，效率更高，我会很感激。
同样，我的gulpfile.js和相关任务也在这个要旨中。
回答 1
Stack Overflow用户
发布于 2015-01-04 20:51:41
我必须在开发过程中禁用自动修复程序，因为正在生成的源映射。
https://www.npmjs.com/package/gulp-autoprefixer的文档描述了如何将自动修复器与gulp映射一起使用：
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。
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的较少，您可以使用插件为较少的编译器。另外，可以使用这些插件(编程)，也可以参见http://lesscss.org/usage/#plugins-using-a-plugin-in-code。
“无吞咽”的文档描述了如何在https://github.com/plus3network/gulp-less#plugins上使用清洁css和自动修复插件。注意，gulp css也在利用清洁css的代码。
此外，在https://github.com/plus3network/gulp-less#source-maps中还描述了用gulp源代码地图创建源代码映射的用法。
所以你应该能够使用：
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'));以上所述应该会生成您的较少源的自动修复和小型化CSS，并将CSS源地图写入./public/css/map中。
https://stackoverflow.com/questions/27764782
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号