Proficiency in common gulp plug-ins

What is gulp?

install

What other options do you have besides gulp

1.Webpack
2.Grunt

Where to find the best gulp plug-in

1.gulp-plugins search
Each plug-in in in the list has a category label. You can click on the relevant label to see which plug-ins are similar to each other.

2.npm plug-in search
By typing gulp, you can list all plug-ins with gulp package names. You can also rank search results from several latitudes, such as best, popularity, code quality, maintenance, etc.

3.team's summary of other people's resources
This team summarizes the common gulp plug-ins in more detail, each with github connections. It also lists gulp-related video resource connections.

gulp that I usually use

• css

  • gulp-autoprefixer
  • gulp-less
  • gulp-csso
  • gulp-uncss
  • gulp-cssmin

• js

  • gulp-babel
  • gulp-uglify
• html
  
  • gulp-ejs
  • gulp-useref
  • gulp-html-replace
  • gulp-rev
  • gulp-rev-replace
• image
  
  • imagemin

• file

  • gulp-header
  • gulp-concat
  • gulp-ext-replace
  • gulp-clean

• server

  • connect
• Other
  
  • gulp-if

Usually, after defining gulpfile.js file, it will basically remain unchanged. It will often change the path of the project, so here I will define the path of a project.
If you want to configure gulpfile.js file separately for your project, it's also convenient to change basepath

var gulp = require('gulp'),        /*Load gulp module*/
    projectPath = "task1",         /*Define project name*/
    basePath = 'project/' + projectPath + '/';   /*Define basic paths*/

Name: gulp-header
Description: Adding information to the file header
snippet:

var header = require('gulp-header'); /*Load gulp-header module*/
var pkg = require("./package.json"); /*Get the json file*/
var banner =                         
"/** \n\
* " + pkg.name + " V" + pkg.version + " \n\
* By Xiao Zhen \n\
*/\n";

Name: gulp-less
Description: less precompiled gulp plug-in
snippet:

var less = require('gulp-less');                  
var autoprefixer = require('gulp-autoprefixer');  /*Add Browser Prefix Plug-in*/

gulp.task('less', function() {
    return gulp.src([basePath + 'src/css/*.less'])     /*Matching task file*/
        .pipe(less())                 /*less Compile*/
        .pipe(autoprefixer())         /*Add Browser Prefix*/
        .pipe(header(banner))         /*Add File Header*/
        .pipe(gulp.dest(basePath + 'src/css/'));      /*Save task results*/

});

Name: gulp-csso
Description: csso optimization, merging mergeable css
snippet:

var csso = require('gulp-csso');

gulp.task('csso', function() {
    return gulp.src(basePath + 'dist/css/*.css')
        .pipe(csso())
        .pipe(gulp.dest(basePath + 'dist/css/'))
});

Name: gulp-uncss
Description: gulp plug-in removes unused css from css files
snippet:

var uncss = require('gulp-uncss');
gulp.task('uncss', ["csso", "cssmin"], function() {
    gulp.src(basePath + 'dist/css/*.css') 
        .pipe(uncss({
            html: [basePath + 'dist/*.html'] /*Here is all the html directories for the project*/
        }))
        .pipe(gulp.dest(basePath + 'dist/uncss')); 
})

Name: gulp-cssmin
Description: css compression
snippet:

var cssmin = require('gulp-cssmin');
var ext_replace = require('gulp-ext-replace'); /*File extension replacement plug-in*/
gulp.task('cssmin', ["less"], function() {/*Execute less task first, then cssmin task*/
    gulp.src([basePath + 'dist/css/*.css',
     '!' + basePath + 'dist/css/*.min.css'])
        .pipe(cssmin())
        .pipe(header(banner))
        .pipe(ext_replace('.min.css'))
        .pipe(gulp.dest(basePath + 'src/css/'));
});

Name: gulp-babel
Description: babel compiles es6 into es5
snippet:

var babel = require('gulp-babel');

gulp.task('babel',function(){
    return gulp.src(basePath + 'src/js/*.js')
            .pipe(babel({
                presets:['es2015']
            }))
            .pipe(gulp.dest(basePath+'dist/js/'));
})

Name: gulp-uglify
Description: js confusion compression
snippet:

var uglify = require('gulp-uglify');
var ext_replace = require('gulp-ext-replace'); /*File extension replacement plug-in*/
gulp.task('uglify', function() {
    return gulp.src([basePath + 'dist/js/*.js', '!' + basePath + 'dist/js/*.min.js'])
        .pipe(uglify({
            preserveComments: "license"
        }))
        .pipe(ext_replace('.min.js'))
        .pipe(gulp.dest(basePath + 'dist/js'));
});

Name: gulp-if
Description: Control flow runs a task conditionally.
snippet:

var gulpif = require('gulp-if');
var concat = require('gulp-concat'); /*Merge files to reduce network requests*/
var condition = true;               /*Judgement condition*/
gulp.task('gulpif', function() {
    gulp.src(basePath + 'dist/js/*.js')
        .pipe(gulpif(condition,uglify(),concat('all.js'))) 
        /* condition Uglify () is executed for true, and concat('all.js') is executed for else.*/
        .pipe(gulp.dest(basePath + "dist/js/"));
});

Name: gulp-imagemin
Description: Image Min Picture Compression
snippet:

