Gulp + source maps (multiple output files)

Question

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?

Answer 1

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

Answer 2

Gulp supports multiple output files fine. Please read the docs.

Example:

gulp.task('scripts', function () {
  return gulp.src('app/*js')
    .pipe(uglify())
    .pipe(gulp.dest('dist'));
});

This will read in a bunch of JS files, minify them and output them to the dist folder.

As for the gulp-less issue. You could comment on the relevant ticket.

Answer 3

In the docs it shows you how to have multiple output files:

gulp.src('./client/templates/*.jade')  
  .pipe(jade())
  .pipe(gulp.dest('./build/templates'))
  .pipe(minify())`  
  .pipe(gulp.dest('./build/minified_templates'));