You don’t need Gulp/Grunt/Webpack

We just need npm scripts.

Since 2 years now, I use Gulp to manage my front tasks.

Here are my main tasks:

  • convert scss into css,
  • convert my ES2015 javascript files into a readable javascript
  • minify my javascript files
  • optimize my images
  • create a sprite from svg

Start with Scss task

For this, we need to install node-sass:

npm install node-sass --save-dev

and add this script into you package.json:

“build:css”: “node-sass assets/css/ public/dist/css/ -r”,

This is a link to the command line options.

ES2015 to understandable javascript

We want also import other npm module. So we will use browserify. We need babelify and his babel-preset-es2015 plugin to compile our ES2015 code.

npm install browserify babelify babel-preset-es2015 --save-dev

and add this script into you package.json:

“build:js”: “browserify assets/js/app.js -o dist/js/app.js -v -t [babelify --presets[es2015]]”,

Minify your js files

For this task, we need to install the uglifyjs module.

npm install uglify-js --save-dev

and add this script into you package.json:

“minify-js”: “uglifyjs public/dist/js/app.js -o public/dist/js/app.min.js”,

Check the list of available options here.

Optimize your images

Now, for this one, we need to install the imagemin-cli.

npm install imagemin-cli --save-dev

To use it, add this script:

“optimize”: “imagemin assets/images/* 

Create a sprite from SVG sources

For this task, we can use svg-sprite.

"svg:sprite": "svg-sprite --css --css-render-css --css-example --dest=out assets/svg/*.svg"
  • — css: create a single svg sprite
  • — css-render-css: create a CSS file with a class per svg
  • — css-example: create a HTML file to preview your svg list
  • — dest: destination folder
  • and the last argument is the path to your svgs
My ‘out’ destination folder
The html preview page

Here is a link to all the available options:

Watch tasks

Generally, we need to save our scss and javascript files after changes.

The two modules we use for compile js and css accept a ‘ — watch’ parameters.

“watch:css”: “node-sass assets/css/ -o dist/css/ -wr”,
“watch:js”: “watchify assets/js/app.js -o dist/js/app.js -v -t [ babelify --presets[es2015]]]”,

Finals touch / Optimization

For now, we have 6 different tasks that make the jobs.

But we can (and must?) optimize some points.

Using variables

First of all, we have to much repeatable code (mostly the paths).

We can create some variables into our package.json

“config”: {
“src”: “assets”,
“dist”: “public/dist”

And we can use those variables like this:

“build-css”: “node-sass $npm_package_config_src/css/ $npm_package_config_dist/ -r”,

So now, when we change the location of the ‘assets’ or the ‘dist’ folder, we just need to change those variables.

Organize our scripts

Our scripts are not easy to read.

The best way to fix this is to create a new folder ‘bin’ and add a file per script (with the script into).

One task to rule them all

You can concat multiple scripts into one. I create two new tasks to build my scss and js files, and an other to watch my scss and js files.

Thanks for reading this. If you know better ways to optimize this code or easier methods to creates task scripts, just let me know in the comment or in twitter.