gulp 打包 _ 最新 - 完整版

最新推荐文章于 2024-01-11 14:29:53 发布

雨季mo浅忆

最新推荐文章于 2024-01-11 14:29:53 发布

阅读量4.2k

点赞数 2

分类专栏：前端文章标签：前端 Gulp

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_58099903/article/details/119408736

版权

前端专栏收录该内容

156 篇文章 29 订阅

订阅专栏

2021年 8 月份更新版

目录

2. gulp 打包项目的工作流程

3. gulp 使用前的准备工作

4. gulp 第三方包的常用方法

5. 配置打包任务

1. 配置打包 css 的任务

2. 配置打包 sass 的任务

最新版打包 sass 任务总结 :

3. 配置打包 js 的任务

打包 js 任务总结 :

4. 配置打包 html 的任务

5. 配置打包 image 的任务

6. 配置转移任务

7. 配置一个默认总任务

8. 配置删除 dist 文件的任务

9. 配置一个启动临时服务器的任务

10. 配置一个监控任务

end 导出你配置的任务

直接跳转 => 完整代码

1. 认识 gulp

+ 是一个前端打包工具

+ 打包 : => 代码转码压缩混淆

+ gulp 的依赖 :

  => 环境依赖 : node

  => 执行依赖 : 流

+ 一个基于 node 环境运行的打包构建工具

+ 是一个基于流的运行工具

+ 流:

  => 流文件

  => 流格式(形式)

开发目录(文件夹)
+ 根目录中需要有什么 ?
+ 打包后的代码和源代码, 需不需要分成两个文件 ?
  => 需要
  => 后期还要维护和修改和迭代
  => 有一个源文件叫做 a.html, 打包以后, 叫做 b.html
  => 最好的情况
  => 准备两个文件夹
    -> 一个放源码(src)
    -> 一个放打包后的代码(dist)

gulp 工具 :

+ 如果你想使用 gulp 对你的项目进行打包

+ 安装一个全局 gulp 工具 :

  => 因为是一个依赖 node 环境运行的工具 , 是一个全局工具

  => 使用 npm 安装 , 打开命令行, 目录无所谓

  => 输入指令:

win : $ npm install --global gulp

OS : $ sudo npm install --global gulp

+ 等待结果 :

-> 安装完毕以后, 你的电脑里面就有一个 gulp 环境

-> 你可以在命令行通过 gulp xxx 的指令来打包你的项目

=> 作用: 在你的电脑内安装一个环境, 让你可以在命令行书写 gulp xxx 这样的指令
   -> 你的电脑有了可以打包项目的能力
=> 安装次数: 一台电脑安装一次, 以后直接使用

+ 检测 : => 打开命令行, 目录无所谓

  => 输入指令 : $ gulp --version

  -> 出现的脚手架版本号

+ 卸载 : => 打开命令行, 目录无所谓

  => 输入指令:

win: $ npm uninstall --global gulp

OS: $ sudo npm uninstall --global gulp

2. gulp 打包项目的工作流程

gulp 使用前的准备工作 :

1. 建立你完整的项目文件夹 :

=> 内部有自己的结构

=> 需要有一个根目录(例 : taobao)

=> 根目录下需要哪些内容

- taobao                  项目根目录

  + src 所有的开发源码文件

  + package.json 当前项目的描述文件(利用 npm 初始化得到的) => 指令 : $ npm init -y

  + dist 所有打包后文件(可以不用自己创建, 因为 gulp 会帮你自动创建)

  + gulpfile.js          gulp 打包的配置文件

=> 对本项目打包的配置和工作过程文件

=> 将来你使用工具进行打包的时候, gulp 工具会自动读取项目根目录中的 gulpfile.js 文件

=> 按照 gulpfile.js 文件中的配置进行打包工作

+ node_modules  下载的所有第三方包

+ ...

=> 为什么需要一个 gulpfile.js 文件

  + 这个文件里面会做一些打包的配置

  -> 你的 css 文件是放在哪一个文件夹下

  -> 你的图片文件是放在哪一个文件夹下

  -> ...

  + 又因为你定义的文件夹不一定每一个项目都一样

  + 因为 gulp 这个工具在打包你的项目的时候

  -> 会自动读取项目根目录下的一个叫做 gulpfile.js 的文件当做配置文件使用

2. 每一个项目开始进行 gulpfile 的书写

=> 按照 gulp 的规则进行书写

3. gulp 使用前的准备工作

书写 gulp 打包的配置文件
+ 按照 node 的模块化语法规则进行书写

