gulp api

简介

gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成

gulp是基于Nodejs的自动任务运行器, 它能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。

gulp 和 grunt 非常类似,但相比于 grunt 的频繁 IO 操作,gulp 的流操作,能更快地更便捷地完成构建工作。

安装

npm install -g gulp-cli //安装gulp命令行工具
npm install --save-dev gulp //安装gulp到项目

gulpfile.js

var gulp = require('gulp');
gulp.task('default', function(){
//codes..
});

执行gulp

gulp //执行 default任务
gulp connect less //执行多个任务

gulp.src(glob , [options])

gulp.src() 返回当前文件流至可用的插件

  • glob string / stringArray 匹配源文件的模式字符串

    通配符路径示例:

    "src/a.js" //具体的文件

    "src/*" //src下的所有文件

    "src/**/*.js" //src下所有层级的子文件夹中的js

    "{}" //匹配多个属性 src/{a,b}.js (匹配src/a.js, src/b.js), src/*.{png,jpg,gif} (匹配src文件夹下的图片)

    !src/a.js //排除src/a.js文件

      var gulp = require('gulp');
    var 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'));
  • options object 可选

      options =>
    {
    buffer: true, //是否缓冲文件流,处理大文件时有用
    read: true, //是否执行文件读取操作
    base: 'some/path' //输出路径的基础路径
    } gulp.src('client/js/**/*.js')
    .pipe(minify())
    .pipe(gulp.dest('build')); //writes 'build/somdir/somefile.js' gulp.src('client/js/**/*.js', {base:'client'})
    .pipe(minify())
    .pipe(gulp.dest('build'));//writes 'build/js/somedir/somefile.js'

gulp.dest(path, [options])

gulp.dest() 指定处理完成后文件的输出路径

gulp.src('./client/templates/*.jade')
.pipe(jade())
.pipe(gulp.dest('./build/tempaltes')
.pipe(minify())
.pipe(gulp.dest('./build/minify_templates');
  • path string or function 指定文件的输出路径

  • options 可选

      options=>{
    cwd: process.cwd(), //文件的输出路径若为相对路径,则相对cwd
    mode: '0777' //被创建文件的权限
    }

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

name string 任务名称 不能有空格

deps stringArray 该任务依赖的任务,注意:被依赖的任务需返回它的事件流

fn function 该任务调用的插件

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'));

gulp.watch(glob, [options], tasks) ,gulp.watch(glob, [options], [fn])

gulp.watch() 监听文件变化并执行指定任务

glob string or stringArray 同 gulp.src(glob)

options object 可选

tasks stringArray 需执行的任务数组

fn function 每个文件变化执行的回调函数

gulp.task('watch1', function(){
gulp.watch('less/**/*.less', ['testless']);
}); gulp.task('watch2', function(){
gulp.watch('js/**/*.js', function(file){
console.log('file ' + file.path + ' was ' + file.type + ', running tasks..');
});
});

gulp api的更多相关文章

  1. gulp API 文档

    gulp.src(globs[, options]) 输出(Emits)符合所提供的匹配模式(glob)或者匹配模式的数组(array of globs)的文件. 将返回一个 Vinyl files  ...

  2. Gulp API之怎样压缩CSS

    先做一个简单的科普 gulp.src() 是用来定位执行路径的,参数通常是一个path gulp.dest() 是用来定位输出路径的,执行的结果都会保存在这个路径下面,可以到路径下面查看结果 gulp ...

  3. gulp初学

    原文地址:gulp初学 至于gulp与grunt的区别,用过的人都略知一二,总的来说就是2点: 1.gulp的gulpfile.js  配置简单而且更容易阅读和维护.之所以如此,是因为它们的工作方式不 ...

  4. Gulp探究折腾之路(I)

    前言: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码 ...

  5. 用gulp构建你的前端项目

    前言 前端技术发展日新月异,随着模块化.组件化的提出,前端变得越来越复杂,静态资源越来越多,那么对静态资源的处理,如压缩,合并,去掉调试信息.. 如果还是人工去处理,效率非常之低且还容易出错,于是自动 ...

  6. gulp使用小结(二)

    接上篇文章接Gulp使用小结(一) 内容如下: 首先,偶在gulp-demos上已经提交了个较通用的栗子...俺琢磨半天,原准备分阶段搞些 Gulp 套路,但是写完介个栗子之后,觉得已经能覆盖绝大多数 ...

  7. gulp使用小结(一)

    这篇文章不会介绍 gulp 的起源.发展:不会去一个个讲解 gulp API:也不想出现大段大段的 gulpfile.js 代码:更木有帮你分析 gulp 实现原理,只有一些我自己对 gulp 的使用 ...

  8. gulp学习笔记4

    gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 之前的任务都是单个的,比较简单.接下去我们开始引用多个插件,一次性把任务搞定,省 ...

  9. gulp进阶构建项目由浅入深

    gulp进阶构建项目由浅入深 阅读目录 gulp基本安装和使用 gulp API介绍 Gulp.src(globs[,options]) gulp.dest(path[,options]) gulp. ...

随机推荐

  1. table中td,th不能设置margin

    首先,我们需要知道的是:我们可以对表格table设置margin,而不能设置padding;对单元格td设置padding,而不能设置margin.所以说,我们不能对单元格td设置margin属性来调 ...

  2. PHP环境出现时区问题

    如下图所示,php执行的时候出现如下提示: 解决办法: 重新设置php编译的时区. 具体方法如下: 1. 找到php.ini文件: 2. 修改php.ini文件中的date.timezone的值,将其 ...

  3. yii操作数据库(PDO)

    1.数据访问对象(DAO): 执行 SQL 语句 数据库连接建立后,SQL 语句就可以通过使用 [CDbCommand] 执行了.你可以通过使用指定的SQL语句作为参数调用 [CDbConnectio ...

  4. 程序A+B问题(一次输入和多次输入)

    这是早就会写的题,把它整理一下,比较容易. ➀一次输入数据,计算A+B   #include<stdio.h> #include<stdlib.h> int main() { ...

  5. nginx上传模块nginx_upload_module和nginx_uploadprogress_module模块进度显示,如何传递GET参数等。

    ownload:http://www.grid.net.ru/nginx/download/nginx_upload_module-2.2.0.tar.gzconfigure and make : . ...

  6. C#多显示器转换的两种方法——SetWindowPos,Screen

    原文 http://blog.csdn.net/hejialin666/article/details/6057551 实现多屏显示目的:一般情况下是一个电脑显示屏,外接一个电视显示屏.在电脑上显示的 ...

  7. Inno Setup设定只运行一个安装包

    原文 http://zwkufo.blog.163.com/blog/static/25882512010292526944/?suggestedreading&wumii 在安装包中,经常会 ...

  8. 切图教程,PS和AI切图方法分享

  9. wxpython 拖动界面时进入假死状态(未响应)解决方法

    场景:在一个事件中调用一个函数,但是这个函数执行的时间非常的长,此过程中拖动界面的时候会使得界面进入未响应状态,直到函数执行完才可以ok 解决方法: 在调用函数的时候使用多线程调用 import th ...

  10. javascript第十七课:this使用

    例如,我们要一个元素的值 function f1(){ alert(this.id); } document.getElementByid('#id').onclick=f1;  //将函数赋值给事件