GULP

shuye1015
73 阅读4分钟

这是我参与「第四届青训营 」笔记创作活动的第2天

GULP

  • gulp 是一个项目开发的 自动化打包构建工具
  • 基于 node 环境来运行的

什么是自动化打包工具

  • 比如

    我们在开发的过程中，会写到 js 文件，css 文件，等等

    我们的项目如果想上线，那么一定要体积小一点，文件大小越小越好

    而我们在写 js 文件的时候，会有很多 换行/空格 之类的东西

    这些 换行/空格 都是占文件体积的一部分

    那么我们在上线之前就要吧这些 换行/空格 尽可能的删除掉

    我们又不能一个文件一个文件的去删除

    就要用到一个自动化工具来帮助我们把这些多余的东西干掉

  • 这个就是自动化工具的意义

  • 常见的自动化打包构建工具

    • gulp
    • webpack

安装 GULP 环境

  • gulp 也是一个运行环境

  • 只不过这个环境是要依赖于 node 环境的

  • 所以我们在安装 gulp 环境之前确保 node 环境已经安装

    • $ node --version
    • $ npm --version

  • 之所以也要检测以下 npm 环境，是因为我们要使用 npm 来安装 gulp 环境

  • 我们就直接安装一个 gulp 全局包就可以了

    # 打开命令行（MAC 打开终端）
# 直接使用 npm 安装就好
​
# windows 指令
$ npm install --global gulp
# MAC 指令
$ sudo npm install --global gulp

  • 等待安装就好，会默认安装最新的稳定版本

  • 要是想确认以下 gulp 安装成功

  • 可以直接在命令行（终端）使用指令查看以下版本号就可以

    • $ gulp --version
    • 会出现一个 CLI version: x.x.x
    • 就表示安装成功了

  • 安装好 gulp 环境以后，我们就可以使用了

为什么要使用 gulp

  • 就是为了在我们的开发过程中

    随着我们书写代码，就会自动帮我们把代码进行 压缩/合并/混淆/转码/... 之类的功能

    因为 gulp 是基于 node 环境运行的，所以可以给我们提供一个服务器

    让我们的项目启动在 服务器 上，就可以达到一个 自动刷新自动同步 的功能

    因为有 服务器 的出现，我们在请求一些数据的时候，就可以使用 服务器代理 的方式

  • 在我们使用 gulp 的时候，我们所有的 源代码 都会使用 gulp 进行 压缩/转码

  • 并且最终会给我们放在一个新的文件夹里面

    • 也就是说，我们的 源代码 在一个文件夹里面，压缩/转码 之后的所有文件在一个文件夹里面

使用 GULP

  • 我们的 gulp 环境已经安装完毕了，接下来我们就使用 gulp 对我们的项目进行打包了

1. 创建一个项目

  • 我们要使用 gulp 管理我们的项目

  • 首先，我们要有一个项目出现

  • 这里我会创建一个叫做 gulp_test 的文件夹作为我的项目文件夹

  • 因为我们是做一个 项目，肯定也会下载依赖包，所以最好是使用 npm 管理一下

  • 先做一个 $ npm init 初始化一下

    # 进入项目文件夹
$ cd gulp_test
# 使用 npm 管理我们的项目
$ npm init -y

  • 接下来，我们就要决定我们 源代码的目录结构

  • 在项目目录里面创建一个叫做 gulpfile.js 的文件

    这个文件是 gulp 在运行的时候的规则文件

    gulp 的运行就是按照你书写在 gulpfile.js 文件中的规则来进行打包的

    比如我们要定义：

    • 哪些文件按照 css 文件来打包
    • 哪些文件按照 js 文件来打包
    • 不同的文件有不同的打包规则

    因为每一个项目的目录结构都可能不一样

    所以，每一个项目都会有一个自己的 gulpfile.js 文件，来指定自己的规则

  • 我会准备一个叫做 src 的目录，作为我所有的源代码

    - gulp_text             项目文件夹
  - src                 项目源代码目录
    + css               存放 css 所有文件
    + data              存放数据文件
    + js                存放 js 所有文件
    + lib               存放一些第三方和公共资源（swiper/utils/...）
    + pages             存放所有页面
    + sass              存放 sass 所有文件
    - static            存放所有静态资源文件
      + audios          存放所有音频文件
      + images          存放所有图片文件
      + videos          存放所有视频文件
  - gulpfile.js         该项目的 gulp 打包规则
  - package.json        npm 的项目管理文件

2. 在项目里面下载 gulp

  • 刚才我们安装过一回全局的 gulp 了

  • 它只是给我们的电脑提供一个可以运行 gulp 命令的环境

  • 我们的项目要是想使用 gulp 工具，那么我们需要在项目里面下载项目依赖 gulp

  • 我们先下载一个项目依赖 gulp

    # 下载项目依赖 gulp
