Install and use gulp and install and use gulp

Install and use gulp and install and use gulp

Global install gulp (based on node): $ npm install -- global gulp

 

Enter the project folder, run npm init, fill in relevant parameters, and generate the package. json that records the configuration file information for future project migration.

 

Go to the project's folder and install gulp: $ npm install -- save-dev gulp again as the project's development dependency (devDependencies ).

 

Create a file namedgulpfile.jsFile, the following isgulpfile.jsExample program:

Var gulp = require ('gulp'); var less = require ('Gulp-less '); var connect = require ('Gulp-connect'); gulp. task ('html ', function () {gulp. src ('. /*. html '). pipe (connect. reload () ;}); gulp. task ('css ', function () {gulp. src ('dist/css /*. css '). pipe (connect. reload () ;}); gulp. task ('compile-less ', function () {gulp. src ('less /*. less '). pipe (less ()). pipe (gulp. dest ('dist/css ')). pipe (connect. reload () ;}); gulp. task ('connect ', function () {connect. server ({host: '2017. 16.1.212 ', // use the IP address. If the default localhost is used, a websocket error will occur. Therefore, you can only manually press f5 to refresh port: 8000, // port number. Do not write it. The default value is 8000 root :'. /', // current project home directory livereload: true // auto refresh}) ;}); gulp. task ('Watch ', function () {gulp. watch ('less /*. less ', ['compile-less']); // monitor the less file gulp. watch (['. /*. html '], ['html']); // monitors the html file gulp. watch (['dist/css /*. css '], ['css']); // monitors css files}); gulp. task ('default', ['connect ', 'Watch', 'compile-less ']);

 

Install the plug-ins gulp-less and gulp-connect before execution (refer to gulp ). Use gulp-lessto compile the. Less file as .css. Use the gulp-connect plug-in to build a web server and provide the automatic refresh function. Similarly, many plug-ins can be searched by themselves.

Enter gulp in the console and rungulpfile.js(If NO parameter is added after gulp, default is executed by default ).

The structure of the project before execution is as follows:

The structure of the project after execution is as follows:

Enter http: // 172.16.1.212: 8000 to display the project content.