var imagemin = require('gulp-imagemin');
gulp.task('imagemin', function() {
    gulp.src(basePath + 'src/images/*.{png,jpg,gif,ico}')
        .pipe(imagemin({
            optimizationLevel: 3, //Type: Number default: 3 value range: 0-7 (optimization level)
            progressive: false, //Type: Boolean default: false lossless compression jpg images
            interlaced: true, //Type: Boolean default: false interlaced gif for rendering
            multipass: true //Type: Boolean default: false optimizes svg several times until it is fully optimized
        }))
        .pipe(gulp.dest(basePath + 'dist/images/'));
});

Name: gulp-ejs
Description: It's useful to merge html templates to generate demonstration html documents in batches
snippet:

var ejs = require("gulp-ejs");
gulp.task('ejs', function() {
    return gulp.src([basePath + 'src/*.html', 
    "!" + basePath + "./src/_*.html"])
        .pipe(ejs({}))
        .pipe(gulp.dest(basePath + "dist/"));
});

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>ejs</title>
</head>
<body>
    <% include _header.html %>
</body>
</html>

<!-- _header.html -->
<header>
   Here's the public head.
</header>

Name: gulp-useref
Description: Parse the building blocks in HTML files and merge js and css references in HTML pages.
Function: The html file in src refers to multiple style files, merges multiple files into * all.css by building tool files. In the new html file, the references of previous style files are automatically deleted, and the * all.css file is re-referenced.
snippet:

var useref = require('gulp-useref');
gulp.task('useref', function() {
    gulp.src(basePath + 'src/*.html')
        .pipe(useref())
        .pipe(gulp.dest(basePath + "dist/"))
});

The grammar of building blocks:
<!-- build:<type>(alternate search path) <path> <parameters> -->
... HTML Markup, list of script / link tags.
<!-- endbuild -->
<type>: Three types, js, css, remove; remove removes the content from the building block

<!-- source file -->
<html>
<head>
    <!-- build:css css/combined.css -->
    <link href="css/one.css" rel="stylesheet">
    <link href="css/two.css" rel="stylesheet">
    <!-- endbuild -->
</head>
<body>
    <!-- build:js scripts/combined.js -->
    <script type="text/javascript" src="scripts/one.js"></script> 
    <script type="text/javascript" src="scripts/two.js"></script> 
    <!-- endbuild -->
</body>
</html>

<!-- Result -->
<html>
<head>
    <link rel="stylesheet" href="css/combined.css"/>
</head>
<body>
    <script src="scripts/combined.js"></script> 
</body>
</html>

Name: gulp-html-replace
Description: Replacing building blocks in html is similar to useref, but renames can be written in task configurations
snippet:

var htmlreplace = require('gulp-html-replace');
gulp.task('htmlreplace', function() {
    gulp.src(basePath + 'src/*.html')
        .pipe(htmlreplace({
           'cssbuild': 'styles.min.css',
           'jsbuild': 'js/bundle.min.js'                
           /* cssbuild Is the buildName defined in index.html*/
        }))
        .pipe(gulp.dest(basePath + "dist/"))
});

Grammar of building blocks:
<!-- build:<name> -->
Everything here will be replaced
<!-- endbuild -->

<html>
<head>
    <!-- build:cssbuild  -->
    <link href="css/one.css" rel="stylesheet">
    <link href="css/two.css" rel="stylesheet">
    <!-- endbuild -->
</head>
<body>
    <!-- build:jsbuild  -->
    <script type="text/javascript" src="scripts/one.js"></script> 
    <script type="text/javascript" src="scripts/two.js"></script> 
    <!-- endbuild -->
</body>
</html>

Name: gulp-rev
Description: Add hash value to static resource file name: unicorn. CSS => unicorn-d41d8cd98f. CSS
snippet:

var rev = require('gulp-rev');
gulp.task('rev', function() {
    gulp.src(basePath + 'dist/css/*.css')
        .pipe(rev())
        .pipe(gulp.dest(basePath + "dist/css/"))
});

Name: gulp-rev-replace
Description: Rewrite the file name renamed by gulp-rev in html
snippet:

var revReplace = require('gulp-rev-replace');
gulp.task('revreplace', function() {
    gulp.src(basePath + 'src/*.html')
        .pipe(useref()) // Replace css and js referenced in HTML
        .pipe(rev()) // Add hash version number to css,js,html
        .pipe(revReplace()) // Replace referenced css and js with versioned names
        .pipe(gulp.dest(basePath + "dist/"))
});

Name: gulp-connect
Description: connect local server
snippet:

var connect = require("gulp-connect");
gulp.task('server', function() {
    connect.server({

        root: './' + basePath + 'dist/',

        livereload: true

    });
});

/*html File reload*/
gulp.task('htmlreload', function() {
    gulp.src(basePath + 'dist/*.html')
        .pipe(connect.reload());
});

gulp watch
Description: gulp observes, defines which files are changed and which gulp tasks are performed
snippet:

gulp.task('watch', function() {
    gulp.watch(basePath + 'src/css/*.less', ['less','html']);
    gulp.watch(basePath + 'src/*.html', ['ejs',,'html']);
  });

gulp task
Description: gulp task, defines gulp task name and task flow
snippet:

gulp.task("default", ['watch', 'server']);
gulp.task("build", ['ejs', 'imagemin', 'uglify', 'uncss']);