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. 安装weblogic的步骤10.3.0.0

    一.安装前的注意事项: weblogic在安装前必须要有对应的jdk支持weblogic的运行.所以在安装之前一定要根据本机上安装的jdk来选择安装的weblgoic的什么版本.因为weblogic的 ...

  2. PHP_CURL请求教程, 内含简单粗暴curl

    //curl访问 //需要url或者data //返回的数组是JSON数据形式 function ppd_curl($url,$data = null){ //\Think\Log::record($ ...

  3. [汇编语言]-第七章 用[bx+idata]的方式进行数组的处理

    1- 转化为大写 方法一: assume cs:code,ds:data data segment db 'BaSiC' db 'MinIX' data ends code segment start ...

  4. SQL Server中in与exist效率比较

    in和exists in 是把外表和内表作hash 连接,而exists是对外表作loop循环,每次loop循环再对内表进行查询. 一直以来认为exists比in效率高的说法是不准确的. 如果查询的两 ...

  5. div+css树形菜单

    自己做过的项目从来没有这种东西,但见过别人的项目都有,未免落伍,学来看看,也不知道自己找到的这个是不是正路子,先贴代码再分析. <!doctype html public "-//W3 ...

  6. python socket编程学习笔记2

     server.py: [服务端步骤]: 1.创建socket对象 2.将socket绑定到指定地址(bind) 3.监听连接请求(listen) 4.等待客户请求(accept) 5.处理请求(服务 ...

  7. delphi 操作 TWebBrowser 实现自动填表(JQuery脚本与 OleVariant 方法)

    版本:DELPHI XE8 操作交通银行信用卡申请表单(2016-03-23),网址如下: https://creditcardapp.bankcomm.com/applynew/front/appl ...

  8. VS2012编译Snmp++ v3.2.25

    VS2012编译Snmp++ v3.2.25跟用VC6/VC2010等编译方法区别不大. 网上和教程上盛传的方式是把snmp++的cpp源文件和头文件都加到工程里,再编译.我觉得添加所有头文件到工程里 ...

  9. codec ruby和json格式输出

    zjtest7-frontend:/usr/local/logstash-2.3.4/config# cat geoip.conf input {stdin {} } filter { geoip { ...

  10. 使用Oracle安装账户登录数据库

    如果Linux或Unix平台,安装了Oracle,而且有root账号,则使用“su Oracle安装账户”的方式,sqlplus登录到数据库,这种方式是最可靠的.正如@dbsnake所说,”主要是Or ...