This resource came in quite handy when setting up React in combination with ES6 , Webpack and Babel.
Installing all the required dependencies:
# Install Webpack
npm install --save-dev webpack
# Install the Babel Loader, for use with Webpack
npm install --save-dev babel-loader
# Install the es2015 and react presets, for use with Babel
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-preset-react
All Gulp plugins are just duplex streams that read in data and output data. Everything can be processed in memory, with the output of one stream piped as input to another. Much like Unix pipes.
This gives Gulp a huge speed advantage over Grunt, because I/O is very expensive when compared to in-memory operations. On top of that, Grunt has to compile all the files even if only one has changed, which adds additional build time.
Writing a modern web app these days can sometimes feel like a tedious process; frameworks, boilerplates, abstractions, dependency management, build processes..the list of requirements for a front-end workflow appears to grow each year. What if however, you could automate a lot of this?
Extensive set of slides by Addy Osmani. Solid gold for those wanting to start with Grunt, Yeoman, Bower, etc. Also mentions quite a few handy tools.
Where possible, it’s best to try automating image optimization so that it’s a first-class citizen in your build chain. To help, I thought I’d share some of the tools I use for this.
Not only contains a list of grunt plugins one can use, but also a few command line and online tools. I’ve been using TinyPNG for quite some time now before uploading images to my blog. Can shave up to 83% (!) of a screenshot created in OS X.