Setting up React for ES6 ES2015 with Webpack and Babel

This resource came in quite handy when setting up React in combination with ES6 ES2015, 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 …

Supercharging your Gruntfile

In this article, we won’t focus on what numerous Grunt plugins do to your actual project code, but on the Grunt build process itself. We will give you practical ideas on: How to keep your Gruntfile neat and tidy, How to dramatically improve your build time, And how to be notified when a build happens. …

Grunt vs Gulp – Beyond the Numbers

Speed comparison between Grunt and the aforementioned Gulp 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 …

Gulp – The streaming build system

gulp.task(‘sass’, function() { return gulp.src(‘src/styles/main.scss’) .pipe(sass({ style: ‘compressed’ })) .pipe(autoprefixer(‘last 2 version’, ‘safari 5’, ‘ie 8’, ‘ie 9’, ‘opera 12.1’, ‘ios 6’, ‘android 4’)) .pipe(gulp.dest(‘dist/assets/css’)) }); Gulp is a build system and performs tasks such as the ones we do using Grunt: minify, concat, prefix, uglify, etc. Main difference: Gulp allows you to input your …

Grunt for People Who Think Things Like Grunt are Weird and Hard

Let’s face it: Grunt is one of those fancy newfangled things that all the cool kids seem to be using but at first glance feels strange and intimidating. I hear you. This article is for you. Great introduction to Grunt on 24ways. A must read for anyone starting out with it. Grunt for People Who …

Automating Front-end Workflow

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 …

Tools for image optimization

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 …