Create CSS sourcemaps for multiple master scss files

Question

How do I process CSS to sourcemap files piped through individually, maintaining the filename + .map appended to it?

Assuming we have the following:

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

What I'm looking for is this:

/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

I want to produce the CSS sourcemaps for those using Gulp. The only issue is, I'm not sure how to create a sourcemap per CSS file. This is what I have, but it only produces the one site.css file:

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');

score 0 · Answer 1 · answered Mar 11 '17 at 18:18

I think I figured out what I was doing: I was processing it twice. Also, the use of concat() and autoprixer() was superfluous (and a problem in the former). So this is what I ended up with, which should work as a pretty general Bootstrap build script:

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);

Create CSS sourcemaps for multiple master scss files

1 Answers1