前端构建系统 Gulp 的使用与常用插件推荐 - 下篇

最新推荐文章于 2024-08-26 08:00:12 发布

barnett_y

最新推荐文章于 2024-08-26 08:00:12 发布

阅读量2k

点赞数

分类专栏：【Gulp自动化工具点滴知识】

【Gulp自动化工具点滴知识】专栏收录该内容

28 篇文章 0 订阅

订阅专栏

https://zhuanlan.zhihu.com/p/24984797

小图标转码为内联 base64

插件

- gulp-base64

简介

将 CSS 中引用的小图标转码为 base64 编码的 data URI 字符串，减少额外的 http 请求数。

使用

插件的使用非常简单，什么都不指定直接 pipe 到插件就OK了

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

当然也有简单但是十分好用的几个可选参数：

    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'));
    });

相信大家伙儿的英文都 OK，参数名称也很直观，就不加以说明啦

Tips：在 extensions 参数中可以使用正则（例如：/\.jpg#datauri$/i）匹配带有指定 hash 的引用文件，

这样在开发过程中就可以通过在文件末尾加上对应的 hash （例如： background-image: url(./images/icon.jpg#datauri); ）手动指定哪些文件转码成 data URI 嘞！

构建异常捕获

使用 Gulp 构建过程中一般会有 JS 、 Less / SCSS 编译转码的过程，这个过程是比较容易发生错误的，然鹅 Gulp 的默认做法是只要有插件抛出异常，那么整个 Gulp 的构建进程即停止运行。

也就是说即使出错后及时修正了错误并且保存了，还需要重新启动构建系统（即需要在 CLI 中重新输入 gulp [TASKNAME] ），这显然是很多余的一个步骤。

有没有什么方法在构建出错的时候不让构建进程 break down 呢？当然有！这就是 Gulp 官方推荐的构建插件之一 gulp-plumber 来做的事情，水管工，名字很贴切吧，哈哈~

还有一个问题，如果 Terminal 窗口没在屏幕的可视范围内，构建出错了我不知道怎么办？傻傻地等着以为构建会完成等了半天发现没有任何反应？调出终端才发现构建失败了？这里就用到了另一个辅助插件 gulp-util ，可以用它在构建出错的时候让电脑 哔 ~ 的响一声，提示咱构建失败了赶紧 debug ！

插件

1. gulp-plumber

2. gulp-util

简介

1. gulp-plumber ：构建异常捕获，防止构建进程崩掉

2. gulp-util ：这个插件其实很强大哈，集合了许多 Gulp 中常用的小工具，例如 log() 、 colors 等等，这里只用到了 beep() & log ，就是让电脑 哔 ~ 的响一声然后抛出异常，哈哈

使用

    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'));
    });

自动合并雪碧图

插件

- gulp-spriter

简介

帮助前端工程师将 css 代码中的切片图片合并成雪碧图，支持 retina 图片。

NPM 上有详细的中文使用介绍，不多介绍，简单好用

使用 watch 插件提高构建效率

gulp.src 这个方法相信大伙儿都特别熟悉了，传入 Glob 来匹配并读取文档流，但是这个方法的缺点也很明显，就是会读取全部匹配的文件（即使文件未作修改），这样导致的一个明显问题就是：

随着项目的开发，文件越来越多，构建速度越来越慢。

当然，我们可以使用 Gulp 内置的 watch 方法来规避这个问题，不过这个方法有一个小问题不知道大家有没有发现，就是它检测不到新建文件的事件，感觉蛮不合理的。所以现在一般使用 gulp-watch 这个插件，这个插件可以自定义触发事件，而且通过插件提供回调机制配合大家熟悉的 console 可以很方便的观察到构建流程。

插件

- gulp-watch

简介

实时监测文件变化（可自定义触发事件与回调方法）

使用

    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'));
    });

通常的使用方法就是这样了，默认监测 ['add', 'change', 'unlink'] 通常是够用的，可以使用 options.events 来手动设置监测的事件类型。

回调函数会在每次监测到事件时触发，可以通过参数 vinyl 对象取得文件的详细信息。

前面的 watch 回调中实现了一个简单的构建流程监控，更完善的解决方案推荐使用 gulp-notify