$ npm install --save-dev gulp

  • 下载完毕以后在 package.json 文件里面就会有相应的记录了

    {
    "devDependencies": {
        "gulp": "^4.0.2"
    }
}
    • 我们会看到我们安装的是 gulp@4.0.2 的版本
    • 这个是目前比较新的比较稳定的版本

  • 然后我们在 gulpfile.js 文件里面引入 gulp 依赖

    // gulpfile.js
​
// 引入 gulp 依赖
const gulp = require('gulp')

  • 接下来，我们就可以开始指定我们的打包规则了

3. GULP的几个常用 API

  • 首先，我们要知道，gulp 是靠 任务 来进行对代码的打包的

    比如

    • 我们指定一个打包 css 的任务
    • 我们制定一个打包 js 的任务

    我们将来一执行这个 css 任务，就会把 css 代码压缩了

    我们对于我们的所有文件，只要创建好一个一个的任务，然后让他们依次执行就行了

  • 接下来，我们就来说一下 gulp 中几个常见的 api

    1. gulp.task()：用于创建任务

      task('css', function () {})

      第一个参数： 这个任务叫做什么名字

      第二个参数： 这个任务都做什么事情

    2. gulp.src()：匹配文件，也就是我们要操作哪些文件

      src('./src/css/**')

      第一个参数： 就是要匹配的文件的路径（可以有多种形式）

      • ./src/css/index.css：匹配一个文件

      • ./src/css/*.css：匹配 css 文件夹下的所有后缀是 .css 的文件

      • ./src/css/**：匹配 css 文件夹下的所有文件

      • ./src/**/*.css： 匹配 src 下所有目录下的 .css 后缀的文件

      • 这是几个我们常用的，还有很多其他的方式

      • 需要学习，可以参考

    3. gulp.pipe()：管道函数，用于帮我们做事

      pipe(压缩css)

      参数可以是各种插件，就是用来帮我们做事情的

      • 比如可以做一个给 css 属性自动添加前缀的事情
      • 做一个压缩 css 文件的事情
      • 等等...

    4. gulp.dest()：用于讲文件写入的

      dest('./dist')

      第一个参数： 一个目录地址

      只要是用来把我们压缩好的文件写入哪个文件夹里面

      如果该文件夹不存在，会自动创建这个文件夹

    5. gulp.series()：gulp 的任务执行链

      series()

      可以填写很多个参数，每一个参数就是一个任务名称

      会按照你书写的顺序去执行任务

      • 书写方式就是按照任务名分开就好
      • gulp.series('css', 'js')
      • 就会先执行一个 css 任务，执行完毕之后再去执行 js 任务

      最后一个参数（选填）： 函数，所有你安排的任务执行完毕之后会执行的回调函数

    6. gulp.parallel()：gulp 的任务执行链

      parallel()

      可以填写多个任务，会同步执行几个任务

      parallel('css', 'js')

      • 会把两个任务同时开始执行
      • 两个任务是并行开始的

    7. gulp.watch()：监控文件变化

      watch('./src/css/*.css', function () {})

      第一个参数： 要监控的文件路径

      第二个参数： 需要一个函数 ，当你监控的文件发生改变的时候做什么

4. 创建一个压缩 css 的任务

  • 接下来我们就是使用 gulp 创建一个压缩 css 文件的任务

  • 我们肯定不能自己去把空格删除，或者写一段代码去替换

  • 而是使用一个和 gulp 相关的依赖包

    • $ npm install --save-dev gulp-cssmin

  • 下载下来直接使用就好了

    // gulpfile.js
​
// 引入 gulp 依赖
const gulp = require('gulp')
​
// 引入 gulp-cssmin 依赖
const cssmin = require('gulp-cssmin')
​
// 创建一个 css 的任务
gulp.task('css', function () {
    return gulp
        .src('./src/css/*.css')  // 使用 src 方法找到我们要压缩的文件
        .pipe(cssmin())          // 使用管道函数执行一个压缩的行为
        .pipe(gulp.dest('./dist/css'))  // 把压缩好的文件放在 dist 文件夹下的 css 文件夹
})
    • 这样，我们的一个简单的压缩 css 文件的任务就完成了
    • 接下来只要让这个任务执行以下就好了

  • 我们就来到命令行（终端），去执行我们写的这个叫做 css 的任务

    # 使用 gulp 的指令去执行这个 css 任务
$ gulp css
    • 执行完毕以后你会发现多了一个 dist 文件夹
    • 里面就有 css 文件夹
    • 里面有一个 .css 文件，这个就是被压缩好的文件了

\

avatar
文章
阅读
粉丝