宁皓网 Gulp 自动化任务

星期一, 2019-08-12 13:25 — adminshiping1

Gulp，可以去执行你事先设计好的任务，这些任务就是你平时在做前端开发的时候需要重复去执行的动作。它可以让我们为前端项目创建一个本地的服务器，然后去监视一些文件的变化，当这些文件发生变化以后，就去执行一些指定的任务，比如去把几个文件合并到一块，压缩一下，去把 Sass 或者 Less 编译成 CSS，再把处理之后的文件放到一个指定的地方。

Gulp 的任务要放到一个叫 Gulpfile.js 的文件里面。你可以通过插件去扩展 Gulp 的功能，不同的插件可以去做不同的事情。Gulp 与 Grunt 做的事差不多，你可以为项目选择其中的一个。

来自 https://ninghao.net/course/2000#info

1)介绍

在我们的工作流程里，应该尽量减少重复的工作，借助像 grunt 或者 gulp 之类的工具，很多任务都可以自动去执行，比如一些跟文件相关的操作。在这个课程里，我们就去学习一下怎么样使用 gulp ...

你可以用它创建一个开发用的服务器，然后去监视一些文件的变化，发生变化以后，就去执行事先设计好的任务。比如去把 Sass 或者 Less 编译成 CSS，去合并 JavaScript ，再最小化一下合并之后的 JS 文件，然后你可以把处理好的文件放到一个你指定的地方 ... 最后再自动刷新一下浏览器，这样就可以立即看到修改之后的结果 ...

来自 https://ninghao.net/video/2001#info

准备

2)安装 gulp 命令行工具

gulp 是基于 node 开发的，所以，我们可以使用 npm 这个 nodejs 的包管理工具去安装它。要使用 npm，你需要先去安装一下 nodejs，在这里，你可以找到安装 nodejs 的方法。安装好以后，我们可以打开命令行工具，osx 用户可以使用终端工具，windows 用户可以找到 node bash 这个工具。

gulp 需要先在全局范围里面安装一下，这样我们就可以在命令行下面，使用 gulp 这个命令了。然后在项目里面也需要去安装一下 gulp 。在全局范围里安装 gulp ，可以这样。这里我用的是 osx 的终端工具。输入 npm install ，就是要去安装点什么，这里加上一个 -g 参数，表示我们要在全局范围里面安装东西。后面再加上要安装的东西的名字。这里就是 gulp ...

npm install -g gulp

执行这个命令可以需要管理员的权限，如果安装遇到问题的话，可以在命令的前面加上一个 sudo ... 回车 ... 去执行一下。

完成以后，输入 gulp --help ... 会返回一些帮助的信息，说明我们已经成功的安装了 gulp 这个命令行工具。

来自 https://ninghao.net/video/2002#info

3)初始化项目

我们先去给要创建的前端的项目创建一个目录。在命令行的下面创建目录用的是 mkdir 这个命令，windows 上应该使用 md 命令。后面加上目录的名字 ... 输入 ninghao ..

mkdir ninghao-gulp

创建好以后，再进入到这个目录的下面，可以使用 cd 命令。

cd ninghao-gulp

npm，需要一个叫 package.json 的文件来管理依赖，可以手工去创建这个文件，也可以使用 npm init 这个命令。输入 npm init ...

npm init

这行命令会问我们一些问题。name，指定一下项目的名称，默认会用这个项目目录的名字，按下回车。version 就是这个项目的版本，输入 0.0.1 ...

description，是这个项目的描述，Gulp course by ninghao.net ... entry point ，没有 ... 回车 ... test command，测试命令，也没有 ... 再回车 ... 这个项目的 git 版本库，也还没有，回车 ... keywords ，关键词。回车 ... author ，作者，输入 wanghao ... license ... 项目的许可协议，暂时也不用管，再按一下回车。

最后这里会出现一个要创建的 package.json 文件的内容，没有问题的话，可以再按一下回车。

查看一下这个目录里的东西 ... ls ，windows 用户可以使用 dir 命令 ... 你会看到一个 package.json 文件。这就是刚才使用 npm init 命令创建的文件。下面，我们可以使用编辑器打开这个目录 ... 这里我用的是 atom 这个编辑器。在命令行下面，可以输入 atom . 表示用 atom 这个编辑器打开当前的目录。

找到 package.json ... 现在你看到的就是一个 json 格式的文件，里面的内容其实就是描述了一下我们的项目，比如项目的名字，作者，描述等等。我们的项目需要的 nodejs 模块，可以在这个文件里列出来 ... 下面，我们再去在项目里面安装一下需要的 gulp 这个模块。

