After using Grunt for a couple of years and changed to Gulp last year, I'm done with configuring and messing with them. As most of the grunt/gulp modules are built on top of a cli (comment line interface), documentation is poor, implementation of new versions is going slow and I'm wasting a lot of time just finding the right module that works in my case. We use npm in all of our projects, why not embracing the npm run-script feature.

Grunt/Gulp are both build tools that build our web projects in a way that we can code more modular aswel run optimized code for the end-user.

Which build tools do we need

Since the summer of 2015 we switched from backbone to react, from ES5 to ES2015, from Less to Sass, .... Before that, we used Grunt to build our modular javascript apps into one big app.js, with require.js. The gruntfile was reused from one project to another and adapted to the specific needs of the different projects.

Switching technology meant that I had to rebuild the whole build flow. I used gulp on other smaller projects, I liked the piping concept, it's much faster. It recently got more favoured by a lot of likeminded developers, so the time was right to switch from Grunt to Gulp. The first Gulp script took a lot of time and I encountered the same issues as I had with Grunt. Modules were out of date, badly documented, .... I don't blame those maintainers, they needed a module, created one and got it working. But in our volatile world, it's hard to keep up with new versions of the build tools behind the modules and take the time to document all their features.

I ended up diving into the code of gulp modules to understand all the features of specific modules.

Our tools:

• babelify + react translator
• browserify
• sass compiler
• copy files
• watch changes
• browser reloading

Our base is not even that complicated. Watch for changes in our js files and build them into one file with browserify and transform our ES2015 and React.js code into ES5 code. Watch for changes in our scss (SASS) files and compile them into one css file. Send those files to our browser and reload the browser on change. For our final build we added some uglify to our js files and didn't create the sourcemap file.

Build tools the Npm way with npm run-script

Npm lets you define scripts to run from package.json.

"scripts": {

    "dev": "./bin/build"

  }

You run it by npm run dev.

I opted to run a bash script "build".

# remove previous build folder

rm -R build

# make build folder

mkdir build

# make css folder in the build folder

mkdir build/css

# create empty main.css file in a way our browser sync can watch it

touch build/css/main.css

# make js folder in the build folder

mkdir build/js

# create empty app.js file in a way our browser sync can watch it

touch build/js/app.js



# copy index.html from src to build folder

cp src/index.html build/index.html

# convert our scss file to css and place it in the build folder

node-sass  --source-map true src/sass/style.scss build/css/main.css



# Run the next commands together with and keep all processes in the front with && fg

# browserify and watch with watchify, transform with babelify from es2015 & react to es5

watchify src/scripts/* -e src/scripts/app.jsx -o build/js/app.js -d -v -t [ babelify --presets [ es2015 react ] ] &

# watch scss file and rebuild to css on change

node-sass -w src/sass/style.scss build/css/main.css --source-map true &

# start browser-sync to serve from the build folder and reload the browser when a file in the build map changes

browser-sync start --files "build/css/*.css, build/js/*.js" --server build && fg

This would be the smallest version to start our react app development.