Node.js 为多个主scss文件创建CSS源映射

我如何处理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(/\/\*![\s\S]*?\*\//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');

---

我想我知道我在做什么了：我处理了两次。此外，使用

concat（）

和

autoprixer（）

也是多余的（这也是前者的一个问题）。这就是我最终得到的，它应该作为一个非常通用的引导构建脚本：

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(/\/\*![\s\S]*?\*\//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);