Detailed explanation of the use of Gulp.js, a powerful tool for front-end task construction

Overview

In software development, the benefits of task runners are self-evident. They can help automate common, tedious tasks, allowing you to focus on more important things, like writing awesome code. Seriously, the ability to automate tasks like image compression, code minification, unit testing, and more is a real time saver.

For many front-end developers, the most commonly used task manager nowadays is Grunt, a tool that allows you to define various running tasks using JavaScript in the Gruntfile.js file. Basically, as long as you know JavaScript, creating a Grunt task is very simple and straightforward. Rich third-party plug-ins such as jsHint, Sass and Uglify make Grunt one of the most extensible tools.

For most people, Grunt has always been the task runner of choice. However, recently, a tool called Gulp.js has attracted a lot of attention because of its easy installation and super simple configuration file that is easier to read and manage.

Install Gulp.js

Gulp.js, like Grunt, is a task running tool based on Node. So you have to install Node to run it. There are a few different ways to install Gulp, depending on your operating system. On OS X, I use nvm, a great script by Tim Caswell for managing multiple Node.js versions. You can also download the binary directly from the official Node.js website. If you know nothing about Node, I suggest you go to the Nettuts+ series to familiarize yourself with Node.js first.

We can quickly install Gulp using npm (Node package manager). Open your terminal and type:

npm install -g gulp

This command fetches gulp from the npm registry and installs it globally on your system so that you can access it directly from the command line.

Now that gulp is installed, let's start using it in our project.

Create your project using Gulp.js

To use Gulp in your project, you must complete the following key points:

• Install two dependent packages
• Install any plugins you want to use
• Create a Gulp.js file and define the tasks you want to run

Please complete the above points in the project path so that Gulp can use your configuration file.

First, install the dependency packages:

npm install --save-dev gulp gulp-util

Now we need to install the Gulp plugin that runs the tasks defined in the configuration file. These plugins are Node packages, so we again use npm to install them.

npm install --save-dev gulp-uglify gulp-concat

I have installed two plugins here, which allow me to use the Uglify.js compressor to minify/compress JavaScript code and merge multiple JS files into one file.

Note that I used --save-dev here, which allows me to install Gulp dependencies and plugins only in the current project. Doing so will generate corresponding entries for each dependency in the devDependencies list in package.json. As shown below:

{
  "devDependencies": {
    "gulp-util": "~2.2.13",
    "gulp": "~3.5.0",
    "gulp-uglify": "~0.2.0",
    "gulp-concat": "~2.1.7"
  }
}

This ensures that any dependencies and plugins for your project are installed using npm. If there is no package.json file in your project, type npm init in the command line or simply create one manually in an editor, enter the corresponding curly brackets, and then save it as "package.json". Enter the npm command in the command line to update it. Note that the curly brackets are required, otherwise when you try to use --save-dev npm will throw an error saying it’s not a valid JSON file.

Although I only used two plugins in this guide, Gulp provides over 200 plugins to meet different functional needs, including:

• LiveReload (gulp-livereload)
• JSHint(gulp-jshint)
• Sass (gulp-sass)
• CoffeeScript file compilation (gulp-coffee)

There are many more...

Gulpfile.js

Like Grunt, Gulp has a configuration file called gulpfile.js, which defines all the necessary plugins to run tasks. You should create this file in the root directory of your project.

Simple and straightforward syntax makes gulp files very easy to read and understand:

var gulp = require('gulp'),
gutil = require('gulp-util'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat');

The above code simply tells gulp which plugins need to be referenced to complete the given task.

Next, we need to define the tasks that Gulp will run. Here, I define two:

• Compress images
• Minify JS files

We use the Gulp method task() to define the task to run:

gulp.task('js', function () {
    gulp.src('./js/*.js')
        .pipe(uglify())
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./js'));
});

Looking at the code above, it uses a mixed method call consisting of referenced plugins. The first method, task(), uses a name to represent the current task (here it is called 'js') and an anonymous method to encapsulate the actual operation. Let's break down the code:

gulp.src('./js/*.js')

The src() method specifies where to find the JS file that needs to be compressed and converts it into a data stream containing the document structure to be passed to the subsequent running plug-in. This is part of the Node.js Streams API, and is one of the reasons why Gulp has a concise API syntax.

.pipe(uglify())

The pipe() method obtains the data stream passed from the src() method and then passes it to the specified plug-in. In the current example, the plugin uglify will receive the data stream.

.pipe(concat('all.js'))

Like uglify, the concat plugin receives the data stream passed through pipe() and then merges multiple JS files into 'all.js'.

.pipe(gulp.dest('./js'));

Finally, we use Gulp’s dest() method to write all.js to the specified directory. The whole process is concise and easy to read.

There is one last thing we need to do, which is to change Gulp’s default task to run “js”.

gulp.task('default', function(){
    gulp.run('js'); 
});

Return to the command line and type 'gulp'. Gulp will find the gulpfile.js file, load all dependencies and plugins, and run the default task 'js'. You can see in the final run result that the files are compressed and merged.

Let's take a step closer. Gulp provides another method called watch(), which can monitor changes to specified resources. Instead of manually typing 'gulp' to run the task, this method allows you to automatically run the task based on resource changes.

gulp.watch('./js/*', function () {
     gulp.run('js');
});

When the above code runs, Gulp will continue to monitor the specified resource and run the 'js' method again once the resource changes. This feature is great!

Transition to Gulp.js

When I first heard about Gulp, my first reaction was “Another awesome tool!”. Gulp.js does have an attractive syntax and API that makes building tasks a breeze. Although not as rich as Grunt's plugin library, its plugin library seems to be growing day by day, especially now that there are so many developers interested in it.

The above is the detailed content of the Gulp.js usage guide, a powerful tool for front-end task construction. For more information about the Gulp.js usage guide, please pay attention to other related articles on 123WORDPRESS.COM!