Gulp的那些事

Posted 2021-04-08 web前端与开发

Gulp

• https://gulpjs.com/

• http://www.gulpjs.com.cn/

• https://github.com/gulpjs/gulp

WHY

Gulp 是一个自动化构建工具，可以用来帮助你提高你的开发效率。

• 自动化

• 流程控制

• 网页性能优化

• 减少页面请求数量

• 如果一个页面引用的静态资源太多，例如 javascript 则可以把他们合并一下

• 把 css 合并

• 压缩：减小文件体积，提高页面响应速度

• 图片压缩，减小文件体积

• html 页面也可以压缩

• 开发过程中需要频繁的修改代码刷新浏览器，也可以使用工具来解决

• 页面中通用的部分很麻烦

• 编译 less

• 编译 sass

GET STARTED

https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md

全局安装 gulp-cli

$ npm install --global gulp-cli

初始化 package.json 文件

$ npm init -y

把 gulp 安装到本地项目

# --save-dev$ npm install --save gulp

在项目根目录下创建一个名字为 gulpfile.js 文件并写入以下内容

// 0. 引包var gulp = require('gulp')// 1. 定义任务

gulp.task('chifan', 
function () {  console.log('吃饭任务被执行了')})

gulp.task('shuijiao', 
function () {  console.log('睡觉任务被执行了')})

gulp.task('default',
 function () {  console.log('默认任务被执行了')})

然后就可以测试你的 gulp 任务了

在命令行中，分别输入以下命令进行测试（注意，一定要在项目目录下）

$ gulp chifan$ gulp shuijiao$ gulp$ gulp chifan shuijiao default

API

https://github.com/gulpjs/gulp/blob/master/docs/API.md

• gulp.src

• gulp.dest

• gulp.task

• gulp.watch

• pipe 方法是承上启下的数据连接管道，在构建的过程中需要使用

gulp.src(globs[, options])

用于读取文件

globs

// 读取的是空目录 js

gulp.src('./src/js')

// 读取的是单文件

gulp.src('./src/js/main.js')

// 读取的是 js 根目录下的所有文件

gulp.src('./src/js/*')

// 读取的是 js 根目录下的所有以 .js 结尾的文件

gulp.src('./src/js/*.js')

// 递归读取 js 目录（所有的）

gulp.src('./src/js/**/*')

// 递归读取 js 目录（所有的）中所有的以 .js 结尾的文件

gulp.src('./src/js/**/*.js')

// 读取 ./src/js/main.js 和 ./src/css/**/*.css

gulp.src(['./src/js/main.js', './src/css/**/*.css'])

// 读取 client 里面所有以 .js 结尾的文件// 排除 client 中所有以 b 开头，
以 .js 结尾的文件// 但是在排除的条件之外，读取 client/bad.js 文件

gulp.src(['client/*.js', '!client/b*.js', 'client/bad.js'])

options

gulp.task('copy-js', function () {  // gulp.src(['src/js/*.js', 
'!src/js/b*.js', 'src/js/ba.js'])  
  // gulp.src(['src/js/*.js', '!src/js/b*.js'], 
{  //     base: './src/' // 默认会直接拷贝到 dist 根目录，
如果希望让拷贝到 dist 中的 js 目录保持原来的文件结构，则把 js 的父目录 
src 配置到 base 选项中就可以了  //   })  //   
.pipe(gulp.dest('./dist'))  
  gulp.src('./src/js/helper/*.js', 
  {      base: './src/' // 默认会直接拷贝到 dist 根目录，如果希望让拷贝
到 dist 中的 js 目录保持原来的文件结构，则把 js 的父目录 src 配置到 base
 选项中就可以了    })    .pipe(gulp.dest('./dist'))})

gulp.dest(path[, options])

path

要写入的目标路径目录，路径始终是目录

gulp.task(name , deps)

没有任何行为的任务：

gulp.task('aaa')

具有行为的任务：

