为什么gulp中的sourcemaps没起作用
在一些工作流工具中，gulp算是比较容易上手的了，虽然以前了解过gulp，但真正的实践还是发现不少应用问题，比如这次，为什么应用了gulp-sass/gulp-sourcemaps/gulp-autoprefixer却无法获取到css-scss的映射；
先来介绍一下这几个插件：
gulp-sass：将scss编译成css，常用可配置参数有outputStyle；
plugins.sass({ outputStyle: 'compressed'}).on('error', plugins.sass.logError)gulp-sourcemaps：在scss编译过程中，添加映射关系，可以方便调试；
在文件流中需要两条语句：
plugins.sourcemaps.init()//如果要输出sourcemaps文件的话，可以在write(path)添加路径；plugins.sourcemaps.write()gulp-autoprefixer：根据浏览器兼容，添加浏览器所需要支持的前缀；
plugins.autoprefixer({ browsers: ['>1%'], cascade: false, remove:false})以下是我尝试了两种方式可以输出sourcemaps：
第一种方式：抛弃了gulp-autoprefixer;
gulp.task('scss',function(){ return gulp.src(paths.styles) .pipe(plugins.changed(paths.outSytles)) .pipe(plugins.sourcemaps.init()) .pipe(plugins.sass({ outputStyle: 'compressed' }).on('error', plugins.sass.logError)) //这种写法，autoprefixer不能加载sourcemaps中间，否则生不出map文件； //所以，我把它注释掉，确保能输出sourcemaps； /*.pipe(plugins.autoprefixer({browsers: ['>1%'],
cascade: false,
remove:false
}))/
.pipe(plugins.sourcemaps.write())
.pipe(gulp.dest(paths.outSytles))
.pipe(plugins.livereload());
});第二种方式：编译、map、自动添加前缀功能俱全；
gulp.task('scss',function(){ return gulp.src(paths.styles) .pipe(plugins.changed(paths.outSytles)) .pipe(plugins.sourcemaps.init()) .pipe(plugins.sass({ outputStyle: 'compressed' }).on('error', plugins.sass.logError)) //这一句write()必须有； .pipe(plugins.sourcemaps.write({includeContent: false})) .pipe(plugins.autoprefixer({ browsers: ['>1%'], cascade: false, remove:false })) .pipe(plugins.sourcemaps.write()) .pipe(gulp.dest(paths.outSytles)) .pipe(plugins.livereload());});在gulp-sourcemaps官网上，可以看到支持gulp-autoprefixer放到plugins.sourcemaps.init()和plugins.sourcemaps.write()中间，而且，我看到网上的资料也都是这样写的，所以，这里给少部分人一些提示，如果你有类似的问题，希望能帮到你。
原链接地址；
关键字：gulp, 工作流, pipe, false
版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
