Gulp - JavaScript 世界的构建工具

2017.06.21 默认分类 0 评

构建工具

Gulp 是一款基于 Node.js（ JavaScript 运行环境）的任务运行工具。只要简单几行，它就可以帮助我们处理复杂的任务流程。无论是样式的预编译，代码打包，还是图片压缩任务，Gulp 都能准确无误地高效执行。

准备工作

安装 Node.js 运行环境，LTS 版本即可。然后在 cmd 中键入 node -v ，获得当前版本号为 v6.11.0 。
安装 Yarn 用于代替 Node.js 内置的 npm 包管理工具（另有cnpm 方案）。 yarn -v ，获得当前版本号 v0.24.6 。

包管理工具

Yarn 与 npm 一样是包管理工具。JavaScript 代码以模块的形式打包成 独立的包，再发布到包仓库中，这样我们便可以使用命令行的方式去下载项目所需的其他库文件。

包管理工具用来解决代码之间依赖的问题。很多时候某些代码通过外部调用的形式依赖别的模块，所依赖的模块又需要别的模块，造成级联依赖，单靠人工解既决费时又耗力。

创建项目

在硬盘上创建一个 gulp-example 的文件夹便于开始项目
```
    mkdir gulp-example
    cd gulp-example
```
初始化/创建项目依赖配置文件
```
    yarn init
```

程序将提示你输入项目名称、版本号、描述等信息；

$ yarn init
yarn init v0.27.5
question name (gulp-example):
question version (1.0.0):
question description:
question entry point (index.js):
question repository url:
question author: Mather
question license (MIT):
success Saved package.json
Done in 13.53s.

最后程序会在目录下创建一个名为 package.json 的文件，内容如下：

{
  "name": "gulp-example",
  "version": "1.0.0",
  "description": "this is a gulp example.",
  "main": "index.js",
  "author": "Mather",
  "license": "MIT"
}

安装 Gulp

使用 Yarn 将 Gulp 安装到当前项目，Yarn 将会 自动解决模块间依赖 并安装到 node_modules 新的目录中。
```
yarn add gulp
```

解决一系列依赖后，package.json 增加了 dependencies 项，指定了该项目依赖 Gulp 包且版本是 3.9.1。

"dependencies": {
  "gulp": "^3.9.1"
}

package.json 中的信息至关重要，记录着当前项目的信息、依赖和可执行的命令。

这就是 node_modules 文件夹在多人协作时不必 push 的一个原因，在新环境中包管理工具可以读取 package.json 的 dependencies 来安装项目依赖。 Git Commit 仅提交项目源码即可。

创建任务脚本

JavaScript 模块化

不易发现 node_modules 中能找到 Gulp 项目及其依赖的库/包文件，他们似乎都是以相同的文件形式发布的，每个目录下都含有：

index.js
package.json
README.md
LICENSE

等文件。 index.js 中存放的是可以外部调用的函数，都要遵循 JavaScript Module 规范才能被正常地调用。

JavaScript 模块化发展到今日，浏览器或服务器端都因为历史遗留问题产生了非常多模块化的解决方案。直到 ES6 规范的诞生，模块化的解决方案才被统一。

我们有理由去了解在这之前 JavaScript 是如何实现的模块化的，这涉及到 JavaScript 语言的许多原理，而不是止步于当前。

可以点击 RequireJS – AMD 规范的实现这篇文章，看看历史上 JavaScript 模块化是如何实现和运用的。

To be continued……

参考资料

Yarn CLI