使用 gulp + gulp-postcss 进行 css 代码预编译,需求如下:
1.源文件为 .scss;
2.编译为 .css + .map;
3.期间会用到 precss 插件,以支持 sass 语法
gulpfile 代码如下:
/* 前面插件调用的语句略过 */
gulp.task('postcss', function () {
var processors = [
csswring,
precss,
autoprefixer({
browsers:['last 2 version']
})
];
return gulp.src('./src/scss/index.scss')
.pipe($.postcss(processors))
.pipe($.sourcemaps.init({loadMaps: true}))
.on('error', $.util.log)
.pipe($.sourcemaps.write('.', {
includeContent: false,
sourceRoot: '../src/scss'
}))
.pipe(gulp.dest('dist/css'));
});
出现如下问题:
1.源文件为 scss 后缀名时,编译出来的文件也是 scss 后缀名;
2.使用 gulp-rename 对输出文件进行改名的话,sourcemaps 输出不正确。