您的位置：首页 > Web前端 > JavaScript

基于流的自动化构建工具「Gulp」

2018-01-25 16:39 155 查看
自动化构建，代码混淆压缩，站点资源优化，打包重复的任务等已成为前端开发者们必不可少的一项技能，不仅能提高我们开发效率，也能减少代码体积提高用户访问速度和减少流量的消耗；而Gulp就是提供了这样功能的一款工具。

# Gulp 能干啥？

  gulp是基于Nodejs的自动任务 
task
运行器， 她能自动化地完成 
javascript / coffee / sass / less / html / image / css
等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。利用 pipe 技术将前一级的输出转换成后一级的输入；她改变了我们开发流程，使开发更加快速高效。

# Gulp 安装

  1. 安装nodejs： 因为Gulp基于nodejs，因此，安装gulp之前需要先安装nodejs，这里不详述，可参考 nodejs 最新版安装 と npm 的使用 一文。

  2. 全局安装gulp： 
npm install gulp -g
；全局安装gulp是为了执行gulp任务

  3. 本地安装gulp： 
npm install gulp
；本地安装gulp则是为了调用gulp插件的功能。

  3. 验证安装版本： 
gulp -v
，出现版本号即为正确安装。

# 添加为 “开发依赖”

  1. 创建package.json文件：用 
npm init
新建一个如下文件

{
"name": "gulpdemo",   //项目名称（必须）
"version": "1.0.0",   //项目版本（必须）
"description": "Gulp project demo",   //项目描述（必须）
"homepage": "",
"repository": {    //项目资源库
"type": "git",
"url": "https://xxxx/xxxx"
},
"author": {
"name": "zfs",
"email": "xxx@163.com"
},
"license": "ISC",    //项目许可协议
"devDependencies": {    //项目依赖的插件

}
}


  2. 把gulp加入到如上文件的 
devDependencies
即开发依赖中

npm install --save-dev gulp


执行完成过之后，我们能看到package.json文件的 
devDenpendencies
节点变成如下，表示我们已经成功将gulp作为开发依赖加入到nodejs环境中

"devDependencies": {    //项目依赖的插件
"gulp": "^3.8.11"
}


 

# 创建 gulpfile.js 文件 【核心】

&emps; gulpfile.js是gulp项目的配置文件，是位于项目根目录的普通js文件。是gulp执行tast的核心文件。结构如下：

var gulp = require('gulp');    // 本地安装gulp所用到的地方
less = require('gulp-less');

//定义一个testLess任务（自定义任务名称）
gulp.task('testLess', function () {
gulp.src('src/less/index.less')     // 该任务针对的文件
.pipe(less()) //该任务调用的模块
.pipe(gulp.dest('src/css'));     // 在src/css下生成index.css

// 定义默认任务，如果有多项任务，用逗号隔开如下所示
gulp.task('default',['testLess', 'anotherTask']);
});


【注释】详情见一下 api 解释模块

gulp.task(name[, deps], fn)
： 其中 
name
为任务名称；
deps
为依赖任务名称； 
fn
为回调函数。

gulp.src(globs[, options])
： 其中 
globs
是处理的文件路径(字符串或者字符串数组)

gulp.dest(path[, options])
： 表示处理完后文件生成路径

 

# 运行 Gulp

  打开你gulpfile.js所在的文件夹执行以下命令

gulp


执行
gulp
命令，名为 
default
的任务将会被执行，如果要执行其他任务，语法为：
gulp <task> <othertask>


gulp testLess


【注】为简化我们的工作，我们可以把每次都要执行的依赖加到default的依赖数组中，这样，每次执行
gulp
时都能自动执行这些任务。

  现在已经安装了所有必要的东西，并且有了一个空的gulpfile，接下来就是为你的项目增加你所需要的task列表。

 

# 完善你的 gulpfile.js - 实战

既然要用gulp工具，肯定是为了让它帮我们干一些事情，如，启动端口，格式化代码，语法检测，浏览器自动刷新等，接下来就来实现几个task。

> 1. 为你的项目增加服务 gulp-webserver

（1）打开根目录，执行 
npm install gulp-webserver --save dev
，可以看到package.json 文件有如下变化：

"devDependencies": {    // 项目开发依赖的插件
"gulp-webserver": "^0.9.1"
}


（2）打开gulpfile.js文件，用 
require()
引入刚安装的模块，并将其定义为常量webserver：

const webserver = require('gulp-webserver')


（3）
4000
依赖已经增加，模块也已经引入，我们可以开始定义我们的
task
了

gulp.task('webserver', () =>
gulp.src('./dist')
.pipe(webserver({
open: 'http://localhost:8080',
port: 8080
})))


【分析】上面我们提过定义一个task的语法：
gulp.task(name[,  deps], fn)
，其中
name
为任务名，
[deps]
是依赖的数组列表，
fn
是回调函数。也就是说，我们定义了一个名为
webserver
的task，因为它的
[deps]
为空，即他没有依赖；在回调函数中，启动了8080端口，打开了‘http://localhost:8080’网址。

（4）启用执行 webserver 任务

在命令行中打开gulpfile所在目录，执行如下指令

gulp webserver


我们能看到在默认浏览器中打开了‘http://localhost:8080’网页，即表示任务配置且执行成功。

（5）为网页增加自动刷新 livereload

同样的方法，npm安装开发依赖 
gulp-livereload
；并在gulpfile首部将模块引入并定义为
livereload
，然后将其加入到
webserver
的任务下，得到如下代码：

gulp.task('webserver', () =>
gulp.src('./dist')
.pipe(webserver({
livereload: true,
open: 'http://localhost:8080',
port: 8080
})))


