Bring in new sourcemap system

[yocontra]

• Update plugin guidelines and documentation to explain this
• Open issues on all plugins that need this added linking to the new docs
• Add this to a few prominent modules (concat, coffee, uglify)

[terinjokes]

Working on this now

[jessepollak]

Have been flailing with trying to get source maps to work with gulp for the last few hours, then stumbled upon this — :thumbsup:

anything I can do to help?

[patrickheeney]

Is this the official issue for source maps (concat)? Bounced around between 5 tickets before finding this.

[yocontra]

@patrickheeney for all source maps, not just concat

[terinjokes]

Yes
On Mar 29, 2014 3:23 PM, "Patrick Heeney" notifications@github.com wrote:

Is this the official issue for source maps (concat)? Bounced around
between 5 tickets before finding this.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/356#issuecomment-39011074
.

[hyspace]

Can't wait any more for this feature...

[hollingberry]

Please add this!

[mateodelnorte]

+1

[srcspider]

Any progress or details on how it might work?

[qraynaud]

Yeah, this seems to be the right way of doing things. I would LOVE to be able to load my js files, minify them and then concat them with "vendor" files that come already minified with their map file. It would help so very much.

[terinjokes]

@floridoo is also helping out here.

[qraynaud]

I believe I will be very free this week. If I can be of any help I would gladly give a hand too.

[superstructor]

@terinjokes this seems to be a good way to do it and in particular better than my hack on gulp-coffee at gulp-community/gulp-coffee#24

Is there anything people such as myself can do to help get this finished and released to gulp users ?

[terinjokes]

What we're going to do is:

• Have a user-facing plugin that adds source maps into a gulp stream, alongside the file contents.
• If the source map exists, then a plugin should know to use it and update the source map on the way out.
• The same user-facing plugin can be used in a gulp-stream to T-fork to separate files, or inline to a sourceMappingURL.

We're working on the developer-facing side to allow working with gulp source maps easier.

@floridoo has taken these ideas and developed floridoo/gulp-sourcemaps.

[qraynaud]

@terinjokes That really sounds great. The big question mark that still stays is: we seem to be a lot wanting to help getting this ready in a timely fashion (either because we need this or because we like the idea). Is there anything we, the community at large, can do about this issue?

I personally prefer gulp over grunt but I do have my actual build stack on grunt. I really want to create a new stack over gulp. When I was looking into what I would need to do my ideal stack on gulp, I found this bug. It is really a must have for me. My new ideal stack is a lot more sourcemap aware that what I can do with gulp today (or with grunt for that matter).

If we could let's say cut the code in parts with clearly identified APIs, different people could easily handle each one separately. We can open separate bugs to track the whole thing in parts and wait for all of them to be closed before closing the "meta bug" (this one?) after the small plumbing left is done.

Or maybe this is too small (or to closely interdependent) to make this work?

[yocontra]

@terinjokes I think making a list of modules that need to be completed with some basic specs would be prudent so other people can pitch in

[terinjokes]

@contra sure thing. there's already one open ticket on gulp-sourcemaps, but I'll work on specs for other modules.

[Termina1]

@terinjokes I like this idea too, so I tried implement it's support for gulp-traceur, here is my fork https://github.com/Termina1/gulp-traceur.

Know I need to implement support for gulp-uglifyjs, but there is a question, how we should handle the case when several files are merged in one?

[heikki]

@Termina1 check out these forks -> https://github.com/floridoo/gulp-sourcemap-test/blob/master/package.json#L14-L15

[terinjokes]

@Termina1 I'm working on gulp-uglify as we speak. Be careful though, because we're still working on the API for gulp-sourcemaps as noted on that gulp-traceur ticket.

[floridoo]

If you want to help, please have a look at floridoo/gulp-sourcemaps, join the discussions in the issues and add your own ideas / issues / pull requests.

Thank you!

[thiagomata]

If someone, like me, need to create the maps files and the javascript from coffeescript files what are into a tree structure, this workaround may help https://gist.github.com/thiagomata/1f6a7c3b47bcb7c16399

[yocontra]

@floridoo @terinjokes can you post a TODO here so we know what needs to be done to close this out?

[dylan-baskind]

Heya Gulp Dudes: Wonderful work on Gulp + plugin ecosystem; big supporter / lover of the build sys.

Just noting, similiar to @thiagomata - when using coffeescript and src globbing for all directories and files in the form of: /some/path/**/*.* - has the sourcemap plugin looking for source files at /some/path/file.coffee - not the expected /some/path/sub/folder/file.coffee.

[floridoo]

@dylan-baskind What you describe is a bug in gulp-coffee. Just sent a pull request to fix this: gulp-community/gulp-coffee#42

[abourget]

@jessepollak anything up with the browserify side of things ?

[terinjokes]

This has largely shifted to something existing in plugins, rather than core. Is there anything other than documentation that is blocking the closure of this?

Working on the documentation. 😄

[yocontra]

Documentation and we can close this. I just want to say thanks to everyone who contributed to making this one happen - @floridoo you did an awesome job. We have the best sourcemaps of any build tool.

