A few ideas ＼(☆o◎)

[khalillechelt]

I like what you did. I didn't really have time to play around with it but here are some thoughts/suggestions anyway for building it out.

• Only rebuild files that changed
• I would love not to have to distinguish between prod and dev but instead concat/min all the things and use sourcemaps for js and scss. Browserify does sourcemaps now.
• Maybe work in your gulp-sprite thingy?

[aslansky]

Thanks for the ideas.

• in my opinion it would only make sense if there is more than one entry point. For now my default task does basically the same as if I would use the example. It builds main.css when scss is changed and app.js when javascript is changed. But you are right it makes total sense to only build changed files.
• I tried to get this working. The problem is, browserify embeds the sourcemaps as base64 strings in the concatenated file. Which I like but uglify can't handle base64 sourcemaps and so discards them in the uglification process. And gulp-browserify doesn't give the option for minification. But maybe somebody else has a better idea.
• There are no images in the playground right now but I will work on the plugin ... promised :-)

[aslansky]

To show you what I mean with entry point I added a watch-sass task that shows what happens. Start gulp watch-sass, remove ./dist/css/main.css and then try changing the _config.scss. Nothing happens, because node-sass doesn't know which file is the entry point. With browserify it would be even worse, because it needs a single entry point to create the dependency graph.

[khalillechelt]

Seems to be more complicated and difficult than I thought :D
Let's see, maybe we can find out the fixes for this...

[khalillechelt]

Aaha!
Check out minifyify: it minifies the browserified code and creates sourcemaps to the original files

https://npmjs.org/package/minifyify

[khalillechelt]

Minifyify runs UglifyJS on your bundle, and uses Browserify's inline sourcemap to create a new sourcemap that maps the minified code to the unbundled files.

[aslansky]

Nice, now I only have to get it to work with gulp. Just pipeing to minifyify won't work, because it doesn't understand vinyl objects.

[khalillechelt]

But isn't minifyify just a transform plugin for browserify?

Anyway I am kind of getting away from the idea to have everything minified by default because I remember that it slows down the build process immensely at least for JS:

[aslansky]

No minifyify is just a wrapper around uglify that creates the sourcemaps. See ben-ng/minifyify#23.

By the way the --production flag would be needed anyway. You don't want to have the base64 source maps in production code ... they are huge.

[khalillechelt]

OK. Then that point can be dismissed 😃 as well as the piped watch-function, I guess.

Although there is an Browserify transform plugin for uglify: https://github.com/hughsk/uglifyify

[rzschoch]

Another idea: Use https://github.com/shakyShane/gulp-browser-sync instead of livereload. Much simpler configuration, cleaner implementation and more features.

[jimthedev]

@rzschoch I am currently using gulp-browser-sync. It is fantastic for working with multiple mobile devices w/o having to refresh. The port selection is a bit odd because you give it a range of ports and it chooses one in that range that is available. This has caused me a few headaches but I suppose it helps in the case that you have two instances of it running at a time or have port conflicts in the range.

[aslansky]

@rzschoch There is a nice article about how to use gulp with browser-sync here http://shakyshane.com/gulpjs-sass-browsersync-ftw/