为多个Master SCSS文件创建CSS Sourcemaps

Question

如何处理CSS到通过单独管道的Sourcemap文件，维护文件名 .map附加了？

假设我们有以下内容：

/assets/stylesheets/scss/
    site.scss
    other.scss
    home.scss
/assets/stylesheets/compiled/
    site.css
    other.css
    home.css

我正在寻找的是：

/assets/stylesheets/scss/
    site.scss
    other.scss
    home.scss
/assets/stylesheets/compiled/
    site.css
    site.css.map
    other.css
    other.css.map
    home.css
    home.css.map

我想为使用Gulp的人生产CSS源。唯一的问题是，我不确定如何每CSS文件创建sourcemap。这就是我所拥有的，但它仅产生一个site.css文件：

var gulp = require('gulp'),
    gulpif = require('gulp-if'),
    concat = require('gulp-concat'),
    sass = require('gulp-sass'),
    minify = require('gulp-minifier'),
    autoprefixer = require('gulp-autoprefixer'),
    sourcemaps = require('gulp-sourcemaps');
...
gulp.task('sass', function(){
    return gulp
        .src(config.publicDir + '/stylesheets/scss/*.scss')
        //.pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))
        .pipe(sass({
            includePaths: [config.bootstrapDir + '/assets/stylesheets'],
        }))
        .pipe(gulpif(overrides.disable_minify, minify({
            minify: true,
            collapseWhitespace: true,
            minifyJS: false,
            minifyCSS: true,
            getKeptComment: function(content, filePath){
                var m = content.match(//*![sS]*?*//img);
                return m && m.join('n') + 'n' || '';
            },
        })))
        .pipe(gulp.dest(config.publicDir + '/stylesheets/compiled'))
    ;
});
tasks.push('sass');
...
gulp.task('sourcemaps', function() {
    return gulp
        .src(config.publicDir + '/stylesheets/compiled/*.css')
        .pipe(sass().on('error', sass.logError))
        .pipe(sourcemaps.init())
        .pipe(autoprefixer())
        .pipe(concat('site.css'))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(config.publicDir + '/stylesheets/compiled'))
});
tasks.push('sourcemaps');

Answer 1

我想我弄清楚了自己在做什么：我正在处理两次。另外，使用concat()和autoprixer()是多余的（前者的问题）。因此，这就是我最终得到的，它应该可以作为一个相当普遍的bootstrap构建脚本来工作：

var gulp = require('gulp'),
    gulpif = require('gulp-if'),
    sass = require('gulp-sass'),
    minify = require('gulp-minifier'),
    sourcemaps = require('gulp-sourcemaps');
var tasks = [],
    overrides = {
        disable_watcher: false,
        disable_minify: true,
    },
    config = {
        bootstrapDir: process.cwd()+'/public_html/bootstrap-sass',
        publicDir: process.cwd()+'/public_html/assets',
    };
gulp.task('sass', function(){
    return gulp
        .src(config.publicDir + '/stylesheets/scss/*.scss')
        .pipe(sass({
            includePaths: [config.bootstrapDir + '/assets/stylesheets'],
        }))
        .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))
        .pipe(sourcemaps.write('.'))
        .pipe(gulpif(!overrides.disable_minify, minify({
            minify: true,
            collapseWhitespace: true,
            minifyJS: false,
            minifyCSS: true,
            getKeptComment: function(content, filePath){
                var m = content.match(//*![sS]*?*//img);
                return m && m.join('n') + 'n' || '';
            },
        })))
        .pipe(gulp.dest(config.publicDir + '/stylesheets/compiled'))
    ;
});
tasks.push('sass');
if (!overrides.disable_watcher && tasks.indexOf('sass') !== -1) {
    gulp.task('watch', function(){
        gulp.watch(config.publicDir + '/stylesheets/scss/*.scss', ['sass']);
    });
    tasks.push('watch');
}
gulp.task('default', tasks);