这是我参与更文挑战的第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/**/*.html' + Path.basename(path))
  })
  watch('src/js/**/*.js', series(js)).on('unlink', function (path) {
    del('dist/js/**/*.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/js 新建一个 lib 目录，lib 目录作为存放第三方库的目录，里面粘贴下载好的 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/**/*.html' + Path.basename(path))
  })
  watch('src/js/**/*.js', series(js)).on('unlink', function (path) {
    del('dist/js/**/*.js' + Path.basename(path))
  })
  watch('src/lib/**/*.js', series(libJs)).on('unlink', function (path) {
    del('dist/lib/**/*.js' + 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'))
}
复制代码

完整代码

目录

gulpfile.js

const { series, parallel, src, dest, watch } = require('gulp')

const Path = require('path')

const htmlmin = require('gulp-htmlmin')
const fileinclude = require('gulp-file-include')
const changed = require('gulp-changed')
const webserver = require('gulp-webserver')
const del = require('del')
const uglify = require('gulp-uglify')
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'))
}

function devServer() {
  return src('dist').pipe(webserver({
    port: 3000,
    livereload: true, // 是否实时加载
    // directoryListing: true, // 是否开启浏览目录
    // open: true, // 是否自动打开
    // proxies: [ // 代理，可以用来解决跨域问题
    //   {source: '/api', target: 'http://xxxx.com', options: {headers: {"Content-Type": 'application/x-www-form-urlencoded'}}}
    // ]
  }))
}

function watcher() {
  watch('src/**/*.html', series(html)).on('unlink', function (path) {
    del('dist/**/*.html' + Path.basename(path))
  })
  watch('src/js/**/*.js', series(js)).on('unlink', function (path) {
    del('dist/js/**/*.js' + Path.basename(path))
  })
  watch('src/lib/**/*.js', series(libJs)).on('unlink', function (path) {
    del('dist/lib/**/*.js' + Path.basename(path))
  })
}

function clean() {
  return del('dist')
}

exports.default = series(clean, html, libJs, js, devServer, watcher)
exports.build = series(clean, html, libJs, js)
复制代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>首页</title>
</head>
<body>
  @@include('./header.html', {"name": "hello")
  <div>首页内容</div>
  @@include('./footer.html')

  <script src="./js/index.js"></script>
</body>
</html>
复制代码

index.js

function print() {
  console.log('测试1234')
}

print()
复制代码