在项目内下载一个 gulp 第三方包来支持 :

=> gulp 第三方包是第三方模块

=> 用来在代码内导入以后得到一些 API 来帮助完成工作的

=> 下载 :

  -> 如果你下载的第三方依赖是一个 开发依赖

  -> 最好使用指令的时候加上一个 --save-dev , 简写  -D

  -> 作用: 只是在记录的时候, 在 package.json 内, 不会记载在 dependencies 这里了

  + 而是记载在一个 devDependencies 里面

  -> 打开命令行, 切换目录到你的项目根目录

=> 输入指令: $ npm install gulp --save-dev

  -> 简写指令: $ npm i -D gulp

=> 作用: 就是一个第三方模块, 让你在 gulpfile 文件内导入以后
   -> 得到一些可以操作文件的 API(方法) 供你使用
   -> 去完成 gulpfile 文件的配置
=> 安装次数: 每一个项目都需要安装一次

3. 在 gulpfile.js 文件内导入你下载的第三方 gulp

4. 开始书写对于该项目的打包配置内容

解释一下 gulp :

  + 全局安装的 gulp ( 一个电脑下载一次 )

    => 作用: 是给你的电脑提供一个可以打包文件的能力

    => 你的电脑可以使用 gulp 这个工具来对你的项目进行打包了

    => 你可以在命令行执行 gulp xxxx 的指令

  + 项目依赖的 gulp ( 一个项目下载一次 )

    => 作用: 让你在 gulpfile.js 文件内导入以后

    => 可以得到一些方法, 来决定某些打包规则

依赖分类 :

+ 开发依赖

    => 在开发环境中使用的依赖第三方

    => 没有这个依赖, 项目可以正常运行

    => gulp

+ 生产依赖

    => 在生产环境中使用的依赖第三方

    => 没有这个依赖, 项目没办法正常运行了

    => jquery

1. 需要一个第三方模块来支持
+ 下载: npm i gulp
=> 下载以后, 会自动记录到 package.json 中 dependencies 字段内
=> 如果我下载一个 jquery, 也会记录到这个位置
=> 这时:
-> 我们管 jquery 叫做项目依赖, 项目的运行需要依赖这个第三方
-> 我们管 gulp 叫做开发依赖, 指只在开发阶段使用的第三方
-> 但是两种第三方依赖是记录在一起的, 不友好
=> 推荐:
-> 安装开发依赖的时候
-> 使用指令: $ npm install --save-dev 包名
           $ npm i -D 包名
-> 下载下来的内容和 'npm i 包名' 下载下来的内容一模一样
-> 只是在 package.json 文件内记录的位置不一样
+ 导入: const gulp = require('gulp')
=> 因为是第三方模块
=> 会自动去到 node_modules 内查找
=> 直接按照包名来导入就可以了

4. gulp 第三方包的常用方法

=> 当 gulp 被导入了以后, 会给我们提供一些方法

1. gulp.task( )

=> 语法: gulp.task( '任务名称', 函数 )

=> 作用: 创建一个任务 , 函数内书写该任务需要执行的代码

=> 例子: gulp.task('cssHandler', ( ) => { 根据 gulp 的语法对 css 文件进行打包 })

2. gulp.src( )

=> 语法: gulp.src( '路径地址' )

=> 作用: 标注源文件所在目录

=> 路径地址:

./src/css/a.css 指定找到某一个 css 文件

./src/css/*.css 指定找到 css 目录下的所有 .css 结尾的文件

./src/*/**          指定找到 src 目录下的所有文件