gulp.task('aaa', function () {  // 任务代码})

具有依赖的任务：

gulp.task('a', function () {  console.log('aaa')})gulp.task('b', 
function () {  console.log('bbb')})gulp.task('c', function () {  
  console.log('ccc')})// d 任务把 a、b、c 三个任务集合到一起了/
/ 执行 d 任务就会先指向 a、b、c 三个任务// 当 a、b、c 三个任务执行结束
，开始执行 d 任务gulp.task('d', ['a', 'b', 'c'], function () { 
  console.log('ddd end')})

流程控制之：callback

第一种情况（1 3 4 2）：

gulp.task('a', function () {  console.log(1)  setTimeout(function () 
  {    console.log(2)    console.log('a 任务的 1s 时间执行到了')  },
   1000)  console.log(3)})gulp.task('default', ['a'], function () 
{  console.log(4)  console.log('default end')})// function f1() {

//   console.log(1)//   setTimeout(function () {//    
 console.log(2)//   }, 1000)//   console.log(3)// }// function f2() 
{//   f1()//   console.log(4)// }// f2()

第二种情况（通过 cb 来控制异步任务）(1 3 2)：

// 任务函数的 cb 参数用来异步流程控制// 如果该任务没有调用 cb ，则依赖该
任务的任务永远执行不到// 如果该任务调用了 cb ，则依赖该任务的任务才会被执
行到

gulp.task('a', function (cb) {  console.log(1)  setTimeout(
  function () {    console.log(2)  }, 1000)  console.log(3)})

gulp.task('default', ['a'], function () {  console.log(4)})

第三种情况（通过 cb 来控制异步任务）(1 3 4 2)：

// 任务函数的 cb 参数用来异步流程控制// 如果该任务没有调用 cb ，则依赖该任
务的任务永远执行不到// 如果该任务调用了 cb ，则依赖该任务的任务才会被执行到

gulp.task('a', function (cb) {  console.log(1)  setTimeout(function 
  () {    console.log(2)  }, 1000)  console.log(3)  cb()})

gulp.task('default', ['a'], function () {  console.log(4)})

正确情况（通过 cb 来控制异步任务）(1 3 2 4)：

// 任务函数的 cb 参数用来异步流程控制// 如果该任务没有调用 cb ，则依赖该任
务的任务永远执行不到// 如果该任务调用了 cb ，则依赖该任务的任务才会被执行到

gulp.task('a', function (cb) {  console.log(1)  setTimeout(function 
  () {    console.log(2)    // 注意：在这里调用，才能保证 a 任务中的定时
器执行结束了才执行依赖 a 任务的任务    cb()  }, 1000)  console.log(3)})

gulp.task('default', ['a'], function () {  console.log(4)})

依赖任务是并行执行的

gulp.task('a', function (cb) {  console.log(111)  setTimeout(
  function () {    console.log('aaa')    cb()  }, 1000)})

gulp.task('b', function (cb) {  console.log(222)  setTimeout(
  function () {    console.log('bbb')    cb()  }, 500)})

gulp.task('c', function (cb) {  console.log(333)  setTimeout(
  function () {    console.log('ccc')    cb()  }, 3000)})

// default 依赖的所有任务，只要任何一个任务写了 cb 没有调用，则 default
 就永远执行不到
 
gulp.task('default', ['a', 'b', 'c'], function () {  console.log

('default end')})

流程控制之 return

gulp.task('less', function () {  console.log('less 任务开始编译了') 
  // 这里加 return  // 那么依赖 less 的任务就一定会等待 less 任务编译执
行结束才会执行自己  
  return gulp.src('./src/less/**/*.less')    
    .pipe(less())    
    .pipe(gulp.dest('./dist/css'))})// 将 dist/css/**/*.css 压缩写入
 dist/build
 
gulp.task('mini-css', ['less'], function () {  
  gulp.src('./dist/css/**/*.css')    
    .pipe(cssMinify())    
    .pipe(gulp.dest('./dist/build'))})

经验：

任务中的 gulp.src() 都称之为流任务，如果流任务是被某个任务依赖的，则我们在 gulp.src() 之前加上一个 return 就能保证一个在这个流任务执行结束之后，依赖该任务的任务才会执行。

在 gulp 中，常见的任务都是流任务，就是读取文件，然后使用插件，最后写入文件。所以这种流任务中是否加 return 取决于依赖该任务的任务是否需要该任务的构建结果。

对于依赖任务而言，如果是流任务：

• 需要依赖的构建结果，就加 return

• 不需要依赖的构建结果，就不用加 return

如果是类似于定时器的任务，则使用 cb 来控制。

gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])

gulp.watch(glob[, opts], tasks)

gulp.watch(glob[, opts, cb])

插件

编译和压缩 less

安装两个插件：$ npm i -S gulp-less gulp-csso