写在前面
最近在学习web前端,刚好学习到gulp构建工具,就顺便写一写笔记,当做一次简单的练手。由于经验缺乏,本文可能在某些地方做得不那么细致和准确,还望大家指正。
gulp介绍
关于gulp构建工具就不多加赘述了,不熟悉的小伙伴可以自行google或者查看gulp的官网
- gulp中文网:https://www.gulpjs.com.cn/
- gulp‘s github:https://github.com/gulpjs/gulp
gulp使用
gulp
作为一款可以和grunt
抗衡(目前可能已经超过)的构建工具,不仅在前端,对于后端自动化构建也起了很大作用,本文着重介绍gulp
在web前端构建的使用。本文参考自gulp
中文的API和github仓库的doc文档 。gulp
的API少而简单,利于快速学习。gulp
是基于node
和npm
,其中npm
是node
的管理器。
gulp安装
在安装了node
的基础上,安装gulp
1.全局安装gulp
> npm install -g gulp
2.项目根目录下新建package.json
文件,package.json
文件主要是管理项目的依赖和项目的版本信息等。
> npm init
3.为项目安装gulp包,作为开发依赖保存
> npm install --save-dev gulp
4.查看版本号
> gulp -v
gulp入门
对于gulp
入门,我们只需要知道几个基本的API就行了,下面逐一介绍这几个基本的API。
gulp.task(name,[,deps],fn)
gulp.run(tasks.....)
gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])
gulp.src(glob)
gulp.dest(path[,options])
作为演示,本文将由简单入手,结合实例,演示gulp
自动化构建的魅力。根据官方文档,使用gulp
必须先在项目根目录下新建gulpfile.js
文件。然后在文件中引入gulp
,引入方式和node的引入是一样的。
var gulp = require('gulp');
1. 首先是定义任务task()
既然是自动化构建,自然首先我们需要知道它是怎么跑起来的,gulp是基于一系列的任务构建自动化的。见如下的API,我们使用task便可以创建任务。
gulp.task(name,[,deps],fn)
关于其中的参数介绍,请自己查阅文档。使用task,我们可以开始写gulp的构建程序了。
var gulp = require('gulp');
gulp.task('default',function() {
console.log('hello, gulp');
});
在CLI下运行gulp
> gulp
我们将看到打印的结果。这个的default
指的是默认执行的任务,也就是当我们运行gulp命令是,如果gulp后面不加其他参数,那么就默认执行default
,当然,我们也可以为该任务起名为task1
,通过以下命令运行gulpfile
> gulp task1
继续这个API的介绍,一个任务A的执行可以依赖其他任务,而且,当执行任务A的时候,会先执行完所有的依赖任务之后,再执行任务A。例如:
gulp.task('default',['task1', 'task2'], function() {
console.log('hello, gulp');
});
gulp.task('task1', function() {
console.log('task1');
});
gulp.task('task2', function() {
console.log('task2');
});
这段代码的运行结果是执行完['task1','task2']
后再执行default
,需要注意的是,这个的['task1','task2']
的执行并不是串行执行,而是异步执行。如果我们要实现串行执行,可以写成如下这样:
gulp.task('default',['task1'], function() {
console.log('hello, gulp');
});
gulp.task('task1', ['task2'], function() {
console.log('task1');
});
gulp.task('task2', function() {
console.log('task2');
});
那么,default
在执行前需要先执行task1
,而task1
又依赖task2
,所以task2
先执行,后task1
执行,最后执行default
,这样就实现了串行,而实际上,实现任务的串行执行如果这样写的话是很麻烦的,gulp的串行化是可以借助gulp-run-sequence
插件的。
2.第二个要介绍的是run(),顾名思义,我们把上面的代码改一改。
var gulp = require('gulp');
gulp.task('default', function() {
gulp.run('task1');
gulp.run('task2');
console.log('hello, gulp');
});
gulp.task('task1', function() {
console.log('task1');
});
gulp.task('task2', function() {
console.log('task2');
});
这样的执行结果是:实现了串行输出,但提示了我们run() has been deprecated(被弃用了的意思?)。显然就是说,虽然run是用来执行任务,但这个API已经被抛弃使用了,建议我们以后也不要使用它,应该使用任务依赖的形式,在一个任务里执行另一些任务。
[01:17:40] Using gulpfile F:\前端开发\js-jq-bs-test\gulpfile.js
[01:17:40] Starting 'default'...
gulp.run() has been deprecated. Use task dependencies or
gulp.watch task triggering instead.
[01:17:40] Starting 'task1'...
task1
[01:17:40] Finished 'task1' after 322 μs
[01:17:40] Starting 'task2'...
task2
[01:17:40] Finished 'task2' after 463 μs
hello, gulp
[01:17:40] Finished 'default' after
3. 第三个要介绍的是src()
src(path)中的参数path
表示要被处理的文件的路径,可以是正则匹配,也可以是多个文件以数组的形式出现。在项目根目录下新建一个index.html
,同时在使用src()时都是配合其他API或方法,其中常见的是pipe(mid)
操作,它是一个类管道的操作,参数mid表示经由处理的插件,还有dest(destPath)
API,表示将管道的流最终放置到何处。因此,我们可以写出下面的简单使用。
var gulp = require('gulp');
gulp.task('default', function() {
gulp.run(['task1','task2']);;
console.log('hello, gulp');
});
gulp.task('task1', function() {
gulp.src('./index.html')
/*中间可以经由更多的插件处理*/
.pipe(gulp.dest('./dest/'));
});
gulp.task('task2', function() {
console.log('task2');
});
这段代码所做的事情,无非就是将index.html
拷贝到dest
目录下,当然这算是最简单的应用了。所以到目前为止,我们已经介绍了4个gulp
的API
,最后一个是watch()
,一个很重要的API
!
4. watch()实现监听文件改动
我们在调试前端的时候,很讨厌一次改动就要刷新一次浏览器,这样的操作是很费时间的,而gulp
的watch
API就解决了这样的问题,使我们能够专注于代码而不需要动手做其他重复多余的操作。接着上面的index.html,试想如果我们改动了该文件,那么我们可能就需要刷新浏览器来看一下改动后的效果,而实际上,使用watch来监听这样的改动,从而做出指定的动作(自动刷新浏览器或者其他)。
var gulp = require('gulp');
gulp.task('default',['task1', 'watch'], function() {
console.log('hello, gulp');
});
gulp.task('task1', function() {
gulp.src('./index.html')
/*这个可以经由更多的插件处理*/
.pipe(gulp.dest('./dest/'));
});
gulp.task('watch', function() {
gulp.watch('./index.html',['task1'])
});
执行这段代码,我们会发现执行停住 了,且停在看watch任务,没错,此时gulp已经开始监听index.html的变化,一旦变化,它就执行执行的task1
任务。这里的task1
也可以是某个回调函数callback
.
var gulp = require('gulp');
gulp.task('default',['task1', 'watch'], function() {
console.log('hello, gulp');
});
gulp.task('task1', function() {
gulp.src('./index.html')
/*这个可以经由更多的插件处理*/
.pipe(gulp.dest('./dest/'));
});
gulp.task('watch', function() {
gulp.watch('./index.html',function() {
console.log('changed!');
gulp.run('task1');//过期的API,不建议使用
})
});
小结
好了,上面的API如果会使用了,就算是已经在gulp
上入门了吧,其他更复杂的任务实现,需要一些优秀的gulp插件来帮助完成,在下一篇文章,我们接着聊聊。