./src/*/*.css        指定找到 src 目录下的所有文件夹内的所有 .css文件

** /*                     所有文件夹下的所有文件

......

=> 返回值: gulp任务流

gulp.src( '路径地址' ).gulp.pipe( 打包工作 )

3. gulp.pipe( )

=> 语法: 需要 gulp任务流.pipe( 下一个工作内容 )

=> 作用: 管道函数 , 用来执行各项工作内容的

4. gulp.dest( )

=> 语法: gulp.dest( '路径' )

=> 作用: 把前面一个流传递来的内容放在指定目录文件夹下

5. gulp.watch( )

=> 语法: gulp.watch( 源'文件'路径, 任务名称 )

=> 作用: 监控指定源文件, 只要文件发生任何改变, 就执行一遍指定任务

6. gulp.parallel( )

=> 语法: gulp.parallel( 任务1, 任务2, 任务3, ... )

=> 作用: 并行开始每一个任务

-> 所有任务同时开始

7. gulp.series( )

=> 语法: gulp.series( 任务1, 任务2, 任务3, ... )

=> 作用: 逐个执行每一个任务

-> 前一个任务做完, 在做下一个任务

5. 配置打包任务

// 0. 导入 gulp 第三方模块
const gulp = require('gulp')

1. 配置打包 css 的任务

配置一个打包 css 的任务 :
+ 利用 gulp.tesk( ) 方法来创建一个打包任务
=> 在里面使用 gulp.src 进行查找源文件
=> 使用 pipe 来进行流运转
=> 使用 gulp.dest( ) 方法把打包好的内容放在指定文件夹内
=> 这个语法不推荐, 因为是属于 gulp@3.x 的语法
+ gulp@4.x 的时候, 我们推荐的语法 :
=>  const 任务名 = 函数
=> 函数内的内容不变, 定义任务的方式改变一下
=> 需要使用导出语法把该任务导出
->  module.exports = { 任务名 }
+ 在 gulpfile 内把 cssHandler 这个任务进行导出
=> 导出以后, 就可以在命令行利用 gulp 工具来执行这个任务了
+ 执行任务
=> 打开命令行, 目录切换到项目根目录
=> 输入指令: $ gulp 任务名称
-> 就会执行 gulpfile.js 文件导出的那个任务
-> 如果没有导出, 就会报错
+ 解决一个报错:
=> 因为 gulp 工具捕获不到 cssHandler 任务的完成
=> 并不是不能完成, 只是 gulp 不知道他什么时候完成的
=> 因为 gulp 工具没有得到 gulp 的工作流
=> 只要写一个 return 就可以了
如何对 css 文件代码进行打包压缩 ?
+ 有一个第三方包, 专门用来去除 css 文件中的空格的
=> 利用一个叫做 gulp-cssmin 的第三方
=> 下载: $ npm i -D gulp-cssmin
=> 导入:  const cssmin = require('gulp-cssmin')
-> 导入以后, 你会得到一个函数, 直接调用执行就能压缩 css
// 0-1. 导入 gulp-cssmin 第三方模块, 用于压缩 css 文件
const cssmin = require('gulp-cssmin')
扩展:
+ 打包 css 的时候 自动添加前缀
+ 思考: 什么时候加 ? 压缩之前加, 还是之后加 ?
=> 就是在找到源文件和压缩之间
=> 添加一个步骤, 自动添加前缀 , 把添加完前缀的再进行压缩
+ 使用一个第三方模块来完成
=> 叫做 gulp-autoprefixer
=> 下载: $ npm i -D gulp-autoprefixer
=> 导入: const autoprefixer = require('gulp-autoprefixer')
-> 导入以后, 你会得到一个函数, 直接执行就能自动添加前缀
// 0-1-1. 导入 gulp-autoprefixer 第三方模块, 用于自动添加前缀
const autoprefixer = require('gulp-autoprefixer')
-> 需要传递一个参数: 表示你要兼容到哪些浏览器
+ 执行的时候会有警告提示, 解决问题
=> 原因: 不推荐在使用插件的时候传递参数
-> 推荐放在配置文件内
-> { browsers: ['', ''] }

=>
=> 解决: 把配置项以 browserslist 字段写在 package.json 内
// 1-1. 创建一个 打包 css 的任务
// 问题: 打包 css 和 打包 js 有没有可能是一样的 ?
// 打包一种文件, 就需要一个任务
// 将来你执行 cssHandler 的时候, 就是在执行对应的函数
const cssHandler = () => {
  // 1-2. 找到源文件
  // 你要打包的是 ./src/js 文件夹里面的内容吗 ?
  // 你要打包的是 ./src/images 文件夹里面的内容吗 ?
  // 不一定 , 所以需要你书写确定打包的是哪里面的内容
  // 注意 : 在配置任务的时候, 把工作流 return 出去
  return gulp
    .src('./src/css/*.css')     // 找到原始文件
    .pipe(autoprefixer())         // 自动添加前缀
    .pipe(cssmin())         // 进行 css 代码的压缩打包
    .pipe(gulp.dest('./dist/css/')) // 放到指定目录内
}

2. 配置打包 sass 的任务

+ 和打包 css 的任务有什么区别 ?

=> 就多了一个过程, 就是把 sass 转换成 css

+ 准备一个 sass 的任务函数

+ 导出 : 在函数内进行打包 sass 任务的配置转换

=> 获取到指定 sass 文件

=> 先把 sass 语法转换成 css 语法

=> 然后自动添加前缀

=> 压缩 css 文件代码

=> 放在一个指定的目录内

+ 如何把 sass 转换成 css :

需要用到一个第三方包, 叫做 gulp-sass ( 下载指令 : $ npm i -D gulp-sass  )

=>  特别说明 :

  -> 当你下载 gulp-sass 的时候, 大概率会失败

  -> 因为 gulp-sass 这个第三方依赖了一个叫做 node-sass 的第三方包

( 下载指令 : $ npm i -D node-sass ) => ( 版本 : "node-sass": "^6.0.1" )

  在你下载 gulp-sass 的时候, 会自动下载 node-sass 这个第三方包

node-sass 这个第三方在 npm 上其实是一个压缩包(zip),

下载以后需要在系统里把压缩包解压完 , 而且它的下载地址会经常变更

  -> 所以就会导致 node-sass 的下载会出现大概率失败的情况

  -> 最后 gulp-sass 还需要依赖一个叫做  sass  的包 (下载指令: $ npm i -D sass )

-> 解决:

+ 手动下载 node-sass 使用单独的下载地址

+ 有人做了把 node-sass 转换成和其他的包一样的状态

+ 在下载 gulp-sass 之前, 我们临时设置一个下载地址

+ 打开命令行, 输入指令: $ set SASS_BINARY_PATH=D:\win32-x64-57_binding.node

+ 然后再次尝试下载

=> 导入的时候 :

  ->  const sass = require('gulp-sass')(require('sass'))

-> 导入以后, 得到一个函数, 直接调用就能把 sass 转换成 css 文件

最新版打包 sass 任务总结 :

最新版本的 gulp-sass 包

    + 下载指令 :

      => $ npm i -D gulp-sass

      => $ npm i -D node-sass

      => $ npm i -D sass

    + 下载 node-sass 会大概率失败

      => 下载失败的时候, 执行下面这句代码

      => 临时把 node-sass 的下载地址切换 ( 单独切换一个包的下载地址 )

      => $ set SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/

      => 再次尝试下载就好了

    + 导入:

      => 只需要导入一个 gulp-sass

      => 语法: const sass = require('gulp-sass')(require('sass'))
// 1-2. 导入 gulp-sass 第三方, 用于把 sass 代码转换成 css 代码
const sass = require('gulp-sass')(require('sass'))
+ 使用:

=> sass( )

// 2-1. 创建一个打包 sass 文件的任务
const sassHandler = () => {
  // 2-2. 找到指定的文件
  return gulp
    .src('./src/sass/*.scss')       // 找到需要编译的 sass 文件 
    .pipe(sass())                   // 进行 sass 转换成 css 的操作
    .pipe(autoprefixer())           // 给 css 代码自动添加前缀
    .pipe(cssmin())                 // 对 css 代码进行压缩处理
    .pipe(gulp.dest('./dist/sass/'))// 放在指定目录下
}

3. 配置打包 js 的任务

+ 创建任务函数

+ 导出 : 在函数内配置打包 js 的过程

=> 获取到你要打包的 js 文件

=> 进行压缩 , 放到指定的路径内

+ 如何压缩 js 代码 :

+ 压缩 js 文件需要使用一个第三方包, 叫做 gulp-uglify

+ 下载: $ npm i -D gulp-uglify

+ 导入: const uglify = require('gulp-uglify')

+ 导入以后, 得到一个函数, 直接调用执行就可以对 js 代码进行压缩了
// 0-3. 导入 gulp-uglify 第三方, 用于把 js 代码压缩
const uglify = require('gulp-uglify')
=> 注意: js 内书写 ES6 及以上的语法

  -> 不会进行转码, 原样打包

如何把 ES6 转换为 ES5

+ 问题: 什么时候进行转码操作 ?

=> 找到文件之后, 先进行转码, 再进行压缩

+ 使用一个第三方包进行转换, 叫做  gulp-babel

=> 注意: 因为 gulp-babel 的运行需要依赖另外两个包

  -> 但是他自己不会下载

  -> 需要我们手动把另外两个包也下载下来

  -> 一个叫做 @babel/core 的包

  -> 一个叫做 @babel/preset-env 的包

+ 下载指令 :

=> $ npm i -D gulp-babel

=> $ npm i -D @babel/core

=> $ npm i -D @babel/preset-env

+ 导入: const babel = require('gulp-babel')
// 0-3-1. 导入 gulp-babel 第三方, 用于把 ES6 转换成 ES5
const babel = require('gulp-babel')
导入以后, 得到的就是一个函数, 调用执行函数的时候传递参数就可以进行 ES6 转换 ES5 了

-> 使用的时候需要传递一个参数

=> 传递的参数是一个 { presets: ['@babel/preset-env'] }

打包 js 任务总结 :

=> 如果你只是想打包, 不需要 ES6 转码

    -> 下载 gulp-uglify, 直接导入使用

  => 如果你想 ES6 转码

+ 下载:

  => gulp-uglify   用于压缩

  => gulp-babel    用于转码

  => @babel/core   用于 babel 依赖

  => @babel/preset-env  用于 babel 依赖

+ 导入:

  => const uglify = require('gulp-uglify')

  => const babel = require('gulp-babel')

+ 使用:

  => uglify( )

  => babel({ presets: ['@babel/preset-env'] })

// 3-1. 创建一个 打包 js 文件的任务
const jsHandler = () => {
  // 3-2. 找到指定的 js 文件
  return gulp
    .src('./src/js/*.js') // 找到指定的 js 文件
    .pipe(babel({ presets: ['@babel/preset-env'] })) // 进行 ES6 转换 ES5
    .pipe(uglify()) // 对 js 代码进行压缩
    .pipe(gulp.dest('./dist/js/')) // 放到指定目录内
}

4. 配置打包 html 的任务

+ 准备一个任务函数
+ 导出 :
+ 在函数内书写打包 html 的流程
=> 找到指定的 html 文件
=> 进行压缩打包
=> 放在指定的目录内
+ 如何压缩 html 文件
=> 需要一个第三方包, 叫做 gulp-htmlmin
=> 下载指令 : $ npm i -D gulp-htmlmin
=> 导入 : const htmlmin = require('gulp-htmlmin')
// 0-4. 导入 gulp-htmlmin 第三方, 用于压缩 html 文件
const htmlmin = require('gulp-htmlmin')
-> 导入以后得到一个函数, 直接调用就可以了
-> 但是不会对 html 文件进行任何压缩操作
-> 想压缩 html 文件, 需要配置传递参数

// 4-1. 创建一个打包 html 文件的任务
const htmlHandler = () => {
  // 4-2. 找到指定的文件
  return gulp
    .src('./src/views/*.html')
    .pipe(htmlmin({ // 进行压缩
      // 去掉所有的空格空白内容
      collapseWhitespace: true,
      // 去掉所有布尔类型属性
      collapseBooleanAttributes: true,
      // 移出属性值位置的双引号
      removeAttributeQuotes: true,
      // 移出空属性
      removeEmptyAttributes: true,
      // 移出注释内容
      removeComments: true,
      // 移出 script 标签上的默认 type 属性
      removeScriptTypeAttributes: true,
      // 移出 style 标签和 link 标签的 默认 type 属性
      removeStyleLinkTypeAttributes: true,
      // 压缩内嵌式 css 样式
      minifyCSS: true,
      // 压缩内嵌式 js 代码
      // 注意: 不能包含 ES6 语法
      minifyJS: true,
    })) // 进行压缩
    .pipe(gulp.dest('./dist/views/')) // 放到指定目录
}

5. 配置打包 image 的任务

+ 压缩图片需要使用一个第三方包叫做 gulp-imagemin

+ 下载: $ npm i -D gulp-imagemin

+ 导入: const imagemin = require('gulp-imagemin')
// 0-5. 导入 gulp-imagemin
const imagemin = require('gulp-imagemin')
// 5-1. 创建一个打包 image 的任务
const imgHandler = () => {
  // 5-2. 找到指定内容
  return gulp
    .src('./src/images/*.**')
    .pipe(imagemin())
    .pipe(gulp.dest('./dist/images/'))
}

6. 配置转移任务

一些内容的转移任务

+ 遇到视音频都是直接转移

配置处理图片视音频等静态文件的任务
+ 创建一个处理相应内容的函数
+ 导出函数
+ 在函数内配置打包流程
=> 找到原始文件
=> 压缩
=> 放到指定目录
+ 以图片为例:
=> 压缩图片使用 gulp-imagemin 第三方
=> 导入以后, 直接调用
+ 静态资源都是经过处理以后给我们的
=> 我们不需要任何操作
=> 只要转换位置就可以了

6-1. 配置一个转移 img 文件的任务
const imgHandler = () => {
  return gulp
    .src('./src/images/**.*')
    .pipe(gulp.dest('./dist/images/'))
6-2. 配置一个转移 audio 文件的任务
const audioHandler = () => {
  return gulp
    .src('./src/audios/**.*')
    .pipe(gulp.dest('./dist/audios/'))
}
6-3. 配置一个转移 video 文件的任务
const videoHandler = () => {
  return gulp
    .src('./src/videos/**.*')
    .pipe(gulp.dest('./dist/videos/'))
}
6-4. 配置一个转移 fonts 文件的任务
const fontHandler = () => {
  return gulp
    .src('./src/fonts/**.*')
    .pipe(gulp.dest('./dist/fonts/'))
}
6-5. 配置一个转移 data 文件的任务
const dataHandler = () => {
  return gulp
    .src('./src/data/*.**')
    .pipe(gulp.dest('./dist/data/'))
}
6-6. 配置一个转移 vendor 文件的任务
const vendorHandler = () => {
  return gulp
    .src('./src/vendor/*.**')
    .pipe(gulp.dest('./dist/vendor/'))
}

7. 配置一个默认总任务

+ 作用: 能帮我把其他任务调动起来
+ 准备默认任务函数(建议导出的时候起名叫做 default )
=> 当你在命令行输入 gulp default 的时候
=> 有一个简写形式, 叫做 $ gulp
=> 默认就是执行一个叫做 default 的任务
+ 导出这个函数
+ 书写任务内容
=> 同时把其他所有的打包任务都执行了
+ 需要做的事情:
=> 可以并行执行所有任务
=> 使用 gulp.parallel( )
=> 返回值: 一个函数, 等待执行
// 创建一个默认任务
// 需要把其他的一些任务一起执行掉
// 使用 gulp.parallel 来实现并行
// 语法: gulp.parallel(任务1, 任务2, 任务3, ...)
// 返回值, 就是一个函数, 直接赋值给 _default
const res = gulp.parallel(cssHandler, jsHandler, htmlHandler, sassHandler, imgHandler, videoHandler, audioHandler, dataHandler, fontHandler, vendorHandler)

// 当你导出了一个任务叫做 default 的时候
// 你在使用 gulp default 这个指令的时候
// 可以简写, 直接写 gulp
// 默认会自动执行一个叫做 default 的 任务
const _default = gulp.series(
  delHandler,
  res,
  serverHandler,
  watchHandler
)

8. 配置删除 dist 文件的任务

+ 目前的打包配置
=> 当你源文件内文件名修改的时候
=> 会导致 dist 内有多余文件出现
+ 解决:
=> 在每一次打包之前, 把 dist 文件夹删除掉
=> 每一次都打包当前的内容
+ 删除 dist 文件夹需要使用一个叫做 del 的第三方包
=> 下载指令 : $ npm i -D del
=> 导入 : const del = require('del')
// 8. 导入 del 第三方, 用于删除文件夹
const del = require('del')
+ 导入以后得到的就是一个函数 , 直接调用 del
-> 语法: del([ '要删除的文件夹目录' ])
+ 最好把这个删除任务也配置在默认总任务内
=> 和其他的打包任务有没有顺序关系
=> 执行完毕删除任务, 在执行其他的打包任务
=> gulp.series( )
// 8. 配置一个删除任务
const delHandler = () => {
  return del(['./dist/'])
}

9. 配置一个启动临时服务器的任务

+ 这个任务是在开发过程中来使用
=> 提供热刷新, 提供代理配置
+ 需要一个叫做 gulp-webserver 的第三方包
=> 下载指令 : $ npm i -D gulp-webserver
=> 导入: const webserver = require('gulp-webserver')
-> 导入以后, 得到一个函数, 直接调用
-> 配置一些参数实现启动服务器
// 9. 导入 gulp-webserver 第三方, 用于在开发阶段启动服务器
const webserver = require('gulp-webserver')
+ 域名配置:
=> 默认是写 localhost
=> 你可以自定义域名
   -> 需要你修改一次配置文件
   -> win: C:/windows/system32/drives/etc/hosts 文件

   -> mac: command + shift + g, 输入 /etc 回车, 找到 hosts 文件
   -> 添加一行代码 127.0.0.1 你的自定义域名
+ 如何配置代理
=> 在 webserver 的配置项中加一个选项
=> proxies: [
   {
   source: 代理标识符,
   target: 代理目标地址
   },
   { },
   { },
   { }
]

const serverHandler = () => {
  // 找到目录
  return gulp
    .src('./dist/')  // 找到你要开启的文件夹, 打包后生成的文件夹
    .pipe(webserver({  // 开启服务器
      host: 'www.xhl.com', // 域名
      port: '8080',  // 端口号
      // 默认自动打开哪一个文件, 你网站默认的首页, 路径从 dist 以后开始书写就行
      open: './views/a.html',
      // 自动刷新页面, 当代码发生任何变化的时候, 自动刷新浏览器
      livereload: true,
      // 配置服务器代理
      proxies: [
        // 一个代理就是一个对象
        {
          // 代理标识符
          source: '/xxx',
          // 跨域的请求目标地址
          target: 'http://localhost:8080/test.php'
        }
      ]
    }))
}
/*
  webserver 的时候, host 位置可以书写自定义域名
    1. host 确定好你要用的域名(尽量不要用一些大众的域名)
    2. 进行 系统 hosts 文件的配置
      => OS: command + g -> 输入 /etc 回车
      => win: 我的电脑 -> 系统盘符 -> windows -> system32 -> drivers -> etc
      => 找到一个叫做 hosts 的文件(注意这个文件只有名字没有后缀)
*/

