Gulp Getting Started Guide

Installing Gulp.js Gulp is given to node. js, so first install node.js[1], and then execute the following command to install Gulp:

NPM Install-G Gulp/G(Global) performs a gulp, so gulp can be done anywhere

After the installation is complete, it needs to be used in our project and requires the command line to switch to the project directory (you can Right-clickClick Project directory to select Open Command Window here (W)Then execute the following command:

Generate a Package.json with some general configuration information

, you will need to set some name,version and other properties, generally always press ENTER to confirm the completion of the project in the directory after more than a Package.json file, the contents are as follows:

  NPM Install gulp--save-dev     // installs gulp into the project directory, Bing generates dependency information in Package.js devdependencies 

  Installing the Gulp pluginGulp tasks are in the form of plug-in [2], so before using, we need to install the plug-in to the project directory, plug-in installation commands:

NPM Install plugin name--save-dev// Multiple plugins can be separated by a space npm Install gulp-util gulp-uglify Gulp-concat--save-Dev// install gulp-util gulp-uglify gulp-concat plugin //  Gulp-uglify: For compressing JS//Gulp-concat: for merging Files

Creating a configuration file Gulpfile.jsTo use gulp, we also need to make the relevant configuration to load our plug-in: Create a gulpfile.js file within the project's directory (which must be the file name), for example (install a plugin that compresses HTML)

NPM install gulp-htmlmin--save-dev     // Install HTML compression plug- in

The configuration content is as follows:

var gulp = require (' Gulp ');      var htmlmin = require (' gulp-htmlmin ');       // Create a task     Gulp.task (' minify ',function() {          gulp.src (' src/*.html ')                 . Pipe (Htmlmin ({ Collapsewhitespace:true})                 . Pipe (Gulp.dest (' dist ')})     ;

In the console under this directory, type:

Gulp minify   // perform compressed HTML tasks

View items in the catalog: automatically generated a dist folder, and there is a index.html file other plug-ins are the same way to configure, get started to try it, do you think so easy? [1]:https://nodejs.org/en/download/[2]:https://www.npmjs.com/contains a huge library of plugins

Gulp Getting Started Guide