这是我参与更文挑战的第16天，活动详情查看： 更文挑战
前言
在上一篇 gulp 的使用（二）：处理 html 文章里介绍了 gulp 如何处理 html。
在这篇文章里将介绍 gulp 如何处理 js。
压缩 js
gulp-uglify 是一个用于压缩 js 的插件，下面我们安装这个插件来压缩 js。
安装
npm i -D gulp-uglify
在 src 目录里新建一个 js 文件夹，里面新建一个 index.js，在 index.js 里写以下测试代码。
function print() {
console.log('测试')
}
print()
index.html 里引用 index.js。
<script src="./js/index.js"></script>
在 gulpfile.js 进行配置。
const uglify = require('gulp-uglify')
function js() {
return src(['src/js/**/*.js'])
.pipe(changed('dist/js/**/'))
.pipe(uglify())
.pipe(dest('dist/js'))
}
function watcher() {
watch('src/**/*.html', series(html)).on('unlink', function (path) {
del('dist/**/' + Path.basename(path))
})
watch('src/js/**/*.js', series(js)).on('unlink', function (path) {
del('dist/js/**/' + Path.basename(path))
})
}
exports.default = series(clean, html, js, devServer, watcher)
exports.build = series(clean, html, js)
记得也要配置 watch，监听 js 目录的变化。
我们打开 dist/js/index.js，可以看到 index.js 里面的代码被压缩了。
区分 js 开发源码和 js 库
我们经常会引入一些库，如：jq，这些库通常都不需要 gulp 额外处理，比如：压缩 js，一般的第三方库都会有压缩 js 版本，它自身已经是完整的，一般不需要被构建工具再进行加工。
我们在 src 新建一个 lib 目录，lib 目录作为存放 js 第三方库的目录，里面粘贴下载好的 jq.js。
在 gulpfile.js 设置新的任务 libJs，并写上监听和写入执行任务队列。
function libJs() {
return src(['src/lib/**/*.js'])
.pipe(changed('dist/lib/**/'))
.pipe(dest('dist/lib'))
}
function watcher() {
watch('src/**/*.html', series(html)).on('unlink', function (path) {
del('dist/**/' + Path.basename(path))
})
watch('src/js/**/*.js', series(js)).on('unlink', function (path) {
del('dist/js/**/' + Path.basename(path))
})
watch('src/lib/**/*.js', series(libJs)).on('unlink', function (path) {
del('dist/lib/**/' + Path.basename(path))
})
}
exports.default = series(clean, html, libJs, js, devServer, watcher)
exports.build = series(clean, html, libJs, js)
执行 npm run dev，我们可以发现 dist 也输出了 lib 目录，里面有个 jq.js。
防止编译出错导致进程退出
gulp-plumber 是一个可以防止编译出错导致进程退出的插件，如果程序出错，它会将异常抛到终端上，并且防止进程退出。
安装
npm i -D gulp-plumber
我们在 html 任务、js 任务、libJs 任务添加上 pipe(plumber())。
gulpfile.js
const plumber = require('gulp-plumber')
function html() {
return src(['src/**/*.html', '!src/include/**.html'])
.pipe(changed('dist'))
.pipe(plumber())
.pipe(fileinclude({
prefix: '@@', //引用符号
basepath: './src/include', //引用文件路径
}))
.pipe(htmlmin({
removeComments: true, //清除HTML注释
collapseWhitespace: true, //压缩HTML
collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input />
removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: true, //删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
minifyJS: true, //压缩页面JS
minifyCSS: true //压缩页面CSS
}))
.pipe(dest('dist'))
}
function js() {
return src(['src/js/**/*.js'])
.pipe(changed('dist/js/**/'))
.pipe(plumber())
.pipe(uglify())
.pipe(dest('dist/js'))
}
function libJs() {
return src(['src/lib/**/*.js'])
.pipe(changed('dist/lib/**/'))
.pipe(plumber())
.pipe(dest('dist/lib'))
}
完整项目
2021.8.30，我重新整理了一遍项目，已放到 gitee 上，大家可以 clone 下来直接用，代码的提交记录顺序和我这个系列文章教程顺序是一致的，大家看到哪一篇文章时，就回滚代码到哪一个版本，这样看项目代码会更直观。
gitee 库链接：gitee.com/only1zhuo/g…