10. 配置一个监控任务

+ 作用: 当 src 内任何文件发生变化的时候, 从新执行进行打包操作
=> 就会导致 dist 内的文件发生变化
=> dist 内的文件发生变化, 就会从新刷新页面显示内容
+ 使用的是 gulp.watch('监控的文件', 执行的任务)
// 10. 配置一个监控任务
const watchHandler = () => {
  // 用于监控变化
  gulp.watch('./src/css/*.css', cssHandler)
  gulp.watch('./src/sass/*.sass', sassHandler)
  gulp.watch('./src/js/*.js', jsHandler)
  gulp.watch('./src/views/*.html', htmlHandler)
}

end 导出你配置的任务

module.exports = {
  cssHandler: cssHandler,
  sassHandler: sassHandler,
  jsHandler: jsHandler,
  htmlHandler: htmlHandler,
  imgHandler: imgHandler,
  audioHandler: audioHandler,
  videoHandler: videoHandler,
  fontHandler: fontHandler,
  dataHandler: dataHandler,
  vendorHandler: vendorHandler,
  delHandler: delHandler,
  default: _default,
}

GULP 图例 :

直接跳转 => 完整代码

// 这里书写 ??? 项目的打包内容

// 0. 导入 gulp
const gulp = require('gulp')
// 0-1. 导入 gulp-cssmin
const cssmin = require('gulp-cssmin')
// 0-1-1. 导入 gulp-autoprefixer , 自动添加前缀
const autoprefixer = require('gulp-autoprefixer')
// 0-2. 导入 gulp-sass
const sass = require('gulp-sass')(require('sass'))
// 0-3. 导入 gulp-uglify , js 代码压缩
const uglify = require('gulp-uglify')
// 0-3-1. 导入 gulp-babel , ES6 转 ES5
const babel = require('gulp-babel')
// 0-4. 导入 gulp-htmlmin
const htmlmin = require('gulp-htmlmin')
// 0-5. 导入 gulp-imagemin
const imagemin = require('gulp-imagemin')
// 0-8. 导入 del
const del = require('del')
// 0-9. 导入 gulp-webserver
const webserver = require('gulp-webserver')

