1. Installation of gulp
First make sure you have installed the nodejs environment correctly. Then install gulp globally:
npm install -g gulp
After installing gulp globally, you also need to install it separately in each project that will use gulp. Change directory to your project folder and execute on the command line:
npm install gulp
If you want to write gulp into the dependencies of the project package.json file during installation, you can add --save-dev:
npm install --save-dev gulp
This completes the installation of gulp. As for why after installing gulp globally, you need to install it locally in the project. If you are interested, you can read the answer made by someone on stackoverflow: why-do-we-need-to-install-gulp-globally-and-locally , what-is-the-point-of-double-install-in-gulp. It's basically for the flexibility of the version, but if you don't understand it, you don't have to worry about this problem too much, just know that we usually want to do this.
2. Start using gulp
2.1 Create the gulpfile.js file
Just like gruntjs needs a Gruntfile.js file, gulp needs a file as its main file, in gulp this file is called gulpfile.js. Create a new file named gulpfile.js and put it in your project directory. The next thing to do is to define our tasks in the gulpfile.js file. Below is a minimal example of the contents of a gulpfile.js file, which defines a default task.
gulpfile.js
var gulp = require("gulp"),//Introduce the required packages
rev = require("gulp-rev-append"),//Use gulp-rev-append to add a version number to the page reference, clear the page reference cache (automatically add a version number to the URL).
css = require("gulp-uglifycss"),
uglify = require("gulp-uglify");//Compression of js files
gulp.task("revGulp",function () {//Execute task "revGulp"
gulp.src("./distTpl/*html")//Match all html files under distTpl
.pipe(rev())
.pipe(gulp.dest("./tpl"))
});
gulp.task("css",function () {
gulp.src("./distCss/*.css")
.pipe(css())
.pipe(gulp.dest("./css"))
});
gulp.task("uglify",function () {
gulp.src("./distJs/*.js")//js file to be compressed
.pipe(uglify())//Use uglify for compression, please refer to:
.pipe(gulp.dest("./js"))//compressed path
});
gulp.task("watch",function () {//Monitor file changes, when the file changes, use it to execute the corresponding task.
gulp.watch("./distCss/*.css",["css","revGulp"]);
gulp.watch("./distJs/*.js",["uglify","revGulp"]);
});
gulp.task("default",["watch"]);