gulp使用详解

gulp提供了四个接口

gulp.src

gulp.dest

gulp.task

gulp.watch

++++++++++++++++++++=

gulp.src(globs[,options])

[所谓的 glob 模式是指 shell 所使用的简化了的正则表达式]

该方法就是使用匹配模式获取到相关的文件,例如js,css,image等,然后连接(pipe)输送到相关的插件去做自动化处理。

gulp.src(‘client/templates/*.jade‘)
  .pipe(jade())
  .pipe(minify())
  .pipe(gulp.dest(‘build/minified_templates‘));

例如上面的例子,就是匹配目标文件夹中的任意jade文件,输送到jade()方法处理,之后minify方法处理,最终输出到编译后的目标文件夹!

options是其配置选项,

{

buffer:true,  //是否使用缓冲流? 默认是buffer流 , 当设置为false的时候返回的是file.contents作为流。当处理大文件的时候,设置缓冲是很有用的!

read:true,  //是否读取文件,  当设置为false的时候,会将file.contents设置为null,根本不会读取文件

base:"client"   //映射的基本参照路径。

}

gulp.src(‘client/js/**/*.js‘) // 匹配‘client/js/somedir/somefile.js‘ 并且自动设置 `base` 为 `client/js/`
  .pipe(minify())
  .pipe(gulp.dest(‘build‘));  // 写入 ‘build/somedir/somefile.js‘ gulp.src(‘client/js/**/*.js‘, { base:‘client‘ })  // 制定base 为‘client‘
  .pipe(minify())
  .pipe(gulp.dest(‘build‘));  // 写入 ‘build/js/somedir/somefile.js‘ 

gulp.dest(path[,options])

可以被连接处理,并执行写入文件,它会重新发出来所有发送给他的数据,所以它连接到复杂的文件夹。如果文件夹不存在,它也会自动创建!

path就是任务处理后输出数据的文件夹(output folder)。也可以是一个函数,只要该函数返回一个路径。

options是该方法的配置参数:

cwd: 这是一个字符串,默认值为process.cwd()。 该配置只在提供的输出路径是相对的时候才有效。

mode:默认是0777,设置文件夹的读写属性。

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

基于Orchestrator,用于定义一个任务。

name:任务的名称

deps:任务的依赖,只有执行完这些依赖,才会执行你的任务fn。默认这是一个同步的执行方案。当然也有异步的解决方案(asynchronous)

fn:该任务的具体执行。如果你要异步该执行,那么你需要指定改任务执行完成的信息

一个大概的样子是这样的:

gulp.task(‘buildStuff‘, function() {
  // Do something that "builds stuff"
  var stream = gulp.src(/*some source path*/)
  .pipe(somePlugin())
  .pipe(someOtherPlugin())
  .pipe(gulp.dest(/*some destination*/));

  return stream;
  });

如何异步执行:

var gulp = require(‘gulp‘);

// 注意fn有一个回调参数,所以当任务完成的时候,会调用这个cb,进程就会知道该任务完成了
gulp.task(‘one‘, function(cb) {
    // do stuff -- async or otherwise
    cb(err); // if err is not null and not undefined, the run will stop, and note that it failed
});

// 申明了一个任务two,必须在one完成之后才能执行
gulp.task(‘two‘, [‘one‘], function() {
    // task ‘one‘ is done now
});
//默认我们是申明要执行两个任务,这两个任务会同时初始化,但是任务two会因为有依赖延迟执行
gulp.task(‘default‘, [‘one‘, ‘two‘]);

除了申明回调的方式来异步执行外,还可以返回stream的方式或者返回一个promise对象来实现

gulp.watch(glob[,opts,task])

gulp.watch(glob[,opts,cb])

glob匹配被监听的文件

opts,基于gaze的监听方案

包括:interval:监听的时间间隔

debounceDelay:延迟监听成功的执行

mode:监听模式:auto,watch,poll

cwd:监听文件的工作文件夹,默认是process.cwd()

task 是监听到变化后执行的任务列表,数组格式

cb  是监听到变化后执行进程:cb(event)

event.type : addedchanged 或者deleted.

event.path: 触发该监听事件的文件路径

时间: 2024-08-07 16:58:58

gulp使用详解的相关文章

迈向angularjs2系列(2):angular2组件和指令详解

