Gulp Overview - Introduction - Function - Installation - Operation

What is gulp?

1. automated build tools to enhance your workflow!

2.gulp the development process painful or time-consuming task automation, thus reducing your time wasted, to create greater value.

3. (stream) capability, gulp do not write the file-based node powerful stream immediately in the build process disk, thereby increasing the build rate.

gulp official website: https://www.npmjs.com/

 

gulp What are the features?

1. Copy the file

2.html compressed, css compiler compression, js merger compression

3. Optimize your images - Image Compression

4. Compile sass

5.es6 conversion es5

......

How to install Gulp?

1. Installation Node-- Node using a module mounted below npm

2. Global Installation gulp: npm i gulp -g (loaded only once, any directory mounted, acting on the environment as a whole)

3. As-dependent installation project, be sure to install to the root directory of your project below npm i gulp -D (directory project, each project needs below)

This project determine what package you use, do not forget to initialize the project

npm init

 

How Gulp?

First, use any text editor to create a file named gulpfile.js at the root of a large project

The basic syntax

const gulp = require ( 'gulp' ); introducing gulp module generates gulp objects
gulp.task (taskname, callback) to create the task taskname task name refers to the callback function executing means callback

Path gulp.src () introduced into the document set

gulp.dest () output file settings (if there is no directory name is automatically generated)

pipe () flow conduit (task-chained together)

 

Terminal input gulp tasks executive tasks

 

Gulp several functional applications

1. Copy the file

 

 2. html file compression

First, install npm i gulp-minify-html project path -D

 

3. Compression css

First, install npm i gulp-minify-css -D project path

 

 Note: Now gulp-clean-css likely to replace the above plug-ins

 

4. js compressed file, es6 turn es5

npm i gulp-uglify -g Plug

above sea level and gulp-of-babel @ 7   

npm i babel-core      

above sea level and preset-babel-es2015

 

 

5. Compile sass

npm i gulp-sass

above sea level and gulp-sourcemaps

npm i gulp-load-plugins

 

 6. Image Compression

NPM i gulp imagemin @ 6 -D 

 

 

7. Monitoring

npm i gulp-watch -D