gulp新一代前端构建利器-前端构建工具

发布时间：2023-02-10 09:33 浏览次数：次作者：佚名

Part 2：前端构建系统Gulp的使用及常用插件推荐-part 1

小图标被转码为内联 base64

-gulp-base64

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

该插件的使用非常简单。不指定任何东西直接管道到插件是可以的。

    // 基础示例
    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'));
    });

相信大家都英文没问题，参数名称也很直观，就不多解释了。

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

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

构建异常捕获

在使用Gulp构建的过程中，一般会有一个JS、Less/SCSS编译转码的过程。这个过程比较容易出错。但是，Gulp 的默认方法是只要一个插件抛出异常，整个 Gulp 构建过程就会停止。跑步。

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

前端构建工具_厉害的古代神兵利器代成称_gulp新一代前端构建利器

有什么方法可以防止构建失败时构建过程中断？当然有！这就是 Gulp 官方推荐的构建插件之一 gulp-plumber 所做的。水管工，这个名字很贴切，哈哈~

还有一个问题。如果Terminal窗口不在屏幕可见范围内，构建出错不知道怎么办？愚蠢地等待构建完成但没有任何反应？调出终端才发现构建失败？这里使用了另一个辅助插件gulp-util。可以用它让电脑发出哔哔声~当构建出现错误时，提醒我们构建失败，赶紧调试！

1. 水管工

2. 吞咽工具

1. gulp-plumber : 构建异常捕获，防止构建过程崩溃

2.gulp-util：这个插件其实很强大。它集成了很多Gulp常用的小工具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'));
    });

自动合并 Sprite 贴图

-gulp-spriter

帮助前端工程师将css代码中的切片图片合并成sprite图片，并支持视网膜图片。

npm上有详细的中文介绍，介绍不多，简单易用使用watch插件提高构建效率

gulp.src方法相信大家都很熟悉了，传入glob来匹配读取文档流，但是这种方法的缺点也很明显，就是会读取所有匹配到的文件（即使文件没有被修改），所以一个明显的问题是：

随着项目的发展gulp新一代前端构建利器，文件越来越多，构建速度越来越慢。

当然我们可以使用Gulp内置的watch方法来避免这个问题，但是这个方法有一个小问题。不知道大家有没有注意到，就是检测不到有新文件的事件，感觉挺不合理的。所以现在一般都是使用插件gulp-watch。本插件可以自定义触发事件，插件提供的回调机制可以配合熟悉的控制台，非常方便的观察构建过程。

-gulp-watch

gulp新一代前端构建利器_前端构建工具_厉害的古代神兵利器代成称

实时监控文件变化（可自定义触发事件和回调方式）

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