为多个主 scss 文件创建 CSS 源映射答案

【问题标题】：Create CSS sourcemaps for multiple master scss files为多个主 scss 文件创建 CSS 源映射
【发布时间】：2017-08-01 01:07:12
【问题描述】：

如何将 CSS 处理为单独通过管道传输的源映射文件，同时保持文件名 + .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 文件创建一个源映射。这就是我所拥有的，但它只生成一个 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');

【问题讨论】：

标签： node.js sass gulp gulp-sass gulp-sourcemaps

【解决方案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(/\/\*![\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);

【讨论】：