Front-End Build tool: Configuration and use of gulp

Installing Gulp

Because Gulp is a node-based management tool, install Nodejs first
Installing Nodejs
Nodejs: Chinese Station: http://nodejs.cn/English Station: https://nodejs.org/en/
Run the. msi file directly after download
after the installation is complete, open the command line (win+r) and type node-view node version

Global Installation Gulp

NPM Install-g Gulp

To install Gulp in the project directory, if you want to write gulp into the dependencies of the project Package.json file during installation, you can add –save-dev:
(project directory Installation Gulp Open command line mode: shift+ right mouse button –> choose to open the command line here)

NPM Install Gulp--save-dev

Use Gulp-v to see if the installation was successful (left: Global View Gulp Successful installation, figure right: project directory to see if Gulp installed successfully)

Use gulp
Create the Gulpfile.js file

var gulp = require (' Gulp '); Gulp.task (' default ',function() {    console.log (' (Hello World ');});

Create a Package.json file

NPM Init

Run the Gulp task

Under Projects, open the command line, type Gulp, and perform the task.

project directory structure

gulpapi

GULP.SRC ()

Used to read files

GULP.SRC (globs[, Options])

Gulp.dest ()

Used to write files

Gulp.dest (Path[,options])

Gulp.task ()

Used to define Tasks

Gulp.task (name[, Deps], FN)

Gulp.watch ()

To monitor changes to a file, we can use it to perform tasks, such as file compression, when a file has changed. For example

Gulp.watch (glob[, opts], tasks)

Front-End Build tool: Configuration and use of gulp