gulp操做

注意：gulp依赖于nodejs，在安装前要确保已经安装node环境，如为安装查看《windows系统下nodejs安装及环境配置》安装node环境。

1.全局安装

在命令行执行下边命令，进行全局安装：

npm install --global gulp

检测gulp是否安装成功，执行下边命令：

gulp -v

若是出项下边相似的输出，则为安装成功。

My_computer>>gulp -v[10:49:34] CLI version 3.9.1[10:49:34] Local version 3.9.1

2.做为项目的开发依赖（devDependencies）安装

切换到项目目录下，在命令行执行：

npm install --save-dev gulp

--save-dev为可选参数，表示须要添加到package.json中的devDependencies节点下。（前提是项目下已存在package.json文件）

3.在项目下新建gulpfile.js文件（文件名不可更改），文件内容为：

var gulp = require('gulp'); gulp.task('default', function() {// 将你的默认的任务代码放在这

console.log("Gulp Test!");});

4.运行gulp，在项目下执行下面命令，运行gulp

gulp

执行结果以下：

My_computer>>gulp[10:56:26] Using gulpfile F:\Gulp_src\gulp_test01\gulpfile.js[10:56:26] Starting 'default'...Gulp Test![10:56:26] Finished 'default' after 208 μs

Gulp API

gulp在git上只介绍了四个API： task 、 dest 、 src 、 watch ，除此以外，gulp还提供了一个 run 方法。

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

src() 方法是指定须要处理的源文件的路径，gulp借鉴了Unix操做系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，gulp.src返回当前文件流至可用插件。

 

参数	说明
globs	须要处理的源文件匹配符路径
options	有3个属性buffer、read、base

 

globs参数说明：

“css/base.css”：具体文件名称

“css/*.css”：指css下全部以.css结尾的文件

“src/**/*.css”：匹配src下0个或多个文件目录下全部以.css结尾的文件

“!src/js/test.js”：排除src/js下的test.js文件

“{src/js/{a,b}.js}”：匹配src/js下a.js和b.js文件

“{src/img/*.{jpg,png,gif}}”：匹配src/img下的全部jpg/png/gif图片

options参数说明：

options.buffer ： 类型： Boolean 默认：true 设置为false，将返回file.content的流而且不缓冲文件，处理大文件时很是有用；

options.read ： 类型： Boolean 默认：true 设置false，将不执行读取文件操做，返回null；

options.base ： 类型： String 设置输出路径以某个路径的某个组成部分为基础向后拼接

应用实例：

var gulp= require('gulp'),

gulp.task('test', function () {

gulp.src(['src/**/*.css','!src/{extend,page}/*.css'])

 .pipe(gulp.dest('./css'));});

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

dest() 方法是指定处理完后文件输出的路径。能被 pipe 进来，而且将会写文件。而且从新输出（emits）全部数据，所以你能够将它 pipe 到多个文件夹。若是某文件夹不存在，将会自动建立它。

 

参数	说明
path	指定文件输出路径，或者定义函数返回文件输出路径亦可
options	有2个属性cwd、mode

 

path参数说明：

指文件输出的路径，能够经过函数返回路径，若是路径不存在会默认建立该路径。文件被写入的路径是以所给的相对路径根据所给的目标目录计算而来。相似的，相对路径也能够根据所给的 base 来计算。

options参数说明：

options.cwd

类型： String 默认值： process.cwd()

输出目录的 cwd 参数，只在所给的输出目录是相对路径时候有效。

options.mode

类型： String 默认值： 0777

八进制权限字符，用以定义全部在输出目录中所建立的目录的权限。

应用实例：

var gulp= require('gulp'),

gulp.task('test', function () {

gulp.src('./client/templates/*.jade').pipe(jade()).pipe(gulp.dest('./build/templates')).pipe(minify()).pipe(gulp.dest('./build/minified_templates'));});

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

该方法用来定义一个可以执行的gulp任务。

 

参数	说明
name	任务名称，不能包含空格
deps	该任务依赖的任务，依赖任务的执行顺序跟在deps中声明的顺序一致
fn	该任务调用的插件操做

 

name参数说明：

任务的名字，若是你须要在命令行中运行你的某些任务，那么，请不要在名字中使用空格。

deps参数说明：

类型：Array

一个包含任务列表的数组，这些任务会在你当前任务运行以前完成。

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

 // 作一些事 });

注意： 你的任务是否在这些前置依赖的任务完成以前运行了？请必定要确保你所依赖的任务列表中的任务都使用了正确的异步执行方式：使用一个 callback，或者返回一个 promise 或 stream。

fn参数说明：

该函数定义任务所要执行的一些操做。一般来讲，它会是这种形式：gulp.src().pipe(someplugin())。

应用实例：

vargulp= require('gulp');

 

gulp.task('test_1',function(){

console.log('test_1 done');});

 

gulp.task('test_2',function(){

console.log('test_2 done!');});

 

gulp.task('test_3',function(){

console.log('test_3 done');});

 

gulp.task('end',['test_1','test_2','test_3'],function(){

  console.log('end done');});

运行结果：

My_computer>>gulp end[11:31:39] Using gulpfile F:\Gulp_src\gulp_test01\gulpfile.js[11:31:39] Starting 'test_1'...

test_1 done[11:31:39] Finished 'test_1' after 171 μs[11:31:39] Starting 'test_2'...

test_2 done![11:31:39] Finished 'test_2' after 581 μs[11:31:39] Starting 'test_3'...

test_3 done[11:31:39] Finished 'test_3' after 201 μs[11:31:39] Starting 'end'...end done[11:31:39] Finished 'end' after 291 μs

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

监听文件修改，文件修改保存和执行相应配置的任务。

 

参数	说明
glob	须要处理的源文件匹配符路径
opts	传给gaze的参数，具体参看 gaze ；
tasks	须要执行的任务的名称数组
cb(event)	每一个文件变化执行的回调函数

 

glob参数说明：

类型：String或者Array

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

tasks参数说明：

类型：Array

须要在文件变更后执行的一个或者多个经过 gulp.task() 建立的 task 的名字。

cb(event)参数说明：

每次变更须要执行的 callback。

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

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

event.type

类型： String

发生的变更的类型：added, changed 或者 deleted。

event.path

类型： String

触发了该事件的文件的路径。

5.gulp.run()

gulp模块的 run() 方法，表示要执行的任务。可能会使用单个参数的形式传递多个任务。注意：任务是尽量多的并行执行的，而且可能不会按照指定的顺序运行。

应用实例：

gulp.task('end',function(){

  gulp.run('test_1','test_2','test_3');});

运行结果：

My_computer>>gulp end[11:56:13] Using gulpfile F:\Gulp_src\gulp_test01\gulpfile.js[11:56:13] Starting 'end'...

gulp.run() has been deprecated. Use task dependencies or gulp.watch task trigger

ing instead.[11:56:13] Starting 'test_1'...

test_1 done[11:56:13] Finished 'test_1' after 562 μs[11:56:13] Starting 'test_2'...

test_2 done![11:56:13] Finished 'test_2' after 207 μs[11:56:13] Starting 'test_3'...

test_3 done[11:56:13] Finished 'test_3' after 205 μs[11:56:13] Finished 'end' after 8.52 ms