请务必理解如下章节后阅读此章节：

1. 安装 Node 和 gulp

压缩 js 代码可降低 js 文件大小，提高页面打开速度。在不利用 gulp 时我们需要通过各种工具手动完成压缩工作。

所有的 gulp 代码编写都可以看做是将规律转化为代码的过程。

规律

找到 js/ 目录下的所有 js 文件，压缩它们，将压缩后的文件存放在 dist/js/ 目录下。

gulp 代码

你可以 下载所有示例代码 或 在线查看代码

建议：你可以只阅读下面的代码与注释或同时阅读代码解释

gulp 的所有配置代码都写在 gulpfile.js 文件。

一、新建一个 gulpfile.js 文件

在 gulp 中你只需要理解 require() 可以获取模块。

四、创建压缩任务

• gulp.task(name, fn) - 定义任务，第一个参数是任务名，第二个参数是任务内容。
• gulp.src(path) - 选择文件，传入参数是文件路径。
• gulp.dest(path) - 输出文件
• gulp.pipe() - 管道，你可以暂时将 pipe 理解为将操作加入执行队列

五、跳转至 gulpfile.js 所在目录

打开命令行使用 cd 命令跳转至 gulpfile.js 文件所在目录。

例如我的 gulpfile.js 文件保存在 C:\gulp-book\demo\chapter2\gulpfile.js。

那么就需要在命令行输入

六、使用命令行运行 script 任务

在控制台输入 gulp 任务名 可运行任务，此处我们输入 gulp script 回车。

注意：输入 gulp script 后命令行将会提示错误信息

七、安装 gulp-uglify 模块

因为我们并没有安装 gulp-uglify 模块到本地，所以找不到此模块。

使用 npm 安装 gulp-uglify 到本地

目录结构：

我们发现 gulp 没有进行任何压缩操作。因为没有js这个目录，也没有 js 目录下的 .js 后缀文件。

创建 a.js 文件，并编写如下内容

gulp 会在命令行当前目录下创建 dist/js/ 文件夹，并创建压缩后的 a.js 文件。

目录结构：

dist/js/a.js

九、检测代码修改自动执行任务

js/a.js一旦有修改 就必须重新在命令行输入 gulp script ，这很麻烦。

可以使用 gulp.watch(src, fn) 检测指定目录下文件的修改后执行任务。

在 gulpfile.js 中编写如下代码：

注意：使用 gulp.watch 后你的命令行会进入“运行”状态，此时你不可以在命令行进行其他操作。可通过 Ctrl + C 停止 gulp。

Mac 下使用 control + C 停止 gulp

十、使用 gulp.task('default', fn) 定义默认任务

增加如下代码

此时你可以在命令行直接输入 gulp +回车，运行 script 和 auto 任务。

最终代码如下：

你可以访问 gulp-uglify 以查看更多用法。