[jessepollak]

@abourget missed this — what exactly are you looking for?

👏 to @floridoo for all the hard work, much much appreciated.

[sindresorhus]

I just want to say thanks to everyone who contributed to making this one happen - @floridoo you did an awesome job. We have the best sourcemaps of any build tool.

👍 It's really good :)

[qraynaud]

Yeah I concur with that. Best sourcemap in a build tool 👍. Ever.

[subtubes-io]

Can someone explain how to uglify, then concat and finally generate the source map? I cannot seem to get it working. I see the logical error but I am not seeing anything in the API's that would explain how to accomplish this and from the comments above I gather that it is possible.

    gulp.src(['src/app.js', 'src/**/*.js'])
        .pipe(sourcemaps.init())
        .pipe(uglify({
            compress: {
                negate_iife: false
            }
        }))
        .pipe(concat("app.concat.js"))
        .pipe(rename('app.min.js'))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('public/js'));

[heikki]

@thiswildorchid concat before uglify.

Check stackoverflow questions and related repositories docs & issues:
https://github.com/floridoo/gulp-sourcemaps
https://github.com/terinjokes/gulp-uglify
https://github.com/wearefractal/gulp-concat

--edit
ok, you found SO already :)
http://stackoverflow.com/questions/26885333/uglify-minify-and-generate-source-map-with-gulp

[subtubes-io]

Only thing is that the source map breakpoints don't work :( in chrome (I have only tried chrome)

[barneycarroll]

@thiswildorchid that's inevitable to some degree – uglification removes line breaks and thus drastically reduces the number of places you can have breakpoints. I run separate dev and build gulp tasks. Because most tasks are the same or largely the same between the two, I set a dev flag to true so that processes can behave differently depending on context.

What I then realise is that I want to be able to debug in development, but I don't care about source maps in build. You can make as many of these conditional pipes as you like:

var browserify = require( 'browserify' );
var buffer = require( 'vinyl-buffer' );
var maps = require( 'gulp-sourcemaps' );
var source = require( 'vinyl-source-stream');
var uglify = require( 'gulp-uglify' );

var dev = false;

function noop(){}

gulp.task( 'build', function(){
    // Do stuff, including browserify
} );

gulp.task( 'dev', function(){
    dev = true;

    // Do stuff, including browserify
} );

gulp.task( 'browserify', function(){
    var opts = {};

    if( dev ) opts.debug = true;

    return browserify( './src/js/app.js', opts )
        .bundle()
        .pipe( source( 'app.js' ) )
        .pipe( buffer() )
        .pipe( dev ? maps.init( { loadMaps : true } ) : noop() )
        .pipe( dev ? noop() : uglify() )
        .pipe( dev ? maps.write() : noop() )
        .pipe( gulp.dest( './build/js/' ) )
        .pipe( dev ? sync.reload( { stream : true } ) : noop() )
        .on( 'error', function( e ){
            this.emit( 'end' );
        } );
} );

[subtubes-io]

That was exactly what I was thinking on doing, and have done before, thank you.

[fesor]

@barneycarroll i do this in other way. I have --release option and also i use gulp-if for conditions:

var
  gulp = require('gulp'),
  gIf = require('gulp-of'),
  // more and more...
  uglify = requier('gulp-uglify')
;

// I prefer minimist to parse arguments
var release = !!args.release;

gulp.task('scripts:app', function () {
    return gulp.src('src/app.js')
        .pipe(gIf(!release, sourcemaps.init()))
        .pipe(es6moduleTranspile(...))
        .pipe(gIf(release, uglify()))
        .pipe(gIf(!release, sourcemaps.write())
    ;
});

You may also want to use lazy-pipe for DRY.

[insidewhy]

I can't merge two streams together with source maps :( Means I can only use gulp for really basic configurations.

[insidewhy]

e.g. How to merge the two streams and concatenate the source maps?

var gulp       = require('gulp')
var sourcemaps = require('gulp-sourcemaps')
var traceur    = require('gulp-traceur')
var concat     = require('gulp-concat')
var merge      = require('merge-stream')

gulp.task('default', function() {
  // how to do this? this doesn't work...
  merge(
    gulp.src(['app/*.js', 'app/*/*.js'])
      .pipe(sourcemaps.init())
        .pipe(traceur())
        .pipe(concat('smut.js'))
      .pipe(sourcemaps.write()),
    gulp.src('bootstrap.js')
      .pipe(sourcemaps.init()) // ??
      .pipe(sourcemaps.write())
  )
  .pipe(sourcemaps.init()) // ??
  .pipe(sourcemaps.write())
  .pipe(gulp.dest('dist/assets'))

})

I want the final merged asset to contain source maps. plumber/gobble do this easily.

[yocontra]

Just needs docs to close this out :(

@floridoo Do you have any time to write a quick markdown on how to put sourcemaps in your library?

[floridoo]

@contra Something like https://github.com/floridoo/gulp-sourcemaps#plugin-developers-only-how-to-add-source-map-support-to-plugins?

[yocontra]

@floridoo Exactly that

[yocontra]

Related: #843