Gulp + source maps (multiple output files)

gulp, gulp-less

Solution

This task will take multiple files, do stuff to them, and output them along with source maps.

It will include the source code within the maps files by default, so you don't have to distribute the source code files too. This can be turned off by setting the `includeContent` option to `false`. See the gulp-sourcemaps NPM page for more source map options.

gulpfile.js:

var gulp = require("gulp");
var plugins = require("gulp-load-plugins")();

gulp.task("test-multiple", function() {
    return gulp.src("src/*.scss")
            .pipe(plugins.sourcemaps.init())
            .pipe(plugins.sass())
            .pipe(plugins.autoprefixer())
            .pipe(plugins.sourcemaps.write("./"))
            .pipe(gulp.dest("result"));
});

package.json

"gulp": "~3.8.6",
"gulp-load-plugins": "~0.5.3",
"gulp-sass": "~0.7.2",
"gulp-autoprefixer": "~0.0.8",
"gulp-sourcemaps": "~1.1.0"

The `src` directory:

first.scss
second.scss

The `result` directory after running the `test-multiple` task:

first.css
first.css.map  // includes first.scss
second.css
second.css.map  // includes second.scss

Problem

I just started playing with gulp, and it's very fast and easy to use but it seems to have a critical flaw: what do you do when a task needs to output more than one type of file? For example, gulp-less says it doesn't even support the `sourceMapFilename` option. I don't want my source map embedded in my CSS file. Am I hooped? Should I just go back to using Grunt, or is there a way to deal with this?

Original source