1. Use gulp

Gulp is a front-end automation build tool based on Node.js. It is mainly used to configure the application to automatically handle static resources. You can use gulp to build automated workflows (front-end integrated Development environment). Automatic page refresh, CSS preprocessing, code detection, image compression, and gulp configuration are all done automatically by gulp with a simple command line. It simplifies your work and allows you to focus on feature development while reducing human error and improving the efficiency and quality of development.

Gulp 1.1 installation

First make sure you have installed the NodeJS environment correctly, and then install the gulp environment globally

npm install -g gulp

Then switch to your project folder and install gulp development dependencies for your project separately

npm install gulp –save-dev

1.2 Gulp Configuration and Usage

First, create gulp configuration file gulpfile.js in gulp project directory, and then define our gulp task in this file

var glup=require("gulp");// Import the gulp module
Copy the code

The usage process of GULP is as follows:

The gulp.task() task is used to register the stream to gulp.src(), and the pipe method is used to import the stream to gulp.dest() The gulp.dest() method writes the contents of the stream to a file.

1.3 API provided by GULP:

Registered task

gulp.task(name[,deps],fn)
Copy the code

Parameter: name is the task name, which is used when executing the task. Deps is an array of other tasks that the currently defined task needs to depend on. The currently defined task is executed after all dependent tasks are completed. If there are no dependencies, omit the argument fn is a callback function that represents what the task does

Read file Reads a local file into gulp memory

gulp.src(globs[, options])
Copy the code

Parameter: globs is the path from which the target source file is read. Opttions is a configurable object that is usually not needed

Output to file Outputs data in memory to a local file

gulp.dest(path[,options])
Copy the code

Parameter: path is the path to the destination file where the data will be output. Opttions is a configurable object that is usually not needed

Monitoring file changes Used to monitor the changes of some or some files, you can perform a callback function when the changes, using it to perform the corresponding task

 gulp.watch(globs[,opts]),tasks);
Copy the code

Globs is the file matching pattern to be monitored. The rules and usage are the same as glob in the gulp.src method. Opts is a configurable object

1.4 gulp plug-in

We need to deal with file merge, compression and other operations, which are not provided in the interface, are put in the plug-in.

1.4.1 Plug-in Download:

NPM install plugin name –save-dev

Gulp-concat: Merge files (JS/CSS)

Gulp-uglify: compresses JS files

Gulp-rename: renames a file

Gulp-less: compiles less

Gulp-sass: compiles sass

Gulp-clean-css: compresses CSS files

Gulp-livereload: Real-time automatic compilation refresh

Gulp-htmlmin: compresses HTML files

Gulp-connect: hot load, configure a server

Gulp-load-plugins: package plugins (which contain all other plugins)

1.4.2 Using plug-ins:

Install the plugin to the current project by using the NPM install plugin name –save-dev. You can either introduce the plugin at the top of gulpfile.js via require or use gulp-load-plugins when creating tasks This plugin will automatically load the gulp plugins in the package.json file for you, without having to import each one in turn in the gulpfile.js declaration

const gulp = require("gulp"); // Import the gulp module
const$=require("gulp-load-plugins") ();/ / introduce gulp - load - plugins
Copy the code

In use, instead of using require to introduce each plug-in in turn, use $. The effect of the plug-in name () is the same as the require effect

Merge file: gulp-concat

gulp.task('concat-js'.function(){
    return gulp.src('app/! *.js') // Merge files
         .pipe(concat('all.js')) // Perform the merge
         .pipe(gulp.dest('dist/js')) // Output file
})
Copy the code

Compile Sass: gulp-sass

gulp.task('sass-css'.function(){
   return gulp.src('app/sass/! *.sass') // The compiled file
        .pipe(sass()) // Perform compilation
        .pipe(gulp.dest('dist/css')) // Output file
})
Copy the code

Compile less: gulp-less

