bzdww

Get answers and suggestions for various questions from here

The use of front-end build system Gulp and common plug-ins recommended - next

cms
Part I: front-end build system Gulp use with popular plugins recommended - Part I

Small icon transcoded to inline base64

  • Plugin

- gulp-base64

  • Introduction

Transcode small icons referenced in CSS into base64-encoded data URI strings, reducing the number of additional http requests.

  • use

The use of the plugin is very simple, nothing is specified directly pipe to the plugin is OK

    // 基础示例
    gulp.task('build', () => {
        gulp.src('./css/*.css')
            .pipe(base64())
            .pipe(concat('main.css'))
            .pipe(gulp.dest('./public/css'));
    });

Of course, there are several optional parameters that are simple but very easy to use:

    gulp.task('build', () => {
        gulp.src('./css/*.css')
            .pipe(base64({
                baseDir:        'public',
                extensions:     ['svg', 'png'],
                exclude:        [/\.server\.(com|net)\/dynamic\//, '--live.jpg'],
                maxImageSize:   8*1024, // bytes 
                debug:          true
            }))
            .pipe(concat('main.css'))
            .pipe(gulp.dest('./public/css'));
    });

I believe that the English of the big guys is OK, the parameter names are also very intuitive, so I will not explain them.

Tips: You can use regulars (for example: /\.jpg#datauri$/i ) in the extensions parameter to match a reference file with the specified hash.

This way you can manually specify which files are transcoded into data URIs by adding a corresponding hash (for example: background-image: url(./images/icon.jpg#datauri); ) at the end of the file during development !

Build an exception capture

Using Gulp build process generally has JS, Less / SCSS compile transcoding process, this process is more prone to errors, but the default practice of Goose Gulp is that as long as the plugin throws an exception, the entire Gulp build process stops. Run .

That is to say, even if the error is fixed and saved in time after the error, you need to restart the build system (that is, you need to re-enter gulp [TASKNAME] in the CLI ), which is obviously a lot of steps.

Is there any way to prevent the build process from breaking down when the build fails? Of course! This is what gulp-plumber, one of Gulp's official build plugins , does. Plumbers, the name is very appropriate, haha~

There is another problem. If the Terminal window is not in the visible range of the screen, the build is wrong. I don't know what to do? Stupidly waiting for the construction to be completed, waited for a long time and found no response? After calling the terminal, I found that the build failed. Here uses another auxiliary plug-gulp-util, you can use it to make mistakes when building a computer beep - beep, indicating that we failed to build quickly debug!

  • Plugin

1. GULP-Plumber

2. GULP-util

  • Introduction

1. gulp-plumber : build exception catches to prevent the build process from collapsing

2. gulp-util: This plugin is very strong Ha, a collection of many small Gulp commonly used tools such as log (), colors and so on, just to use a beep () & log, is to make the computer beep - beep of Then throw an exception, haha

  • use

    var gulp    = require('gulp'),
        gutil   = require('gulp-util'),
        babel   = require('gulp-babel'),
        concat  = require('gulp-concat'),
        plumber = require('gulp-plumber');
    
    gulp.task('build', () => {
        gulp.src('./_src/js/*.js')
            // 最先 pipe 到 plumber 中,以便出现异常前准备捕获
            .pipe(plumber({ errHandler: e => {
                gutil.beep(); // 哔~ 的响一声
                gutil.log(e); // 抛出异常
            }}))
            .pipe(babel())
            .pipe(concat('all.js'))
            .pipe(gulp.dest('./public/js'));
    });

Automatically merge sprite

  • Plugin

- gulp-spriter

  • Introduction

Help front-end engineers merge sliced ​​images from css code into sprites and support retina images.

There is a detailed introduction to the use of Chinese on NPM, not much to introduce, easy to use

Use the watch plugin to improve build efficiency

Gulp.src This method is very familiar to everyone, the Glob is passed to match and read the document stream, but the shortcoming of this method is obvious, that is, all matching files will be read ( even if the file has not been modified ), so One obvious problem that is caused is:

With the development of the project, more and more files are being built, and the construction speed is getting slower and slower.

Of course, we can use Gulp's built-in watch method to circumvent this problem, but this method has a small problem. I don't know if you have found out that it can't detect the event of creating a new file. It feels very unreasonable. So now the gulp-watch plugin is generally used. This plugin can customize the trigger event, and the plugin provides a callback mechanism to familiarize yourself with the console.

  • Plugin

- gulp-watch

  • Introduction

Monitor file changes in real time (customizable trigger events and callback methods)

  • use

    var gulp    = require('gulp'),
        watch   = require('gulp-watch'),
        gutil   = require('gulp-util'),
        moment  = require('moment'),
        colors  = require('colors');
    
    gulp.task('js', () => {
        watch('./_src/js/*.js', (vinyl) => {
                console.log( [${ moment().format('HH:mm:ss').gray }] ${ vinyl.basename.yellow } rebuilding. );
            })
            .pipe(plugin1())
            .pipe(plugin2())
            .pipe(gulp.dest('./public/js'));
    });

The usual way to do this is as follows. The default monitoring ['add', 'change', 'unlink'] is usually sufficient. You can use options.events to manually set the type of event being monitored.

The callback function fires each time an event is detected, and the file details can be retrieved via the parameter vinyl object.

A simple build process monitoring is implemented in the previous watch callback, and a more complete solution is recommended to use gulp-notify

Other plugins to improve the build experience

The above people may have noticed that gulp-moment and gulp-colors are used. These two plug-in-independent projects are purely two plug-ins introduced to better monitor the build state.

  • Plugin

1. GULP-Moment

2. gulp-colors

  • Introduction

1. gulp-moment: I believe that many small partners have used the moment.js tool in browser-side, mainly in the calculation and formatting of time. Moment.js | Home has a detailed introduction, it is very convenient to use!

2. gulp-colors: This is used to set the color of the CLI output text. As long as it is used after any string, you can change the color and style of the text output to the terminal.

  • use

1. gulp-moment : moment().format('HH:mm:ss') formats the current time format, other references to Moment.js | Home documentation;

2. gulp-colors : '*.html'.yellow , add . + COLOR to any string to change the color. Colors.js has a variety of colors and styles to choose from.

---

Well, finally finished, the above is a common method and plug-in for using Gulp for front-end construction, I hope to help you.


If you have any questions, please feel free to correct me.


On the sauce~

Better reading experience stamp → front-end build system Gulp use and recommended plug-ins recommended | Bear D blog

-END