;
SERVICE

What is Gulp.js?

shadow
gulp.js is streaming build system similar to Grunt

Author :  

shadow
gulp.js is streaming build system similar to Grunt
  • Recruit
  • Recruit

Gulp.js is a stream-based building system that, similar to Grunt, allows you to automate tasks for your project. These tasks range from minification to file concatenation. What is a stream-based build system? The Stream Handbook by substack explains:

Streams come to us from the earliest days of unix and have proven themselves over the decades as a dependable way to compose large systems out of small components that do one thing well. In unix, streams are implemented by the shell with | pipes. In node, the built-in stream module is used by the core libraries and can also be used by user-space modules. Similar to unix, the node stream module’s primary composition operator is called .pipe() and you get a backpressure mechanism for free to throttle writes for slow consumers.

Stream Handbook by substack

In short, your application is series of ‘pipes’ or ‘tubes’. In Gulp, plugins or modules perform one small task. These small pipes build up to a larger system. This idea comes from a core UNIX philosophy as explained by Doug McIIroy:

We should have some ways of connecting programs like garden hose–screw in another segment when it becomes necessary to massage data in another way. This is the way of IO also.

– Doug McIlroy

Why Gulp.js?

Gulp is different then Grunt in different ways.

  • Gulp tasks perform one task. Grunt runs multiple tasks
  • Gulpfile uses Javascript code instead of Grunt’s JSON life format
  • Watch is built-in, no need to install it
  • Gulp also takes less code to do more things

Let’s install Gulp!

Step 1: Install Node.js

You will need to install Node.js to begin this tutorial

The first step, if you haven’t already, is to install Node.js.

  1. Click here
  2. Click the green ‘Install’ button
  3. Follow the instructions to install Node

Step 2: Install Gulp.js

The first step is to install gulp.js globally using npm. Then, start the Terminal, or Command Line, and run the following command:

From now on, you can use gulp as a command!

Step 3: Include in Your Projects

Let’s create a folder called ‘test’:

Now change into the new directory:

For node packages, you will need to create a package.json file:

Press the ‘i’ key. Copy and paste the following code using Command+C and Command+V respectively:

Press the ‘ESC’ key to exit out of Insert mode. Then, type in :wq to save and quit.

If you use the ‘ls’ command, you should now be able to see node_modules and package.json:

The next step is to install gulp.js into your project. You can do this by running the following command:

Step 4: Plugin and Gulpfile.js

It is time to create the gulpfile.js file into your root directory. You can use a text editor, such as Sublime Text 2 and save as Gulpfile.js. Here’s a starter template from the Getting Started page:

Let’s install a plugin to see how this all comes together. Head back into the Terminal/Command Line and run the following:

Next, let’s create a folder and Javascript file so that Gulp can run its task:

Let’s use the VIM editor again to create the file

Finally, copy and paste the following into the VIM editor using the Insert mode:

Use the VIM editor to configure the plugin. If you need help, please refer to the step above:

Note: Make sure that the code above has been copied correctly

Step 5: Using the Gulp command

You can run gulp in the terminal/command line by running the following command:

If you see this message, then you have installed and configured Gulp correctly.

If you see a message similar to the image above, then gulp has run the task successfully.

The command above runs all of the tasks. If you would only like to run a task by itself, you can use the following structure:

Resources

If you would like to learn more or are confused, please refer to the resources below. Enjoy!

Gulp Presentation

http://slides.com/contra/gulp#/

Get Started Guide

https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md

Team Treehouse Video

YouTube Preview Image

What is gulp.js?

http://travismaynard.com/writing/no-need-to-grunt-take-a-gulp-of-fresh-air

Presentation Build Wars – A Comparison between Grunt and gulp.js

http://markdalgleish.github.io/presentation-build-wars-gulp-vs-grunt/

Grunt vs. Gulp

http://www.sitepoint.com/introduction-gulp-js/

Gulp This by Laracasts

YouTube Preview Image
SERVICE
  • sns