<%= INIT %> 内容 一:angular2 helloworld! 为了简单快速的运行一个ng2的app,那么通过script引入预先编译好的angular2版本和页面的基本框架. index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> &l

源映射(Source Map)详解

一.什么是源映射 为了提高性能,很多站点都会先压缩 JavaScript 代码然后上线, 但如果代码运行时出现错误,浏览器只会显示在已压缩的代码中的位置,很难确定真正的源码错误位置. 这时源映射就登场了. 源映射(Source Map)是一种数据格式,它存储了源代码和生成代码之间的位置映射关系. 源映射一般使用 .map 扩展名,源映射本质是一个 JSON 文本文档,其 MIME 类型也一般设为 application/json. 二.如何使用源映射 在 JavaScript 代码中添加注释:

Web Material-UI 详解(一) 环境搭建与Helloword

Web Material-UI 详解(一) 环境搭建与Helloword 版权声明:转载必须注明本文转自严振杰的博客: http://blog.yanzhenjie.com 今天介绍一款实现Material Design的开源项目Material-UI,它是一组用来实现Google的Material Design设计规范的React组件,它是一个前端js框架,主要用在web领域,今天主要带领大家认识一下它的面貌,并且实现一个Helloword. Google Material Design官网:

Spring事务管理(详解+实例)

写这篇博客之前我首先读了<Spring in action>,之后在网上看了一些关于Spring事务管理的文章,感觉都没有讲全,这里就将书上的和网上关于事务的知识总结一下,参考的文章如下: Spring事务机制详解 Spring事务配置的五种方式 Spring中的事务管理实例详解 1 初步理解 理解事务之前,先讲一个你日常生活中最常干的事:取钱. 比如你去ATM机取1000块钱,大体有两个步骤:首先输入密码金额,银行卡扣掉1000元钱:然后ATM出1000元钱.这两个步骤必须是要么都执行要么都

转载:DenseNet算法详解

原文连接:http://blog.csdn.net/u014380165/article/details/75142664 参考连接:http://blog.csdn.net/u012938704/article/details/53468483 本文这里仅当学习笔记使用,具体细节建议前往原文细度. 论文:Densely Connected Convolutional Networks 论文链接:https://arxiv.org/pdf/1608.06993.pdf 代码的github链接:h

MariaDB(MySQL)创建、删除、选择及数据类型使用详解

一.MariaDB简介(MySQL简介略过) MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护,采用GPL授权许可 MariaDB的目的是完全兼容MySQL,包括API和命令行,使之能轻松成为MySQL的代替品.在存储引擎方面,使用XtraDB(英语:XtraDB)来代替MySQL的InnoDB. MariaDB由MySQL的创始人Michael Widenius(英语:Michael Widenius)主导开发,他早前曾以10亿美元的价格,将自己创建的公司MySQL A

HttpServletResponse和HttpServletRequest详解

HttpServletResponse,HttpServletRequest详解 1.相关的接口 HttpServletRequest HttpServletRequest接口最常用的方法就是获得请求中的参数,这些参数一般是客户端表单中的数据.同时,HttpServletRequest接口可以获取由客户端传送的名称,也可以获取产生请求并且接收请求的服务器端主机名及IP地址,还可以获取客户端正在使用的通信协议等信息.下表是接口HttpServletRequest的常用方法. 说明:HttpServ

POSIX 线程详解(经典必看)

总共三部分: 第一部分:POSIX 线程详解                                   Daniel Robbins ([email protected]), 总裁/CEO, Gentoo Technologies, Inc.  2000 年 7 月 01 日 第二部分:通用线程:POSIX 线程详解,第 2部分       Daniel Robbins ([email protected]), 总裁/CEO, Gentoo Technologies, Inc.  20

.NET深入解析LINQ框架(五:IQueryable、IQueryProvider接口详解)

阅读目录: 1.环路执行对象模型.碎片化执行模型(假递归式调用) 2.N层对象执行模型(纵横向对比链式扩展方法) 3.LINQ查询表达式和链式查询方法其实都是空壳子 4.详细的对象结构图(对象的执行原理) 5.IQueryable<T>与IQueryProvider一对一的关系能否改成一对多的关系 6.完整的自定义查询 1]. 环路执行对象模型.碎片化执行模型(假递归式调用) 这个主题扯的可能有点远,但是它关系着整个LINQ框架的设计结构,至少在我还没有搞懂LINQ的本意之前,在我脑海里一直频