gulp教程之gulp中文API
来源:互联网 发布:抑毛液有用吗 知乎 编辑:程序博客网 时间:2024/05/18 04:01
本文主要翻译gulp官方API,加上自己一点点理解。
gulp主要的API: gulp.src | gulp.dest | gulp.task | gulp.watch
gulp官方API文档:https://github.com/gulpjs/gulp/blob/master/docs/API.md
1、gulp.src(globs[, options])
(1)说明:src
方法是指定需要处理的源文件的路径,gulp
借鉴了Unix
操作系统的管道(pipe
)思想,前一级的输出,直接变成后一级的输入,gulp.src
返回当前文件流至可用插件;
(2)globs
: 需要处理的源文件匹配符路径。类型(必填):String or StringArray
;
通配符路径匹配示例:
“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
文件);
var gulp = require('gulp'), less = require('gulp-less');gulp.task('testLess', function () { //gulp.src('less/test/style.less') gulp.src(['less/**/*.less','!less/{extend,page}/*.less']) .pipe(less()) .pipe(gulp.dest('./css'));});
(3)options
: 类型(可选):Object
,有3个属性buffer
、read
、base
;
options.buffer
: 类型:Boolean
默认:true
设置为false
,将返回file.content
的流并且不缓冲文件,处理大文件时非常有用;options.read
: 类型:Boolean
默认:true
设置false
,将不执行读取文件操作,返回null
;options.base
: 类型:String
设置输出路径以某个路径的某个组成部分为基础向后拼接,具体看下面示例:
gulp.src('client/js/**/*.js') .pipe(minify()) .pipe(gulp.dest('build')); // Writes 'build/somedir/somefile.js'gulp.src('client/js/**/*.js', { base: 'client' }) .pipe(minify()) .pipe(gulp.dest('build')); // Writes 'build/js/somedir/somefile.js'
2、gulp.dest(path[, options])
(1)说明:dest
方法是指定处理完后文件输出的路径;
gulp.src('./client/templates/*.jade') .pipe(jade()) .pipe(gulp.dest('./build/templates')) .pipe(minify()) .pipe(gulp.dest('./build/minified_templates'));
(2)path
: 类型(必填):String or Function
指定文件输出路径,或者定义函数返回文件输出路径亦可;
(3)options
: 类型(可选):Object
,有2个属性cwd
、mode
;
options.cwd
: 类型:String
默认:process.cwd()
:前脚本的工作目录的路径 当文件输出路径为相对路径将会用到;options.mode
: 类型:String
默认:0777
指定被创建文件夹的权限;
3、gulp.task(name[, deps], fn)
(1)说明:task定义一个gulp任务;
(2)name
: 类型(必填):String
指定任务的名称(不应该有空格);
(3)deps
: 类型(可选):StringArray
,该任务依赖的任务(注意:被依赖的任务需要返回当前任务的事件流,请参看下面示例);
gulp.task('testLess', function () { return gulp.src(['less/style.less']) .pipe(less()) .pipe(gulp.dest('./css'));});gulp.task('minicss', ['testLess'], function () { //执行完testLess任务后再执行minicss任务 gulp.src(['css/*.css']) .pipe(minifyCss()) .pipe(gulp.dest('./dist/css'));});
(4)fn
: 类型(必填):Function
该任务调用的插件操作;
4、gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])
(1)说明:watch
方法是用于监听文件变化,文件一修改就会执行指定的任务;
(2)glob
: 需要处理的源文件匹配符路径。类型(必填):String or StringArray
;
(3)opts
: 类型(可选):Object
具体参看https://github.com/shama/gaze;
(4)tasks
: 类型(必填):StringArray
需要执行的任务的名称数组;
(5)cb(event)
: 类型(可选):Function
每个文件变化执行的回调函数;
gulp.task('watch1', function () { gulp.watch('less/**/*.less', ['testLess']);});gulp.task('watch2', function () { gulp.watch('js/**/*.js', function (event) { console.log('File ' + event.path + ' was ' + event.type + ', running tasks...'); });});
注意:要想掌握
gulp
,你还需要了解nodejs
、npm
、gulp
插件等相关知识!
本文转载自http://www.ydcss.com/archives/424,略有排版。
- gulp教程之gulp中文API
- gulp教程之gulp中文API
- gulp教程之gulp中文API
- gulp教程之gulp中文API
- gulp教程之gulp-imagemin
- gulp教程之gulp-autoprefixer
- gulp教程之gulp-less
- gulp教程之gulp-imagemin
- gulp教程之gulp-htmlmin
- gulp教程之gulp-less
- gulp教程之gulp-uglify
- gulp教程之gulp-concat
- gulp教程之gulp-autoprefixer
- gulp教程之gulp-autoprefixer
- gulp教程之gulp-autoprefixer
- gulp教程之gulp-imagemin
- gulp教程之gulp-uglify
- gulp教程之gulp-htmlmin
- 宏和函数的区别
- 如何隐藏Tomcat服务器Response Header中server信息
- Android自定义View讲解加示例
- [线上问题] Nginx与Tomcat、Client之间请求的长连接配置不一致问题分析解决
- Elasticsearch搜索引擎学习记录1-安装
- gulp教程之gulp中文API
- C语言实现Windows7下的文件清单生成器
- RHEL Linux安装Clang试用
- Java反射的简单例子
- linux内核版本本地版本号的检查
- 低版本物理机部署 高版本OVF 报“硬件系列vmx 12不受支持“解决办法
- img文件挂载
- 例题4-6 师兄帮帮忙 UVa12412
- 【容器技术】使用docker搭建开发环境