Unsplash
Gulp 是基于 NodeJS 的前端自动化构建工具，在项目开发过程中自动化地完成 html / css / js / image / sass / less 等文件的编译、合并、压缩、语法检查、浏览器自动刷新等重复性任务，在操作上使用了 NodeJS 中的 stream (流)，通过 pipe() 方法导入到指定的地方，将前一级的输出，作为后一级的输入，不再需要进行频繁的 IO 操作，但需要注意的是，这里的流内容，并非原始的文件流，而是一个虚拟的文件对象流 (Vinyl Files)，存储着原始文件的路径、文件名、内容等信息
1. NodeJS 安装
Gulp 是基于 NodeJS，所以需要安装 Node 和 npm 包管理工具，可根据自己的操作系统环境来下载相应的版本 Node | Downloads
下载完成后，通过命令行查看 NodeJS 是否成功安装，Mac 系统的命令行在终端 (Terminal)，Windows 系统的命令行可通过 window + r 输入 cmd 运行
命令行启动之后，可通过输入命令 node -v 和 npm -v 分别查看 NodeJS 和 npm 版本号，显示版本号即为成功安装
命令行
2. npm 介绍
npm (Node Package Manager) 是随同 NodeJS 一起安装的包管理工具，用于 node 插件管理，包括插件的安装、卸载、管理依赖等
在命令行中执行 npm install <name> [-g] [--save-dev] 命令即可使用 npm 安装插件
-
<name>为 node 插件名 -
-g为全局安装，全局安装可以通过命令行在任何地方调用该插件，而非全局安装只会安装在当前定位目录的node_modules文件夹下，通过require()方法进行调用 -
--save将配置信息保存到 NodeJS 项目配置文件package.json中 -
-dev将配置信息保存至package.json文件下的devDependencies节点
有了 package.json 的配置信息之后，我们就可以通过 npm-install 命令，一键下载 package.json 配置信息里的所有插件包
如果需要删除插件包，可执行 npm uninstall <name> [-g] [--save-dev] 命令，而不要直接删除本地插件包，借助 rimraf 可以删除所有的插件包，通过命令 npm install rimraf -g 安装 rimraf 之后，执行 rimraf node_modules 命令
其他常用的 npm 命令，更新插件 npm update <name> [-g] [--save-dev]，更新全部插件 npm update [--save-dev]，查看帮助 npm help，查看当前目录已安装插件 npm list
npm 安装插件是从国外服务器下载，受网络影响大，对不能翻墙的同学不太友好，而淘宝团队提供了一个 npmjs.org 镜像，同步频率目前为 10 分钟一次，以保证尽量与官方服务同步，安装方式也很简单，执行命令 npm install cnpm -g --registry=https://registry.npm.taobao.org，同样的，安装完成之后，执行 cnpm -v 命令来查看是否成功安装，而 cnpm 跟 npm 的用法完全一样，只是在执行命令的时候，将 npm 换为 cnpm 即可
3. gulp 安装
执行命令 npm install gulp -g 全局安装 gulp，Mac 用户如果安装失败，可加上 sudo 指令，使用管理员权限进行安装 sudo npm install gulp -g
然后我们创建一个 gulp 目录，在该目录下运行 npm init 新建 package.json 文件，以保存项目相关信息，该文件也可以手动新建，具体信息如下所示，需要注意的是，json 文件里不能写注释，在复制完之后记得把注释删除
{
"name": "gulp-niangao", //项目名称（必须）
"version": "1.0.0", //项目版本（必须）
"description": "This is for study gulp project !", //项目描述（必须）
"homepage": "", //项目主页
"repository": { //项目资源库
"type": "git",
"url": "https://git.oschina.net/xxxx"
},
"author": { //项目作者信息
"name": "surging",
"email": "surging2@qq.com"
},
"license": "ISC", //项目许可协议
"devDependencies": { //项目依赖的插件
"gulp": "^3.8.11",
"gulp-less": "^3.0.0"
}
}
package.json
安装 gulp 依赖包到项目本地 npm install gulp --save-dev，并安装项目其他依赖包，在这里以 gulp-less 为例，npm install gulp-less --save-dev，同样的，Mac 用户要是提示权限错误，加上 sudo 指令即可
接下来我们新建一个 gulpfile.js 文件，具体代码如下所示
// 导入工具包 require('node_modules里对应模块')
const gulp = require('gulp'), // 本地安装gulp所用到的地方
less = require('gulp-less'); // 引入组件
// 定义一个less任务（自定义任务名称）
gulp.task('less', () => {
return gulp.src('src/less/test.less') // 该任务针对的文件
.pipe(less()) // 该任务调用的模块
.pipe(gulp.dest('build/css')) // 将会在build/css下生成test.css
});
// 定义默认任务
gulp.task('default', ['less'], () => {
console.log("Love cake is really good!")
});
运行结果
我们在上面的代码里，先是通过 require() 方法引入了 gulp 和 gulp-less 两个组件，当然引入的前提是你已经将该组件下载到本地了，随后我们使用了 gulp.task 定义了一个 less 任务，该任务将 /src/less 文件下的 test.less 文件，转换为 test.css 文件，该文件将在 /buil/css 下生成，文件目录结构如下所示
文件目录结构
在实际开发过程中，我们定义了多个类似 less 的任务，以实现不同的需求，当任务有多个，为实现某一需求而运行所有任务显然是不可取的，我们可通过 gulp + 任务名的方式来运行指定的任务，而不会触发其他任务
运行less任务
除了我们定义的 less 任务外，我们还定义了一个 default 默认任务，这对 Gulp 来说是必须的，当我们输入 gulp 命令时，将会自动执行 default 任务，在上面这个例子中，我们先是执行了 less 任务，再执行了 default 任务，我们也可以通过 .run 方法关联默认任务
gulp.task('default', () => {
gulp.run('less')
console.log("Love cake is really good!")
});
运行结果
我们看到通过 .run 方法进行任务关联时，提示该方法已被弃用，建议使用任务依赖或 gulp.watch 任务进行触发，该 API 起到了文件监听的作用，当 gulp.src 匹配的路径下的文件发生了更改，便会运行回调定义的其他任务
gulp.task('default', () => {
gulp.watch('src/less/*.less', function(){
gulp.run('less');
});
console.log("Love cake is really good!")
});
运行结果
快捷键 Command + c 即可终止当前操作，Windows 下为 Ctrl + C
该章节的内容到这里就全部结束了，源码我已经发到了 GitHub Gulp_Demo 上了，有需要的同学可自行下载
End of File
行文过程中出现错误或不妥之处在所难免，希望大家能够给予指正，以免误导更多人，最后，如果你觉得我的文章写的还不错，希望能够点一下喜欢和关注，为了我能早日成为简书优秀作者献上一发助攻吧，谢谢！^ ^
网友评论