gulp

Multiple developers work together to develop a project. Each developer is responsible for different modules.
This results in a complete project consisting of many "code sections";

Some pre-processors such as less and sass are used to reduce the maintenance cost of CSS, and these pre-processors need to be parsed eventually.

Merging css, javascript and compressing html, css, javascript and images can speed up the opening of web pages and improve the performance.
This series of tasks is almost impossible to accomplish by hand, and can be easily accomplished by building tools.
The so-called construction tools refer to software tools that can help us achieve a series of tasks such as merging, compression, validation, preprocessing and so on through simple configuration.
Common building tools include: Grunt, Gulp, F.I.S. (Baidu), webpack

1. Introduction to gulp

• gulp is written in nodejs.
• gulp is a flow-based automated build tool
• After the website development is completed, we need to do project construction before we can go online.
• Project construction:
  
  • Code compression. html css js
  • Code obfuscation
  • Document merging
  • Other automation work. sass to css.
• That's what gulp does.

2. gulp installation

• First, you need to install gulp globally. If you have installed gulp globally before, you can omit this step.

npm install gulp -g 
The globally installed plug-ins can be used anywhere.
Locally installed plug-ins can only be used in current projects.

• Local installation is also required, in the project directory.

npm install gulp --save

3. gulp usage

• Create a gulpfile.js file in the project directory.
• Write the build code in this file.
• Introduce the local gulp module first

var gulp = require('gulp');
//This gulp object can be built with plug-ins.

3.1 Create Tasks

• gulp executes each build in the form of a task.
• Tasks can be created by calling the task method of gulp objects
  Parametric 1: Task name
  Parametric 2: Callback function, what to do when performing the task.

gulp.task("testTask",function(){
    console.log();
});

• At this point, we create a task testTask, which does the callback function.

3.2 Task Implementation

• How to perform this gulp task?
• Open the cmd tool and switch the working path to the project directory
• Use gulp task name in command line window to execute specified tasks.

gulp testTask

• At this point, a task called testTask will be executed.

4. Compressing CSS gulp-cssmin

• You need to create a task to compress css.

var cssmin = require("gulp-cssmin");
gulp.task("yscss",function () {
    //1. This task is used to compress css.
    //  So first you need to specify the css file that needs to be compressed
    //  Call the src method of gulp object to specify the path of the file to be processed.
    gulp.src("./src/assets/css/reset.css")
        .pipe(cssmin())
        .pipe(gulp.dest("./dist/assets/css"));
    //2.pipe() Pipeline Understanding Valve Image Understanding.
    //3. Each valve in the pipeline does different things. Different things need plug-ins to complete.
    //  Plug-ins for compressing css. gulp-cssmin
    //  Install plug-ins and introduce gulp-cssmin
    //  After the introduction, there is actually a function.
    //  Calling it in the pipeline is equivalent to installing a valve in the pipeline.
    //4. At the last level of the pipeline, the dest method of gulp object should be invoked to set the path after storage.
});

5. File monitoring watch

• gulp object provides a watch method
• The function of this method is to monitor the changes of specified files.
• Once changed, perform the assigned tasks

gulp.task("watchCss",function () {
    //Monitor the specified css file. You can use wildcards to automatically perform yscss tasks once the file changes
    gulp.watch("./src/assets/css/reset.css",["yscss"]);
})

• The second parameter of the watch method can also be a callback. When the file changes, the callback is executed.

5.gulp-uglify compression js

• Compressing obfuscated js code requires gulp-uglify plug-in support. Install the plug-in using npm.

//1. Introducing gulp module
var gulp = require("gulp");
//2. Introduce gulp-uglify module. It returns a function.
var uglify = require("gulp-uglify");
//3. New tasks
gulp.task("ysjs",function(){
    gulp.src("./js/app.js")
        .pipe(uglify())
        .pipe(gulp.dest("./dist/js"));
});

6.gulp-concat merge file

• File merging requires the use of gulp-concat plug-in support. Install the plug-in using npm.

gulp.task("concatFile",function(){
    gulp.src(["./src/js/app.js","./src/js/demo.js"])
    .pipe(concat("all.js"))//Merge the files to be processed, and the name of the new file after merging is all.js
    .pipe(uglify())//Re-confusion
    .pipe(gulp.dest("./dist/js"));
});

7.gulp-htmlmin compresses html files

• Compressing html code requires the use of gulp-htmlmin plug-in support. Install the plug-in using npm.

gulp.task("yshtml",function(){
    gulp.src("./src/index.html")
    .pipe(htmlmin({
        collapseWhitespace:true, //Despace
        removeComments:true//Decomment
    }))
    .pipe(gulp.dest("./dist"))
});

8.gulp-sass converts sass to css

• You need to use gulp-sass plug-in support and install it using npm
• less is the same.

gulp.task("sass2css",function(){
    gulp.src("./src/css/index.scss")
    .pipe(sass())
    .pipe(cssmin())
    .pipe(gulp.dest("./dist/css"));
});

9. Call the src method to specify the path of the file to be processed. The path can use wildcards.

• . / src/.js represents the. js file that matches the src direct directory.
• JS files in any directory under. / src/*/.js src directory.

  gulp.task("hejss",function(){
    gulp.src("./src/**/*.js")
    .pipe(concat("big.js"))
    .pipe(gulp.dest("./dist"));
});

gulp.task("yasuoCss",function(){
    gulp.src("./src/assets/css/*.css",
            {base:"./src"})     //The base here specifies the basic road strength (with folders)
        .pipe(cssmin())
        .pipe(gulp.dest("./dist")); //Pass to the directory we specified
});

Five methods for daily work of gulp objects

• The gulp object itself has only five methods.
  
  1. The task method creates a task.
  2. src sets the path of the file to be processed.
  3. pipe Setting the Gate in Pipeline
  4. dest method. Store the path of the file after processing.
  5. watch method. Monitor. Automatically execute tasks once files have changed.