An introduction to Gulp Build System

What is Gulp?

Just like Grunt, which is a build tool for front-end web development, Gulp is a new block that runs predefined tasks on static files such as CSS, HTML, Javascript, images. Some of these tasks includes:

  • minimise files size
  • watch file changes and automate the deployment

What is the major difference between Grunt and Gulp?

  • Grunt plug-ins often perform multiple tasks where as Gulp plug-ins are designed to do one thing only; it is clean and neat.
  • Grunt requires plug-ins for basic functionality such as file watching; Gulp has them built-in.
  • Grunt uses JSON-like data configuration files; Gulp uses leaner, simpler JavaScript code. You don’t create multiple configuration files in Gulp for each task like in Grunt.

How to use Gulp?

I have recorded a video about that explains you about:

  1. How to Install Gulp
  2. How to Install Gulp Plugins
  3. How to find Plugins
  4. How to define Gulp tasks
  5. How to execute bunch of tasks
  6. How to watch changes in static resources and execute tasks automatically.

 

 

 

 

References

  • http://www.smashingmagazine.com/2014/06/11/building-with-gulp/