gulp.task('less-css'.function(){
   return gulp.src('app/less/! *.less') // The compiled file
        .pipe(less()) // Perform compilation
        .pipe(gulp.dest('dist/css'); // Output file
})
Copy the code

Automatic prefix: gulp-autoprefixer

gulp.task('autoprefixer'.function(){
   return gulp.src('app/css/*.css') // The compiled file
        .pipe(autoprefixer()) // Perform compilation
        .pipe(gulp.dest('dist/css'); // Output file
})
Copy the code

Compressed image: gulp-imagemin

gulp.task('imagemin'.function(){
   return gulp.src('app/images/*.{jpg,png,JPG,PNG}') // Optimized image
        .pipe(imagemin()) // Perform optimization
        .pipe(gulp.dest('dist/images')) / / output
})
Copy the code

Compressed HTML file: gulp-minify- HTML

gulp.task('min-html'.function(){
   return gulp.src('app/html/*.html') // Compressed file
        .pipe(minifyHtml()) // Perform compression
        .pipe(gulp.dest('dist/html')) // Output file
})
Copy the code

Zip the CSS file: gulp-minify- CSS

gulp.task('min-css'.function(){
   return gulp.src('app/css/*.css') // Compressed file
        .pipe(minifyCss()) // Perform compression
        .pipe(gulp.dest('dist/css')) // Output file
})
Copy the code

Zip js file: gulp-uglify

gulp.task('min-js'.function(){
   return gulp.src('app/js/*.js') // Compressed file
        .pipe(uglify()) // Perform compression
        .pipe(gulp.dest('dist/js')) // Output file
})
Copy the code

Rename the js file: gulp-rename

gulp.task('rename-js'.function(){
   return gulp.src('app/js/*.js') // Rename the file
        .pipe(rename('app.min.js')) // Perform rename and rename the name
        .pipe(gulp.dest('dist/js')) // Output file
})
Copy the code

Es6 to ES5: [email protected] babel-core babel-PRESET – ES2015

// Import only one:
const babel = require('gulp-babel')
gulp.task('babel-js'.function() {
    return gulp.src('./src/js/**') // Transcode the file
     .pipe(babel({presets: ['es2015']// Set transcoding rules
     .pipe(uglify()) // Perform transcoding
     .pipe(gulp.dest('./dist/js')) // Output file
Copy the code

Create local server: gulp-connect

gulp.task('server'.function(){
    return connect.server({
        root:'dist'.// The root of the server
        port:8080.// Server address, default is 8080 without this configuration item
        livereload:true // Enable the real-time refresh function
    });
});
Copy the code

Live preview: Gulp-Connect

gulp.task('reload'.function(){
    return gulp.src('app/index.html') // Specify the source file
        .pipe(gulp.dest('dist')) // Copy to dist directory
        .pipe(connect.reload()) // Tell the browser to restart
});
Copy the code

Code check: gulp-jshint

gulp.task('jslint'.function () {
    return gulp.src('app/! *.js') // Check the file
        .pipe(jshint()) // Perform code checks
        .pipe(jshint.reporter()) // Output the check result
});
Copy the code

Clear the target folder: gulp-clean

gulp.task('clean'.function(){
    return gulp.src('./dist')  // Clear the folder
               .pipe(clean()) // Perform cleanup
});
Copy the code

1.4.3 Use gulp.watch() to monitor file changes and automatically execute tasks

Creating an Auto Task

gulp.task( 'auto'.function(){
  gulp.watch( 'app/! *.js'['concat-js']); gulp.watch('app/sass/! *.sass'['sass-css']); gulp.watch('app/less/! *.less'['less-css']); gulp.watch('app/css/*.css'['autoprefixer']); gulp.watch('app/images/*.{jpg,png,JPG,PNG}'['imagemin']); gulp.watch('app/html/*.html'['min-html']); gulp.watch('app/css/*.css'['min-css']); gulp.watch('app/js/*.js'['min-js']); gulp.watch('./src/js/**'['babel-js']); gulp.watch('app/index.html'['reload']); gulp.watch('app/! *.js'['jslint']); }); gulp.task('default'['auto']);// Set auto to the default task
Copy the code

The gulp command is executed

2. Comparison of gulp and Webpack

Basic differences between Gulp and Webpack:

Gulp is an automatic construction tool that emphasizes the workflow of front-end development. It can compress js, HTML, CSS and IMG. It can compress multiple JS files or CSS into a single file and can be compressed into one line to reduce file size, speed up the request and reduce the number of requests. And gulp has task definitions to handle transactions to build the overall process, which is a flow-based automated build tool.

Webpack is a front-end construction tool that emphasizes modular development. It is a front-end modular solution that focuses more on module packaging and realizes modular development and file processing. His idea is that “everything is a module”, we can think of all resources in development (images, JS files, CSS files, etc.) as modules, it can load each module on demand, without loading useless or redundant code. Loaders and plugins process resources and package them into front-end resources suitable for production deployment, hence the name front-end modular packaging tool.

Gulp vs. Webpack:

Gulp is a tool chain, build tool, can cooperate with a variety of plug-ins to do JS compression, CSS compression, less compilation instead of manual implementation of automation work

1. Build tools
2. automation
3. Efficiency enhancement

Webpack is a file packaging tool, can put the project of a variety of JS, CSS files and other packaged into one or more files, mainly used for modular scheme, pre-compiled module scheme

1. Packaging tools
2. modular
3. Compile the module code scheme

3. References:

Official website: gulpjs.com/ Chinese website: www.gulpjs.com.cn/docs/