// 1. 配置一个 打包 css 的任务
const cssHandler = () => {
  return gulp
    .src('./src/css/*.css') // 找到原始文件
    .pipe(autoprefixer()) // 自动添加前缀
    .pipe(cssmin()) // 进行 css 代码的压缩打包
    .pipe(gulp.dest('./dist/css/')) // 放到指定目录内
}
// 2. 配置一个打包 sass 文件的任务
const sassHandler = () => {
  return gulp
    .src('./src/sass/*.scss')       // 找到需要编译的 sass 文件 
    .pipe(sass())                   // 进行 sass 转换成 css 的操作
    .pipe(autoprefixer())           // 给 css 代码自动添加前缀
    .pipe(cssmin())                 // 对 css 代码进行压缩处理
    .pipe(gulp.dest('./dist/sass/'))// 放在指定目录下
}
// 3. 配置一个 打包 js 文件的任务
const jsHandler = () => {
  return gulp
    .src('./src/js/*.js') // 找到指定的 js 文件
    .pipe(babel({ presets: ['@babel/preset-env'] })) // 进行 ES6 转换 ES5
    .pipe(uglify()) // 对 js 代码进行压缩
    .pipe(gulp.dest('./dist/js/')) // 放到指定目录内
}
// 4. 配置一个打包 html 文件的任务
const htmlHandler = () => {
  return gulp
    .src('./src/views/*.html')
    .pipe(htmlmin({
      collapseWhitespace: true,// 去掉所有的空格空白内容
      collapseBooleanAttributes: true,// 去掉布尔类型属性
      removeAttributeQuotes: true,// 移出属性值位置的双引号
      removeComments: true,// 移出注释内容
      removeEmptyAttributes: true,// 移出空属性
      removeScriptTypeAttributes: true,// 移出 script 标签上的默认 type 属性
      removeStyleLinkTypeAttributes: true,// 移出 style 标签和 link 标签的 默认 type 属性
      minifyJS: true,
      minifyCSS: true
    }))
    .pipe(gulp.dest('./dist/views/')) // 放到指定目录
}
// 5. 配置一个打包 image 的任务
const imgHandler = () => {
  return gulp
    .src('./src/images/*.**')
    .pipe(imagemin())
    .pipe(gulp.dest('./dist/images/'))
}
// 不推荐打包 image , 建议直接转移
/*
  6. 配置一些内容的转移任务
    + 遇到视音频都是直接转移
*/
// 6-1. 配置一个转移 img 文件的任务
const imgHandler = () => {
  return gulp
    .src('./src/images/**.*')
    .pipe(gulp.dest('./dist/images/'))
}
// 6-2. 配置一个转移 audio 文件的任务
const audioHandler = () => {
  return gulp
    .src('./src/audios/*.**')
    .pipe(gulp.dest('./dist/audio/'))
}
// 6-3. 配置一个转移 video 文件的任务
const videoHandler = () => {
  return gulp
    .src('./src/videos/*.**')
    .pipe(gulp.dest('./dist/videos/'))
}
// fonts 直接转移
const fontHandler = () => {
  return gulp
    .src('./src/fonts/*.**')
    .pipe(gulp.dest('./dist/fonts/'))
}
// data 直接转移
const dataHandler = () => {
  return gulp
    .src('./src/data/*.**')
    .pipe(gulp.dest('./dist/data/'))
}
// vendor 直接转移
const vendorHandler = () => {
  return gulp
    .src('./src/vendor/*.**')
    .pipe(gulp.dest('./dist/vendor/'))
}
// 8. 配置一个删除任务
const delHandler = () => {
  return del(['./dist/'])
}
// 9. 配置一个启动临时服务器的任务
const serverHandler = () => {
  return gulp
    .src('./dist/')
    .pipe(webserver({
      host: 'www.xhl.com',// 域名
      port: 8080,// 端口号
      open: './views/a.html',// 默认自动打开哪一个文件, 路径从 dist 以后开始书写就行
      livereload: true,// 自动刷新, 当代码发生变化的时候, 自动刷新浏览器
      // 配置服务器代理
      proxies: [
        {
          source: '/xhl',// 代理标识符
          target: 'http://localhost:8080/test.php'// 跨域目标地址
        }
      ]
    }))
}
// 10. 配置一个监控任务
const watchHandler = () => {
  gulp.watch('./src/css/*.css', cssHandler)
  gulp.watch('./src/views/*.html', htmlHandler)
  gulp.watch('./src/js/*.js', jsHandler)
}
// 7. 配置一个默认总任务
const res = gulp.parallel(cssHandler, jsHandler, htmlHandler, sassHandler, imgHandler, videoHandler, audioHandler, dataHandler, fontHandler, vendorHandler)

const _default = gulp.series(
  delHandler,
  res,
  serverHandler,
  watchHandler
)

// end, 把准备好的任务导出
module.exports = {
  cssHandler: cssHandler,
  jsHandler: jsHandler,
  sassHandler: sassHandler,
  htmlHandler: htmlHandler,
  imgHandler: imgHandler,
  audioHandler: audioHandler,
  videoHandler: videoHandler,
  fontHandler: fontHandler,
  dataHandler: dataHandler,
  vendorHandler: vendorHandler,
  delHandler: delHandler,
  default: _default,
}

关注

2
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
gulp 打包 _ 最新 - 完整版

2021年 8 月份更新版 , 使用建议观看目录1. 认识 gulp2. gulp打包项目的工作流程3. gulp 使用前的准备工作4.gulp第三方包的常用方法:5. 配置打包任务1.配置打包css的任务2.配置打包 sass的任务最新版打包 sass 任务总结 :3.配置打包 js 的任务打包 js任务总结 :1. 认识 gulp+是一个前端打包工具+打包 : => 代码转码压缩混淆+gulp的...
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。