gulp使用笔记
2016-03-15 20:06
260 查看
gulp简介
gulp 是基于 Nodejs 的自动任务运行器,能自动化地完成javascript/coffee/sass/less/html/image/css等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。在实现上, gulp 借鉴了Unix操作系统的管道(pipe)思想,就是前一级的输出,直接变成后一级的输入,使其在操作上非常简单.
安装
gulp是基于node的自动任务运行器,所以需要事先安装好node.
1.全局安装gulp:
2.需要在项目的根目录下创建一个配置文件gulpfile.js:
3.运行gulp:
默认的名为 default 的任务(task)将会被运行,在这里,这个任务并未做任何事情。
需要单独执行特定的任务(task),需要输入
API
gulp在git上介绍了四个API:
1.gulp.src(globs[, options])
参数:
globs: 需要处理的源文件匹配符路径
options: 有3个属性buffer、read、base
“src/a.js”:指定具体文件;
“*”:匹配所有文件 例:src/*.js(包含src下的所有js文件);
“**”:匹配0个或多个子文件夹 例:src/**/*.js(包含src的0个或多个子文件夹下的js文件);
“{}”:匹配多个属性 例:src/{a,b}.js(包含a.js和b.js文件) src/*.{jpg,png,gif}(src下的所有jpg/png/gif文件);
“!”:排除文件 例:!src/a.js(不包含src下的a.js文件);
想像一下在一个路径为
2.gulp.dest(path[, options])
dest()方法是指定处理完后文件输出的路径
path:指定文件输出路径,或者定义函数返回文件输出路径也可
options:有两个属性,cwd和mode
options.cwd:类型:
optoins.mode:类型:
gulpfile.js像这样:
利用
3.gulp.task(name[, deps], fn)
这个方法用来创建一个gulp任务。
参数说明:
name:任务名称,如果需要在命令行中运行某些任务,那么,请不要在名字中使用空格。
deps:类型:
注意: 任务是否在这些前置依赖的任务完成之前运行了?请一定要确保所依赖的任务列表中的任务都使用了正确的异步执行方式:使用一个 callback,或者返回一个 promise 或 stream。
fn:该函数定义任务所要执行的一些操作。通常来说,它会是这种形式:
如果fn可以接收callback,或者返回一个promise或stream,任务可以异步执行:
接收callback:
返回stream:
返回promise:
4.gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb])
用于监听文件变化,文件一修改就会执行指定的任务.
参数说明:
glob:类型:
opts:Object,传给gaze的参数。
tasks:类型:
cb:类型:
或
callback 会被传入一个名为
event.type:类型:
event.path:类型:
gulp插件
gulp 插件很多, 这里 可以查看完整的列表。
gulp 是基于 Nodejs 的自动任务运行器,能自动化地完成javascript/coffee/sass/less/html/image/css等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。在实现上, gulp 借鉴了Unix操作系统的管道(pipe)思想,就是前一级的输出,直接变成后一级的输入,使其在操作上非常简单.
安装
gulp是基于node的自动任务运行器,所以需要事先安装好node.
1.全局安装gulp:
$ npm install --global gulp
2.需要在项目的根目录下创建一个配置文件gulpfile.js:
var gulp = require('gulp'); gulp.task('default', function() { // 默认的任务代码 });
3.运行gulp:
$ gulp
默认的名为 default 的任务(task)将会被运行,在这里,这个任务并未做任何事情。
需要单独执行特定的任务(task),需要输入
gulp <task> <othertask>。
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的文件匹配说明:
“src/a.js”:指定具体文件;
“*”:匹配所有文件 例:src/*.js(包含src下的所有js文件);
“**”:匹配0个或多个子文件夹 例:src/**/*.js(包含src的0个或多个子文件夹下的js文件);
“{}”:匹配多个属性 例:src/{a,b}.js(包含a.js和b.js文件) src/*.{jpg,png,gif}(src下的所有jpg/png/gif文件);
“!”:排除文件 例:!src/a.js(不包含src下的a.js文件);
options.buffer: 类型:
Boolean默认:true 设置为false,将返回file.content的流并且不缓冲文件,处理大文件时非常有用;
options.read: 类型:
Boolean默认:true 设置false,将不执行读取文件操作,返回null;
options.base: 类型:
String,会加在glob之前
想像一下在一个路径为
client/js/somedir的目录中,有一个文件叫
somefile.js:
gulp.src('client/js/**/*.js') // 匹配 'client/js/somedir/somefile.js' .pipe(minify()) .pipe(gulp.dest('build')); // 写入 'build/somedir/somefile.js' gulp.src('client/js/**/*.js', { base: 'client' }) .pipe(minify()) .pipe(gulp.dest('build')); // 写入 'build/js/somedir/somefile.js'并且将 `base` 解析为 `client/js/`
2.gulp.dest(path[, options])
dest()方法是指定处理完后文件输出的路径
path:指定文件输出路径,或者定义函数返回文件输出路径也可
options:有两个属性,cwd和mode
options.cwd:类型:
String默认值:
process.cwd().输出目录的
cwd参数,只在所给的输出目录是相对路径时候有效。
optoins.mode:类型:
String默认值:
0777.八进制权限字符,用以定义所有在输出目录中所创建的目录的权限。
gulpfile.js像这样:
var gulp = require('gulp'); gulp.task('testtask', function() { gulp.src('./js/test.js') .pipe(gulp.dest('./build')); });
利用
gulp.dest('./build')将新建的test.js文件移动到了build目录,对比前后两次的
ls -al命令,
dest()会自动创建目录。
3.gulp.task(name[, deps], fn)
这个方法用来创建一个gulp任务。
参数说明:
name:任务名称,如果需要在命令行中运行某些任务,那么,请不要在名字中使用空格。
deps:类型:
Array.一个包含任务列表的数组,这些任务会在当前任务运行之前完成。
gulp.task('mytask', ['array', 'of', 'task', 'names'], function() { // 做一些事 });
注意: 任务是否在这些前置依赖的任务完成之前运行了?请一定要确保所依赖的任务列表中的任务都使用了正确的异步执行方式:使用一个 callback,或者返回一个 promise 或 stream。
fn:该函数定义任务所要执行的一些操作。通常来说,它会是这种形式:
gulp.src().pipe(someplugin())。
如果fn可以接收callback,或者返回一个promise或stream,任务可以异步执行:
接收callback:
// 在 shell 中执行一个命令 var exec = require('child_process').exec; gulp.task('jekyll', function(cb) { // 编译 Jekyll exec('jekyll build', function(err) { if (err) return cb(err); // 返回 error cb(); // 完成 task }); });
返回stream:
gulp.task('somename', function() { var stream = gulp.src('client/**/*.js') .pipe(minify()) .pipe(gulp.dest('build')); return stream; });
返回promise:
var Q = require('q'); gulp.task('somename', function() { var deferred = Q.defer(); // 执行异步的操作 setTimeout(function() { deferred.resolve(); }, 1); return deferred.promise; });
4.gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb])
用于监听文件变化,文件一修改就会执行指定的任务.
参数说明:
glob:类型:
Stringor
Array,一个 glob 字符串,或者一个包含多个 glob 字符串的数组,用来指定具体监控哪些文件的变动。
opts:Object,传给gaze的参数。
tasks:类型:
Array,需要在文件变动后执行的一个或者多个通过
gulp.task()创建的 task 的名字.
cb:类型:
Function,每次变动需要执行的 callback。
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('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,触发了该事件的文件的路径。
gulp插件
gulp 插件很多, 这里 可以查看完整的列表。
相关文章推荐
- #import、#include、#import<>和#import””的区别
- BZOJ 1607 轻拍牛头
- fastjson 使用笔记
- Mac 使用brew 安装软件
- HDU 2089 不要62
- Python琐碎知识总结
- gradle 跨工程引用
- AngularJS介绍 - 下一个大框架
- 不同vlan间通信的三种配置方式
- Java泛型中extends和super的理解(转)
- Spark源码
- *单链表[带头结点]
- Sort Colors
- override和重载的区别
- 如何在 block 中修改外部变量
- About Zsh & Go2Shell & iTerm2
- 3-12,3-13考试总结
- java设计模式之 观察者模式
- Android Studio添加Parcelable序列化小工具(快速提高开发效率)
- HDU 1722 cake