Gulp 前端自动化构建工具

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 -vnpm -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() 方法引入了 gulpgulp-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

行文过程中出现错误或不妥之处在所难免,希望大家能够给予指正,以免误导更多人,最后,如果你觉得我的文章写的还不错,希望能够点一下喜欢关注,为了我能早日成为简书优秀作者献上一发助攻吧,谢谢!^ ^

推荐阅读更多精彩内容