回到命令行工具 .. 输入 npm install gulp ... 注意这回我们没有使用 -g 这个参数 ... 这样就可以把模块直接安装到项目下面。这里我们可以再加上一个 --save-dev 选项，这样会把要安装的东西，添加到 package.json 这个文件里面。

npm install gulp --save-dev

回到用编辑器打开的项目。这里你会发现在项目下面，多了一个叫 node_modules 的目录 ... 在这个目录的下面，你会看到刚才安装的 gulp 这个模块。再打开这个 package.json 文件 ... 你会看到这个文件里，会多了一个依赖 ... 这里会有 gulp ... 这个 dev 表示在开发的时候依赖的东西。

现在，我们可以删除掉 node_modules 这个目录 ... 然后用一行命令，可以安装所有的，在 package.json 文件里面列出来的依赖的东西。

回到命令行，删除目录可以使用 rm 命令。先加上一个 sudo ，rm 再加上 -rf ，后面是要删除的东西，node_modules ... 现在，这个 node_modules 就让我们删除掉了。

想要下载项目所有的依赖的模块，可以执行一下 npm install ...

你会发现，被删除掉的 node_modules 目录又出现在了这里，它的下面，会有一个 gulp 模块，因为我们在 package.json 里面说明了一下，项目需要用到 gulp 模块，这样在执行 npm install 的时候，就会去把它安装到项目下面。

来自 https://ninghao.net/video/2003#info

4)创建任务 - gulpfile.js

要使用 gulp 去处理文件，需要在项目下面，去创建一个叫 gulpfile.js 的文件，在这个文件里，我们可以去添加要执行的任务。先用编辑器打开项目的目录，然后在项目的根目录下面，去创建这个 gulpfile.js ...

首先我们要去把需要的 gulp 模块包含进来，可以使用 require 这个方法，在这个方法里，指定一下要包含进来的模块，这里就是 gulp ，这个方法会返回一个对象，我们可以去给这个对象起个名字 ... 可以叫它 gulp ...

var gulp = require('gulp');

这样，我们就可以使用 gulp 对象的方法去做一些事情了。在这里要添加一个任务，用的是 task 这个方法。输入 gulp.task() ... 这里方法里面有两个参数，一个是要添加的这个任务的名字 ... 第二个参数就是这个任务要做的事情。这个任务可以叫做 hello ... 然后再用一个匿名函数 ... 在这个函数里，用一个 console.log ... 在控制台上输出一点文字 ...

gulp.task('hello', function () {
console.log('您好');
});

现在，我们就可以在命令行下面，去执行 gulp 的 hello 这个任务了 ... 保存一下 ... 回到命令行工具 ... 进入到项目所在的目录以后 ... 输入 gulp ，后面加上要执行的任务 ... hello ...

这里你会看到，输出了您好，这两个字 ... 这就是 hello 这个任务要做的事儿。

在后面的视频里我们会继续去使用 task 这个方法去创建任务。另外，我们可以为项目去添加一些默认要执行的任务，回到编辑器 ... 另起一行再去创建一个任务。

gulp.task() ... 这个任务的名字是 default ，表示这是默认的任务，然后在第二个参数里面，去指定一下默认要执行的任务的列表 ... 这个参数是一个数组 ... 数组里的每个项目就是默认要执行的任务。这里我们把在上面定义的 hello 这个任务添加到这里。

gulp.task('default', ['hello']);

保存 ... 回到命令行 ... 这回我们可以直接输入 gulp .. 然后回车 ... 这样，gulp 会去执行所有在默认里面添加的任务。因为我刚才添加了一个 hello 任务到这个默认的任务里面，所以，这里会显示您好，这两个字。

来自 https://ninghao.net/video/2004

基础

5)gulp 基础

在这一章里我们来理解一下 gulp 的两个主要的功能，读取想要处理的文件，把处理好的文件放到指定的地方。 gulp 的 src 这个方法可以给我们找出想要处理的文件 ... 然后通过 .pipe 去处理这些找出来的文件 ... .pipe 可以理解成管道，每个管道里面，你可以指定它的功能，去处理文件 ... 最后，我们可以使用 gulp 的 dest 方法，把处理好的文件放到指定的地方 ...

来自 https://ninghao.net/video/2005#info

6)复制单个文件

我们先看一下怎么样用 gulp 去把一个文件复制到另一个地方，打开 gulpfile.js ... 在这里先去创建一个对象，你可以随便去命名它 ... 这时我叫它 gulp ，让它等于 require('gulp'); 这样这个 gulp 对象就拥有了 gulp 提供的所有属性还有方法了。

然后用 gulp 的 task 方法，去创建一个任务，这个任务要做的事就是把我们项目里的 index.html 这个文件，复制到一个叫 dist 的目录里面，这个 dist 目录表示的是 distribution .. 意思就是，正式发行的东西 ...

