Gulp Getting Started Tutorial

Gulp: A powerful tool to build automation projects.

--Site Resource optimization

--Repetitive tasks autocomplete: JavaScript | Coffee | Sass | Less | HTML | Image | CSS and other files such as testing, checking, merging, compressing, formatting, browser automatic refresh, deployment file generation, and listen to the file after the changes to repeat the specified steps.

--pipe thought: The output of the previous level directly becomes the input at the back level.

1. Install node

https://nodejs.org/en/

Download, run the program directly

2. Use the command line

CMD--node-v | Npm-v

Display version number, installation successful

3. Navigate to the project

CD-to-navigate to the directory

LS-to list file lists

4. Installing Gulp

4.1 sudo npm install-g Gulp

sudo--Execute commands as Administrator

NPM---Install the Node module tool and execute the install command

-----Install in the global environment so that any project can be used

Gulp--The name of the node module that will be installed

4.2 gulp-v

Check the version number of the gulp to make sure Gulp is properly installed

4.3 Installing gulp to Project Local

NPM Install--save-dev Gulp

Update the Package.json.--save-dev file, updating the Devdependencies value, indicating that the project requires a dependency gulp

5. Create a new Gulpfile file and run the Gulp

Check JavaScript | compiling Sass or less files | Merging JavaScript | Compress and rename merged JavaScript

　　

5.1 Installation Dependencies

NPM Install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename--save-dev

If the above command prompts permission error, add sudo to try again

5.2 New Gulpfile file

Specify what tasks Gulp need to complete

Task | Run | Watch | src | Dest

Project root directory Create a new gulpfile.js

Introduce Gulpvar Gulp = require (' gulp ');//Introduce component var Jshint = require (' Gulp-jshint '); var sass = require (' Gulp-sass '); var concat = Require (' Gulp-concat '); var uglify = require (' gulp-uglify '); var rename = require (' gulp-rename ');//Check Script Gulp.task (' Lint ', function () {   gulp.src ('./js/*.js ')         . Pipe (Jshint ())         . Pipe (Jshint.reporter (' Default '));}); /compile Sassgulp.task (' sass ', function () {    gulp.src ('./scss/*.scss ')         . Pipe (Sass ())         . Pipe (Gulp.dest ('./css ‘));});/ /merge, compress file Gulp.task (' Scripts ', function () {    gulp.src ('./js/*.js ')         . Pipe (concat (' all.js '))         . PIPE ( Gulp.dest ('./dist ')).         Pipe (rename (' All.min.js ')). Pipe (Uglity (         ))         . Pipe (Gulp.dest ('./dist '));}); /Default task Gulp.task (' Default ', function () {    gulp.run (' Lint ', ' sass ', ' scripts ');    Listener file Changes    gulp.watch ('./js/*.js ', function () {        gulp.run (' Lint ', ' sass ', ' Scripts ');});    

Run the Gulp task

Gulp | Gulp <task name>

Gulp Getting Started Tutorial