react-stack-playground
react-stack-playground copied to clipboard
aslansky
A few ideas ＼(☆o◎)
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?
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 :-)
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.
Seems to be more complicated and difficult than I thought :D Let's see, maybe we can find out the fixes for this...
Aaha! Check out minifyify: it minifies the browserified code and creates sourcemaps to the original files
https://npmjs.org/package/minifyify
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.
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.
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:
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.
OK. Then that point can be dismissed :smiley: as well as the piped watch-function, I guess.
Although there is an Browserify transform plugin for uglify: https://github.com/hughsk/uglifyify
Another idea: Use https://github.com/shakyShane/gulp-browser-sync instead of livereload. Much simpler configuration, cleaner implementation and more features.
@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.
@rzschoch There is a nice article about how to use gulp with browser-sync here http://shakyshane.com/gulpjs-sass-browsersync-ftw/