先给这个任务起个名字 ... 可以叫它 copy-index ... 再用一个匿名函数 ... 在这里，先用一个 return ... 大部分的 gulp 任务，首先要做的就是去读取要处理的文件 ... 读取文件用的是 src 这个方法 ... gulp.src ... 在这个方法里，指定一下要读取的文件 ... 这里就是 index.html ... 因为我们要把它复制到一个指定的地方 ...

找到要处理的文件以后，再用一个 pipe ... 你可以把这个 pipe 想像成是一个管道，把文件读取进来，放到一个管道里，在这个管道里面，你可以使用 gulp 的插件去处理读取进来的文件 ... 因为这里我们只是简单的把文件放到一个指定的地方，所以不需要使用插件，可以使用 gulp 的 dest 这个方法 ... 在这个方法里，指定一下文件要存储到的那个位置 ...

这样我们就创建好了这个把单个文件复制到指定位置的任务，名字是 copy-index .. 下面，我们再到命令行工具上面去执行一下这个任务 ... 打开命令行工具 .. 这里我用的是终端工具，Windows 用户可以使用命令提示符，或者 powershell ...

先确定当前的位置是在项目的目录里面 ... 然后输入 gulp ... 后面加上任务的名字 ... copy-index ... 回车 ... 会出现一些提示，使用的 gulpfile 的位置，开始执行的任务 ... 还有任务结束所花的时间 ...

再看一下我们的项目 ... 你会发现，项目的目录里面，会多了一个 dist 目录 ... 在这个目录的下面，会有一个文件叫做 index.html ... 这就是我们在执行 copy-index 这个任务的时候，把项目根目录下的 index.html 复制过来的 ...

来自 https://ninghao.net/video/2006#info

7)复制多个文件

在我的项目里面，有一个 images 目录 ... 这里有三张图片 ... 01，02 都是 .jpg 格式的图片 ... 03 是一个 .png 格式的图片 .. 另外这个目录下面还有一个叫 icons 的目录，在这个目录的下面，还有几个小图标 ... 下面，我们去创建一个任务，把 images 目录里的文件复制到 dist 这个目录的下面 ...

打开项目的 gulpfile.js ... 先去创建一个任务 ... 用的是 gulp 的 task 方法 ... 先给任务起个名字... 这里我叫它 images ... 然后再用一个匿名函数 ... 在它里面，先用一个 return ... 然后再去读取要处理的文件 ... 用的是 gulp 的 src 方法 ... 指定一下要处理的文件 ... 输入 images/*.jpg ... 意思就是 images 这个目录里面的所有的 .jpg 格式的图片 .. 这个 * 号表示的就是任何东西 .. *.jpg 意思就是，不管图片的文件名是什么，只要它是 .jpg 格式的就行 ..

这个 src 方法里面指定的要读取的表示文件的东西，叫做 glob ... 我这里这个 glob 就是 images/*.jpg ..

后面接着再去处理这些文件，用一个 pipe ... 在这个管道里面，我们要做的就是把读取过来的这些文件复制到一个指定的位置 ... 用的是 gulp 的 dest 方法 ... 指定一下目标目录 ... 放到 dist 下面的 images 这个目录里面 ...

保存 ... 再去到命令行工具里执行一下这个任务 ... 输入 gulp images ... 回车 ...

完成以后，你会看到，在项目的 dist 这个目录里面，会创建一个叫 images 的目录 ... 在这个目录里面，有两张图片 ... 都是 .jpg 格式的图片 ... 它们都是从项目根目录下的 images 这个目录里面复制过来的 ...

在这个目录里面，这张 png 格式的图片，还有 icons 里面的小图标，并没有复制到 dist 下面的 images 目录里面 ... 因为我们写的 glob 只匹配 images 目录下的所有的 .jpg 格式的图片 ... 在下面的视频里我们再详细的介绍一下 glob 的写法。

来自 https://ninghao.net/video/2007#info

8)globs

如果你想把 images 目录下面的所有的图像文件都复制到 dist 下面的 images 目录里面，在这个 src 方法的 glob 里面，可以指定多个扩展名 .. 现在是 *.png ... 我们可以这样 ... *. 后面加上一组花括号 ... 在这个花括号里面，指定多个扩展名 ... png ... 逗号 jpg ... 注意逗号的后面不要使用空格 ...

'images/*.{png,jpg}'

这个 glob 表示的就是，直接在 images 目录下面的所有的 png 还有 jpg 格式的图像文件 ... 保存 ... 再去执行一下这个任务 .. 现在，这个 dist 下面的 images 里面的东西，就是直接在项目的 images 目录下面的所有的 jpg 还有 png 格式的文件 ..

在这里，我们也可以不去指定扩展名 ... 直接用一个星号 ...