gulp API

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

1.1、说明:src方法是指定需要处理的源文件的路径,gulp借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,gulp.src返回当前文件流至可用插件;

1.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文件);

1 var gulp = require(‘gulp‘),
2     less = require(‘gulp-less‘);
3
4 gulp.task(‘testLess‘, function () {
5     //gulp.src(‘less/test/style.less‘)
6     gulp.src([‘less/**/*.less‘,‘!less/{extend,page}/*.less‘])
7         .pipe(less())
8         .pipe(gulp.dest(‘./css‘));
9 });

1.3、options:  类型(可选):Object,有3个属性buffer、read、base;

options.buffer:  类型:Boolean  默认:true 设置为false,将返回file.content的流并且不缓冲文件,处理大文件时非常有用;

options.read:  类型:Boolean  默认:true 设置false,将不执行读取文件操作,返回null;

options.base:  类型:String  设置输出路径以某个路径的某个组成部分为基础向后拼接,具体看下面示例:

1 gulp.src(‘client/js/**/*.js‘)
2   .pipe(minify())
3   .pipe(gulp.dest(‘build‘));  // Writes ‘build/somedir/somefile.js‘
4
5 gulp.src(‘client/js/**/*.js‘, { base: ‘client‘ })
6   .pipe(minify())
7   .pipe(gulp.dest(‘build‘));  // Writes ‘build/js/somedir/somefile.js

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

2.1、说明:dest方法是指定处理完后文件输出的路径;

1 gulp.src(‘./client/templates/*.jade‘)
2   .pipe(jade())
3   .pipe(gulp.dest(‘./build/templates‘))
4   .pipe(minify())
5   .pipe(gulp.dest(‘./build/minified_templates‘));

2.2、path:  类型(必填):String or Function 指定文件输出路径,或者定义函数返回文件输出路径亦可;

2.3、options:  类型(可选):Object,有2个属性cwd、mode;

options.cwd:  类型:String  默认:process.cwd():前脚本的工作目录的路径 当文件输出路径为相对路径将会用到;

options.mode:  类型:String  默认:0777 指定被创建文件夹的权限;

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

3.1、说明:task定义一个gulp任务;

3.2、name:  类型(必填):String 指定任务的名称(不应该有空格);

3.3、deps:  类型(可选):StringArray,该任务依赖的任务(注意:被依赖的任务需要返回当前任务的事件流,请参看下面示例);

 1 gulp.task(‘testLess‘, function () {
 2     return gulp.src([‘less/style.less‘])
 3         .pipe(less())
 4         .pipe(gulp.dest(‘./css‘));
 5 });
 6
 7 gulp.task(‘minicss‘, [‘testLess‘], function () { //执行完testLess任务后再执行minicss任务
 8     gulp.src([‘css/*.css‘])
 9         .pipe(minifyCss())
10         .pipe(gulp.dest(‘./dist/css‘));
11 });

3.4、fn:  类型(必填):Function 该任务调用的插件操作;

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

4.1、说明:watch方法是用于监听文件变化,文件一修改就会执行指定的任务;

4.2、glob:  需要处理的源文件匹配符路径。类型(必填):String or StringArray;

4.3、opts:  类型(可选):Object 具体参看https://github.com/shama/gaze

4.4、tasks:  类型(必填):StringArray 需要执行的任务的名称数组;

4.5、cb(event):  类型(可选):Function 每个文件变化执行的回调函数;

1 gulp.task(‘watch1‘, function () {
2     gulp.watch(‘less/**/*.less‘, [‘testLess‘]);
3 });
4
5 gulp.task(‘watch2‘, function () {
6     gulp.watch(‘js/**/*.js‘, function (event) {
7         console.log(‘File ‘ + event.path + ‘ was ‘ + event.type + ‘, running tasks...‘);
8     });
9 });
时间: 2024-10-23 22:01:09

gulp API的相关文章

gulp API 简介

一.gulp API 简介 gulp 本身能做的事情非常少,主要是通过插件来提供各种功能,gulp 本身只提供了4个非常简洁的 API, 掌握这4个 API 你就基本掌握了 gulp 的全部. 1.gulp.src(globs[, options]) 2.gulp.dest(path[, options]) 3.gulp.task(name[, deps], fn) 4.gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb

gulp API 文档

gulp.src(globs[, options]) 输出(Emits)符合所提供的匹配模式(glob)或者匹配模式的数组(array of globs)的文件. 将返回一个 Vinyl files 的 stream 它可以被 piped 到别的插件中. gulp.src('client/templates/*.jade') .pipe(jade()) .pipe(minify()) .pipe(gulp.dest('build/minified_templates')); globs 类型: 

gulp教程之gulp中文API

简介: 本文主要翻译gulp官方API,加上自己一点点拙解. gulp API docs 1.gulp.src(globs[, options]) 1.1.说明:src方法是指定需要处理的源文件的路径,gulp借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,gulp.src返回当前文件流至可用插件: 1.2.globs:  需要处理的源文件匹配符路径.类型(必填):String or StringArray: 通配符路径匹配示例: “src/a.js”:指定具体

gulp不完全入门教程

引言 gulp 是基于 Nodejs 的自动任务运行器,能自动化地完成javascript/coffee/sass/less/html/image/css等文件的的测试.检查.合并.压缩.格式化.浏览器自动刷新.部署文件生成,并监听文件在改动后重复指定的这些步骤.在实现上,gulp 借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上非常简单. 一.安装Gulp gulp 是基于 Nodejs 的自动任务运行器,所以安装gulp之前要先安装node.js

【转】Gulp入门基础教程

Gulp入门基础教程 原文在此 前言最近流行前端构建工具,苦于之前使用Grunt,代码很难阅读,现在出了Gulp, 真是摆脱了痛苦.发现了一篇很好的Gulp英文教程,整理翻译给大家看看. 为什么使用GulpGulp基于Node.js的前端构建工具,通过Gulp的插件可以实现前端 代码的编译(sass.less).压缩.测试:图片的压缩:浏览器自动刷新,还有许多 强大的插件可以在这里查找.比起Grunt不仅配置简单而且更容易阅读和维护,我们 可以做一个对比: Grunt: sass: { dist

用gulp构建你的前端项目

前言 前端技术发展日新月异,随着模块化.组件化的提出,前端变得越来越复杂,静态资源越来越多,那么对静态资源的处理,如压缩,合并,去掉调试信息.. 如果还是人工去处理,效率非常之低且还容易出错,于是自动化的处理工具也就必然出现了.就像后端我们一般用maven管理项目,那么前端gulp是个不错的选择. 什么是gulp 是一个基于 Node.js 流.Javascript语法的快速构建前端项目并减少频繁的 IO 操作的自动化工具. Gulp有什么好处 易于学习使用 通过最少的API(核心.src().

gulp 前端自动化工具

一开篇 在前端开发的过程中,我们经常会碰到压缩.合并.图片script 等,于是就有了gulp 前端自动化构建工具,它能帮你在前端开发中,节省时间. 1,安装 node.js 因为gulp 构建工具是基于node环境的,那么什么是 node.js呢,下面是官方的解释Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效.Node.js 的包管理器 npm,是全球最大的开源库生态系统. 用

前端构建工具之gulp的安装和配置

在选择构建工具时,看到更多人推荐gulp,从此入了gulp的坑- 一.安装node环境 百度谷歌一下就有了,在终端中分别输入 node -v 和 npm -v,若显示node和npm的版本号则说明node环境装好了. 二.安装gulp linux下安装全局环境: sudo npm install -g gulp 或cd进入项目目录下安装gulp到项目本地: npm install gulp --save-dev --save-dev的意思是将安装的gulp版本信息写入package.json,更

gulp进阶构建项目由浅入深

阅读目录 gulp基本安装和使用 gulp API介绍 Gulp.src(globs[,options]) gulp.dest(path[,options]) gulp.task(name[,deps],fn); gulp.watch(glob[,opts],tasks) gulp一些常用插件 gulp-rename(重命名) gulp-uglify(JS压缩) gulp-minify-css(css文件压缩) gulp-minify-html(html压缩) gulp-concat(JS文件合