1. Install and run gulp

1.1 Installing GULp globally

npm install -g gulp

1.2 Generate a package.json

npm init

Remember to set the entry point file to gulpfile.js

1.3 Installing GULp as project dependencies

NPM install - save - dev [email protected]

The syntax of gulp4 is different from that of gulp3

1.4 Create a file named gulpfile.js in the root directory of the project

var gulp = require('gulp');
gulp.task('default'.function(){
   console.log('run gulp');
})
Copy the code

1.5 run gulp

gulp

2. Gulp of actual combat

2.1 Must know knowledge points

Gulp creates tasks using tasks gulp. Task (task name, [task executed first], function that executes the task)

Gulp executes a task named default by default

gulp.task('default'['html'.'css'.'js'].function(){
    console.log('default executed by default ')}) in executiondefaultBefore that, he's going to do the tasks in the array the HTML task, the CSS task, the JS task, before thatdefaulttaskCopy the code

Gulp uses SRC to read files

SRC (” SRC/CSS /*”)gulp reads all files in the SRC/CSS directory

Gulp uses dest to write files

Dest (‘dist/ CSS /’) Gulp writes the read file to dist/ CSS with the same file name as the read file

Gulp uses a pipe, which flows from one end of a pipe to the other

gulp.src('src/css/*')
	.pipe(gulp.dest('dist/css/'))
// gulp.src reads the file,gulp.dest writes the file,
// pipe sends the read file to the gulp.dest write
Copy the code

gulp.watch('src/css/*',['css'])

Watch listens for all files in the SRC/CSS directory and executes CSS tasks if the files are changed

2.2 use gulp

First create the following directory

└ ─ dist │ └ ─ SRC │ ├ ─ CSS │ ├ ─ HTML │ ├ ─ imgs │ └ ─ js │ └ ─ gulpfile. Js │ └ ─ package - lock. Json │ └ ─ package. The json │ └ ─ node_modulesCopy the code

SRC is our working directory and dist is our output directory

Now we need to export the files in the SRC directory to the dist directory

// gulpfile.js
var gulp = require("gulp");
var folder = {
    src:'src/'.dist:'dist/'
}
gulp.task('css'.function(){
    gulp.src(folder.src+"css/*")
    	.pipe(gulp.dest(folder.dist+"css/"))
})

gulp.task('html'.function(){
    gulp.src(folder.src+"html/*")
    	.pipe(gulp.dest(folder.dist+"html/"))
})

gulp.task('js'.function(){
    gulp.src(folder.src+"js/*")
    	.pipe(gulp.dest(folder.dist+"js/"))
})

gulp.task('default'['html'.'css'.'js'])

// In the current directory, run gulp to start gulp
Copy the code

This is the basic GULP workflow

Of course, this is simply moving files from the SRC directory to the dist file, but now I’m going to introduce several common gulp plugins

  1. Compressed HTML – > gulp – htmlclean
var htmlClean = require('gulp-htmlclean');
gulp.task('html'.function(){
    gulp.src(folder.src+"html/*")
    	.pipe(htmlClean) // Compress before writing
    	.pipe(gulp.dest(folder.dist+"html/"))})Copy the code
  1. Compressed image –>gulp-imagemin
var imageMin = require(gulp-imagemin);
gulp.task('img'.function(){
    gulp.src(folder.src+"img/*")
    	.pipe(imageMin())
    	.pipe(gulp.dest(folder.dist+'img/'))})Copy the code
  1. Compression js – > gulp – uglify
var uglify = require('gulp-uglify');
gulp.task('js'.function(){
    gulp.src(folder.src+'js/*')
    	.pipe(uglify())
    	.pipe(gulp.dest(folder.dist+'js/'))})Copy the code

  1. Prefixes the CSS

    gulp-postcss

    autoprefixer

var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
gulp.task('css'.function(){
   gulp.src(folder.src+"css/*")
    	.pipe(postcss([autoprefixer()])) // How do I write this
    	.pipe(gulp.dest(folder.dist+"css/"))})Copy the code

Now that you know how to use plug-ins, I’ve listed the rest of the plug-ins and their features below

  • Gulp-strip-debug Removes all debugging statements and debug statements in js
  • Gulp-sass converts sass to CSS
  • Gulp – clean – CSS compression CSS

Focus!!!!! Focus!!!!! Another plugin is gulp-Connect, which can start the server and refresh it in real time

var connect = require('gulp-connect');
gulp.task('server'.function(){
    connect.server({
        port:8888./ / the port number
        livereload:true.// Enable real-time refresh})})//
gulp.task('css'.function(){
   gulp.src(folder.src+"css/*")
    	.pipe(connect.reload())// Add connect.reload() to see the latest changes in real time in the browser
    	.pipe(postcss([autoprefixer()])) // How do I write this
    	.pipe(gulp.dest(folder.dist+"css/"))})Copy the code

At this point, you may be annoyed by the fact that every time you change gulpfile.js, you have to type a gulp execution at the command line.

To save energy, check out watch

gulp.task('watch'.function(){
    gulp.watch(folder.src+"html/*"['html']);// As soon as the HTML in the SRC directory changes, the HTML task is executed
    gulp.watch(folder.src+"css/*"['css']);
    gulp.watch(folder.src+"js/*"['js']);
    gulp.watch(folder.src+'imgs/*'['img'])})Copy the code

2.3 optimize gulp

In the previous section, we used many plug-ins to compress files, but we wanted to compress files in a production environment.

In the development environment, files are not compressed

Set environment variables in the Node environment

Export NODE_ENV = development//Copy the code

gulpfile.js

var devMod = process.env.NODE_ENV =='development'
gulp.task('css'.function(){
    var page = gulp.src(folder.src+'css/*')
    if(! devMod){ page.pipe(cleancss()) } page.pipe((gulp.dest(folder.dist+'css/')))})Copy the code

3. Code download address

All code examples address: [email protected]:huzhiwu1/test-gulp.git

conclusion

Because my level is limited, if there are mistakes and omissions, please see more corrections

This article was written by Hu Zhiwu on 2019/5/25. If you want to reprint it, please indicate the source.

If you think it’s good, please give it a thumbs up