此时，我们尝试将网络断开，打开浏览器控制台，会发现livereload一直在触发尝试重连。

  到现在为止，
webserver
的任务功能基本已经全部完成。

> API 解释

（1）
gulp.src(globs[, options])


  用作读取匹配要操作的文件，
globs
表示匹配模式字符串，也可以是数组 ，如增添
option.base
参数(见下例二)；他将返回一个stream且可以被 
piped
到别的插件中，在上例任务中，我们将
gulp.src('./dist')
的结果 
pipe
到 webserver里。

gulp.src('v1/js/**/*.js')  // 匹配 v1/js/somedir/somefile.js 文件，并且将base解析为v1/js
.pipe(minify())
.pipe(gulp.dest('build'));  // 写入到 build/somedir/somefile.js 中

gulp.src('v1/js/**/*.js', {base: 'v1'})
.pipe(minify())
.pipe(gulp.dest('build'));   // 写入位置变为 build/js/somedir/somefile.js 中


【注释】
pipe
，即管道，常用作于进程之间的通讯，进行数据的交流；一根管道有两头，可以用两个文件描述符fd来表示，其中fd[0]表示读端，fd[1]表示写端。该例可以理解为将前者的处理结果数据流stream传递到被pipe进来的操作中

（2）
gulp.dest(path[, options])


  常用作输出数据到指定的文件中。它能被 
piped
进来，并且将会写文件。每次调用该接口时都输出当前最新的数据。也就是说，在一个任务中，如果我们需要输出不同阶段的数据，在相应时期调用该接口即可。如果指定文件夹不存在，它将会被创建。

gulp.dest('./v1/templates/*.jade') {
,pipe(jade())
.pipe(gulp.dest('./build/file'))  // 阶段一输出数据
.pipe(minify())
.piped(gulp.dest('./build/minified_file'))  // 阶段二输出数据
}


  文件被写入的路径是以所给的相对路径根据所给的目标目录计算而来。类似的，相对路径也可以根据所给的 base 来计算。

（3）
gulp.task(name[, deps], fn)


  定义/新建一个任务，在命令行中直接使用 
gulp name
来执行该任务。注意任务名不要包含空格。

gulp.task('webserver', function() {
// TODO
})


deps： 如果该任务依赖于其他任务或处于其他任务的下游，即该任务依赖于别的任务，可以如下实现：

gulp.task('mytask', ['array', 'of', 'task', 'names'], function() {
// TODO
})


【注意】因为依赖关系，该任务必须在前置依赖的任务列表执行完成之后执行，那么就要保证这些前置任务列表是否都使用了正确的异步执行方式：1. callback； 2.返回一个promise 或 stream。可以利用如下回调函数来实现。

fn：回调函数：通常为 
gulp.src().pipe(someplugin())
，要使得fn异步执行，需要做到以下其中一点

  > 1. 接受一个 callback function

var exec = require('child_process').exec;
gulp.task('jekyll', function(cb){
exec('jekyll build', function(err) {
err && cb(err)
cb()
})
})


  > 2. 返回一个 stream

gulp.task('somename', function() {
var stream = gulp.src('client/**/*.js')
.pipe(minify())
.pipe(gulp.dest('build'));
return stream;
})


  > 3. 返回一个 promise

var Q = require('q')

gulp.task('somename', function() {
var deferred = Q.defer();

// 执行异步的操作
setTimeout(function() {
deferred.resolve();
})

return deferred.promise;
})


默认的，task 会以最大的并发数执行，也就是说，gulp 会一次性执行所有的任务，并且不做等待，如果你想要创建一个序列化的task队列，并以特定的顺序执行，你需要做两件事：

- 给出一个提示，告知 task 什么时候执行完毕，

- 再给出一个提示，来告知一个task依赖另一个 task 执行；

实例说明，假设我们有两个 task，
one
和 
two
，并且你希望它们先执行
one
，再执行 
two
：

1. 在 “one” 中，你加入一个提示，来告知什么时候它会完成：可以再完成时候返回一个 callback，或者返回一个 promise 或 stream，这样系统会去等待它完成。

2. 在 “two” 中，你需要添加一个提示来告诉系统它需要依赖第一个 task 完成。

那么，代码将会是这样的：

var gulp = request('gulp')

// 任务“one”中，返回一个callback，来告知系统它什么时候完成
gulp.task('one', function(cb) {
// TODO anysc or other thing
cb(err)  // 如果err为不为null或undefiend，则停止执行，表示执行失败。
})

// 任务“two”中，依赖任务“one”，那么“two”就需要在“one”之前执行
gulp.task('two', ['one'], function() {
// "one"执行完成后
})

gulp.task('default', ['one', 'two']);


(4) 
gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb])


监视文件，并且可以在文件发生改动时候做一些事情。它总会返回一个 EventEmitter 来触发 change 事件。

> 
gulp.watch(glob [, opts], tasks)


glob：一个 glob 字符串，或者一个包含多个 glob 字符串的数组，用来指定具体监控哪些文件的变动。

opts：需要在文件变动后执行的一个或者多个通过 gulp.task() 创建的 task 的名字。

var watcher = gulp.watch('js/**/*.js', ['uglify','reload']);
watcher.on('change', function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});


> 
gulp.watch(glob[, opts, cb])


glob：一个 glob 字符串，或者一个包含多个 glob 字符串的数组，用来指定具体监控哪些文件的变动。

cb(event)：每次变动需要执行的 callback。

gulp.watch('js/**/*.js', function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});


callback 会被传入一个名为 event 的对象。这个对象描述了所监控到的变动：

event.type：发生的变动的类型：added, changed 或者 deleted。

event.path：触发了该事件的文件的路径。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript 自动化工具
相关文章推荐
新的分享
章节导航