我有以下gulp任务:
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer');
gulp.src('html/css/sass/*.scss')
.pipe(sass({
style: 'compressed',
loadPath: 'plugin/css/sass',
sourcemap: true,
sourcemapPath: '/css/sass',
container : 'local_sass'
}))
.pipe(autoprefixer())
.pipe(gulp.dest('html/css'));
我遇到的问题是SASS编译器正在生成源图并添加源图注释,但随后autoprefixer删除注释(我不认为它正在更新源图)。
我已经尝试删除autoprefixer并且它工作正常,但是当我把它放回去时,他们的评论被删除了。我还尝试添加{ map: true }
,但每个源地图的名称都只有to.css.map
。我还尝试添加from
和to
,但我不知道如何告诉它当前的文件名,因此它总是写入相同的文件名。
如何让autoprefixer合作并更新源图?我需要使用另一个插件吗?
的软件包:
"gulp": "~3.8.6",
"gulp-autoprefixer": "~0.0.8",
"gulp-ruby-sass": "~0.7.0",
答案 0 :(得分:6)
如果切换到gulp-sass
,则可以使用gulp-sourcemaps。 gulp-sass
和gulp-autoprefixer
都支持gulp源图。
实施看起来像:
var gulp = require('gulp');
var gulpSass = require('gulp-sass');
var gulpAutoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('javascript', function() {
gulp.src('src/**/*.scss')
.pipe(sourcemaps.init())
.pipe(gulpSass())
.pipe(gulpAutoprefixer())
.pipe(sourcemaps.write('../maps'))
.pipe(gulp.dest('dist'));
});
哪会将.map文件写入maps目录。
注意:从源.scss到目标.css的所有操作都必须位于sourcemaps.init()
和sourcemaps.write()
之间的流中。这包括gulp-uglify
之类的任何缩小版,也是supports gulp-sourcemaps
。
答案 1 :(得分:0)
我为enable source map support for autoprefixer with gulp创建了一个小gulp插件:
var through = require('through2');
var prefix = require('autoprefixer');
var applySourceMap = require('vinyl-sourcemaps-apply');
module.exports = function(browsers, options) {
options = options || {};
return through.obj(function(file, enc, cb) {
if(file.isStream()) {
throw new Error('Streams not supported');
}
if(!file.isNull()) {
if(file.sourceMap) {
options.map = {
annotation: false
};
options.to = options.from = file.relative;
}
var contents = file.contents.toString();
var result = prefix(browsers).process(contents, options);
contents = result.css;
file.contents = new Buffer(contents);
if(file.sourceMap) {
applySourceMap(file, result.map.toString());
}
}
this.push(file);
cb();
});
};
它正在使用gulp-sourcemaps,因此支持gulp-sourcemaps
的任何gulp插件都可以在流管道中使用:
var sourcemaps = require('gulp-sourcemaps');
var concat = require('gulp-concat'); // Supports gulp-sourcemaps
var prefixer = require('./gulp-autoprefixer-map.js');
gulp.task('css', [], function() {
gulp.src('src/**/*.css')
.pipe(sourcemaps.init())
.pipe(concat('app.css'))
.pipe(prefixer())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('dest/'))
});
不幸的是,SASS还没有支持,但是也许有人可以使用上面的方法来修改插件并更新这个答案。