GULP使用指南（一）

See_you
219 阅读2分钟

这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战

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

  1. 减少文件体积

以 jQuery 为例， 没有压缩之前的代码是将近 300KB 左右

压缩以后是 80KB 左右， 这样文件的大小就改变了

因为在线上运行的时候， 都是靠网络传输文件， 那么文件体积越小， 传输就越快

  1. ES6 转码

    我们的 es6 语法在 IE 低版本里面不兼容

    打包工具里面有一项就是进行转码， 可以把 es6 的语法转换成 es5 的语法， 那么就可以兼容了

  2. 自动化

    打包工具还有一个功能就是监听和实时更新功能

    通过我们的配置， 可以在开发过程中随着我们的代码书写， 实时更新页面

    不需要我们写一点东西然后就去页面上刷新一次， 会自动刷新页面的

  3. 其他功能

    一些其他好玩的功能，比如 css 样式的前缀自动添加

    sass 和 less 的语法转换

    ...

使用 gulp 的准备工作

  • 介绍完毕 gulp 接下来我们就要使用它了
  • 我们先要做一些准备工作

1. 准备一个项目文件夹

  • 我们首先要有一个项目，才说到使用 gulp 打包项目

  • 我们先准备一个示例项目

    - demo
  - src
    + css
    + pages
    + images
    + js
    + lib
  - package.json

  • 简单先准备一个这样的项目文件夹

  • 其中 package.json 是使用 npm 初始化的时候出现的

  • 记录我们的项目需要用到的内容

2. 安装项目依赖 gulp

  • 之前我们安装过一个全局的 gulp 工具了

  • 为什么这里还需要安装一次

  • 因为两个 gulp 包名字一样， 但是功能完全不一样

    全局 gulp 是为了电脑里面拥有一个 gulp 环境

    ​ => 也就是可以在命令行输入一些 gulp 相关的命令

    项目依赖 gulp， 是为我们提供一些 gulp 相关的 API

    ​ => 也就是我们可以使用一些 gulp 的方法

  • 直接在当前项目里面执行命令安装

    # 进入到 demo 目录
$ cd demo

# 安装项目依赖 gulp
$ npm install --save-dev gulp

3. 准备一个配置文件

  • 我们要准备一个 gulp 的配置文件

    • 在里面写上我们的打包规则
    • gulp 命令运行的时候， 就是按照这个文件里面的规则来运行的

  • 我们在 demo/src 同级创建一个 gulpfile.js 的文件

    • 注意： 文件名字必须是 gulpfile.js
    • 因为你运行 gulp 的时候， 他就是读取 gulpfile.js 文件里面的配置

  • 此时我们的目录结构就变成了

    - demo
  + src
  + package.json
  + gulpfile.js

  • 剩下的事情， 就是在 gulpfile.js 文件里面进行我们的打包配置了

avatar
文章
阅读
粉丝