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?

[Gulp-if](https://github.com/robrich/gulp-if) might help with this. [example](https://github.com/wearefractal/gulp-coffee/issues/16#issuecomment-35227635) — mpen, Mar 04 '14 at 23:24

score 10 · Accepted Answer · answered Jul 17 '14 at 23:14

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

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. — Megaroeny, Dec 10 '15 at 16:36

Sindre Sorhus · Answer 2 · 2014-02-13T16:33:32.333

-1

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.

edited Feb 13 '14 at 16:33

answered Feb 13 '14 at 10:26

Sindre Sorhus

62,972
39
168
232

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. – mpen Feb 13 '14 at 16:25
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. – Sindre Sorhus Feb 13 '14 at 16:34
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. – mpen Feb 13 '14 at 20:21
1

If you read the docs you'll realize `dist` is a folder: https://github.com/gulpjs/gulp/blob/master/docs/API.md#gulpdestpath – Sindre Sorhus Feb 13 '14 at 20:56
2

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`. – James Kyle Mar 12 '14 at 12:41
@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? – mpen Mar 27 '14 at 20:56
1

@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](https://www.npmjs.org/package/gulp-filter) if you don't want that. Still, this answer should be marked correct. – James Kyle May 04 '14 at 19:36
4

@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. – mpen May 04 '14 at 19:54

score -1 · Answer 3 · edited Nov 10 '15 at 13:20

-1

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

edited Nov 10 '15 at 13:20

Mo.

26,306
36
159
225

answered Mar 04 '14 at 09:57

Jake Rayson

921
7
20

2

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. – mpen Mar 04 '14 at 21:18
Gotcha :) Interested if it makes a difference in practise? – Jake Rayson Mar 10 '14 at 17:36
1

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. – mpen Mar 10 '14 at 23:28

Gulp + source maps (multiple output files)

3 Answers3