Gulp 简易入门及API介绍
2016-02-18 17:45
549 查看
Gulp 是一个自动化工具,前端开发者可以用来处理
搭建 web 服务器
文件保存时自动重载浏览器
使用预处理器 Sass、Less
优化资源,比如压缩图片,JavaScript、压缩图片
这个命令会创建一个 package.json 文件,这个文件保存着这个项目的信息,比如需要的各种依赖(主要是插件)
创建完成后,局部安装 gulp
├── app/
│ └── css/
│ └── fonts/
│ └── images/
│ └── index.html
│ └── js/
│ └── scss/
├── dist/
├── gulpfile.js
├── node_modules/
└── package.json
gulp.task()
gulp.src()
gulp.dest()
gulp.watch()
options 为可选参数,一般用不到
Gulp内部使用了node-glob模块来实现其文件匹配功能。我们可以使用下面这些特殊的字符来匹配我们想要的文件:
比如:
当有多种匹配模式时可以使用数组
path 为写入文件的路径
options 为可选的参数对象,通常不需要用到
name 为任务名
deps 是当前定义的任务需要依赖的其他任务,为一个数组,没有依赖,可以省略
fn 为任务函数,把任务要执行的代码写里面
gulp 还有另外一种用法:
cb 参数为一个函数,每当监视的文件发生变化时,就会调用这个函数,并且会传入一个对象,这个对象包含了文件的变化信息,
搭建 web 服务器
文件保存时自动重载浏览器
使用预处理器 Sass、Less
优化资源,比如压缩图片,JavaScript、压缩图片
安装Gulp
安装 node.js 之后,在全局方式下安装 gulp :npm install -g gulp
创建 Gulp 项目
首先创建一个文件夹,比如 project,在该文件下执行 npm init 指令:npm init
这个命令会创建一个 package.json 文件,这个文件保存着这个项目的信息,比如需要的各种依赖(主要是插件)
创建完成后,局部安装 gulp
npm install gulp --save-dev
目录结构
webapp目录结构通常是这样的├── app/
│ └── css/
│ └── fonts/
│ └── images/
│ └── index.html
│ └── js/
│ └── scss/
├── dist/
├── gulpfile.js
├── node_modules/
└── package.json
Gulp API 介绍
使用 Gulp ,仅需知道 4个APIgulp.task()
gulp.src()
gulp.dest()
gulp.watch()
gulp.src()
gulp.src() 是用来获取流的,可以用这个方法来读取需要操作的文件gulp.src(globs[, options])
Gulp用到的glob的匹配规则
globs 参数是文件的匹配模式,用来匹配文件路径options 为可选参数,一般用不到
Gulp内部使用了node-glob模块来实现其文件匹配功能。我们可以使用下面这些特殊的字符来匹配我们想要的文件:
*匹配文件路径中的0个或多个字符,但不会匹配路径分隔符,除非路径分隔符出现在末尾
**匹配路径中的0个或多个目录及其子目录,需要单独出现,即它左右不能有其他东西了。如果出现在末尾,也能匹配文件。
?匹配文件路径中的一个字符(不会匹配路径分隔符)
[...]匹配方括号中出现的字符中的任意一个,当方括号中第一个字符为^或!时,则表示不匹配方括号中
比如:
*能匹配
a.js, x.y, abc, abc/, 但不能匹配
a/b.js
*.*能匹配
a.js, style.css, a.b, x.y
*/*/*.js能匹配
a/b/c.js, x/y/z.js, 不能匹配
a/b.js, a/b/c/d.js
**能匹配
abc, a/b.js, a/b/c.js, x/y/z,x/y/z/a.b, 能用来匹配所有的目录和文件
**/*.js能匹配
foo.js, a/foo.js, a/b/foo.js, a/b/c/foo.js
a/**/z能匹配
a/z, a/b/z, a/b/c/z, a/d/g/h/j/k/z
a/**b/z能匹配
a/b/z, a/sb/z, 但不能匹配
a/x/sb/z, 因为只有单**单独出现才能匹配多级目录
?.js能匹配
a.js, b.js, c.js
a??能匹配
a.b, abc, 但不能匹配
ab/, 因为它不会匹配路径分隔符
[xyz].js只能匹配
x.js, y.js, z.js, 不会匹配
xy.js, xyz.js等, 整个中括号只代表一个字符
[^xyz].js能匹配
a.js, b.js, c.js等, 不能匹配
x.js, y.js, z.js
当有多种匹配模式时可以使用数组
// 使用数组的方式来匹配多种文件 gulp.src(["js/*.js", "css/*.css", "*.html])
gulp.dest()
gulp.dest() 方法是用来写文件的,该方法把流中的内容写入到文件中, gulp.dest() 传入的路径参数,只能用来指定要生成的目录,而不能指定生成文件的文件名,它生成的文件名使用的是导入到它的文件流本身的文件名gulp.dest(path[, option])
path 为写入文件的路径
options 为可选的参数对象,通常不需要用到
var gulp = require("gulp"); gulp.src("app/js/jquery.js") .pipe(gulp.dest("dist/foo.js")); // 最终生成的文件路径为 dist/foo.js/jquery.js, 而不是 dist/foo.js
gulp.task()
gulp.task() 是用来定义任务的,其语法为:gulp.task(name, [,deps], fn)
name 为任务名
deps 是当前定义的任务需要依赖的其他任务,为一个数组,没有依赖,可以省略
fn 为任务函数,把任务要执行的代码写里面
gulp.watch()
gulp.watch() 用来监视文件的变化,当文件变化时,可执行相应的任务gulp.watch(glob[, option], tasks)
gulp 还有另外一种用法:
gulp.watch(glob[, option], cb)
cb 参数为一个函数,每当监视的文件发生变化时,就会调用这个函数,并且会传入一个对象,这个对象包含了文件的变化信息,
type为变化的类型, 可以是
added, changed, deleted;
path属性为发生变化的文件路径
gulp.watch("js/**/*.js, function(event){ console.log(event.type); // 变化的类型 added为新增 deleted为删除 changed为改变 console.log(event.path); // 变化文件的路径 })
相关文章推荐
- GUI - Web前端开发框架
- 如何优雅地处理前端异常?
- WEB前端开发都应知道的jquery小技巧及jquery三个简写
- 前端开发过程中浏览器版本的两种判定方法
- Bootstrap每天必学之前端开发框架
- 直接拿来用的15个jQuery代码片段
- 10个很棒的jQuery代码片段
- 前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
- 前端开发必须知道的JS之闭包及应用
- linux 自动化运维工具ansible的使用详细教程
- 自动化收集SQLSERVER诊断信息的工具选择及使用介绍
- 分享MySQL的自动化安装部署的方法
- PowerShell 4.0实现自动化设置服务器
- 18个非常棒的jQuery代码片段
- python自动化测试实例解析
- 化繁为简--google protobuf
- CSS Modules 详解及 React 中实践
- ReactJS组件间沟通的一些方法
- 深入解析 ES6 系列(二)
- [前端百科]UI设计师与前端工程师的区别