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?

Velocipede

Gulp-if might help with this. example – Velocipede

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

Eberly

Does this still work if there are partial .scss files imported via @import into a main .scss file? I would love it if the browser could link back to those partial files that were imported. – Thrashing

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.

Wheatley

I did look through the docs. Where exactly does it say that? Also, your "relevant" ticket discusses inline source maps, which is exactly what I don't want. – Velocipede

Most of the examples through the docs output multiple files. I've added an example. As for the ticket, please read the thread and you'll see why there is no external Source Map support. – Wheatley

Your example looks like it only outputs one file to the dist folder. How's that multiple? In the thread, Contra says it's to avoid disk writes, but after I pointed out the problem with that, he seems to agree with me. – Velocipede

If you read the docs you'll realize dist is a folder: github.com/gulpjs/gulp/blob/master/docs/API.md#gulpdestpath – Wheatley

This should be marked as correct. gulp.src uses globbing to match multiple files. Any file creation, manipulation, or deletion, will be output to the folder specified in gulp.dest. So when uglify creates a source map file, it also goes into gulp.dest. – Vertebra

@JamesKyle: You're saying you can configure gulp-uglify to write out both a .map and a .js file? And what if you want to pass just the .js through some more transforms? – Velocipede

@Mark if you're passing the .js files through more transforms, the source map file likely has to be updated too. You can also use gulp-filter if you don't want that. Still, this answer should be marked correct. – Vertebra

@JamesKyle It's my question; if I don't think this satisfies the requirements I laid out, then I'm not marking it was correct. It's mildly rude and ignores the intent of the question. I'm well aware that .dest can write out multiple files, but it doesn't address how we can deal with transforms that need to generate files of different types, which potentially need to be handled separately. – Velocipede

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

Hydromancy

You're misreading the question. I'm talking about when a single task needs to output two or more separate files. I know I can call .dest as many times as I want; that doesn't help. This is to do with plugin architecture, not basic usage. – Velocipede

Gotcha :) Interested if it makes a difference in practise? – Hydromancy

Source maps are very useful in practice. I'm sure there are many other scenarios where you would want to output two or more files of different types from a single task too; you can't split them into separate tasks otherwise each task has to reparse the input. – Velocipede