Gulp 新手使用
Gulp
注意:gulp依赖于nodejs,在安装前要确保已经安装node环境,如为安装查看《windows系统下nodejs安装及环境配置》安装node环境。
1.全局安装
在命令行执行下边命令,进行全局安装:
npm install --global gulp
检测gulp是否安装成功,执行下边命令:
gulp -v
如果出项下边类似的输出,则为安装成功。
My_computer>>gulp -v
[10:49:34] CLI version 3.9.1
[10:49:34] Local version 3.9.1
2.作为项目的开发依赖(devDependencies)安装
切换到项目目录下,在命令行执行:
npm install --save-dev gulp
--save-dev
为可选参数,表示需要添加到package.json
中的devDependencies
节点下。(前提是项目下已存在package.json
文件)
3.在项目下新建gulpfile.js文件(文件名不可更改),文件内容为:
var gulp = require('gulp'); gulp.task('default', function() {
// 将你的默认的任务代码放在这
console.log("Gulp Test!");
});
4.运行gulp,在项目下执行下面命令,运行gulp
gulp
执行结果如下:
My_computer>>gulp
[10:56:26] Using gulpfile F:\Gulp_src\gulp_test01\gulpfile.js
[10:56:26] Starting 'default'...
Gulp Test!
[10:56:26] Finished 'default' after 208 μs
Gulp API
gulp在git上只介绍了四个API: task
、 dest
、 src
、 watch
,除此之外,gulp还提供了一个 run
方法。
1.gulp.src(globs[, options])
src()
方法是指定需要处理的源文件的路径,gulp借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,gulp.src返回当前文件流至可用插件。
参数 | 说明 |
---|---|
globs | 需要处理的源文件匹配符路径 |
options | 有3个属性buffer、read、base |
globs参数说明:
“css/base.css”:具体文件名称
“css/*.css”:指css下所有以.css结尾的文件
“src/**/*.css”:匹配src下0个或多个文件目录下所有以.css结尾的文件
“!src/js/test.js”:排除src/js下的test.js文件
“{src/js/{a,b}.js}”:匹配src/js下a.js和b.js文件
“{src/img/*.{jpg,png,gif}}”:匹配src/img下的所有jpg/png/gif图片
options参数说明:
options.buffer
: 类型: Boolean
默认:true 设置为false,将返回file.content的流并且不缓冲文件,处理大文件时非常有用;
options.read
: 类型: Boolean
默认:true 设置false,将不执行读取文件操作,返回null;
options.base
: 类型: String
设置输出路径以某个路径的某个组成部分为基础向后拼接
应用实例:
var gulp= require('gulp'),
gulp.task('test', function () {
gulp.src(['src/**/*.css','!src/{extend,page}/*.css'])
.pipe(gulp.dest('./css'));
});
2.gulp.dest(path[, options])
dest()
方法是指定处理完后文件输出的路径。能被 pipe 进来,并且将会写文件。并且重新输出(emits)所有数据,因此你可以将它 pipe 到多个文件夹。如果某文件夹不存在,将会自动创建它。
参数 | 说明 |
---|---|
path | 指定文件输出路径,或者定义函数返回文件输出路径亦可 |
options | 有2个属性cwd、mode |
path参数说明:
指文件输出的路径,可以通过函数返回路径,如果路径不存在会默认创建该路径。文件被写入的路径是以所给的相对路径根据所给的目标目录计算而来。类似的,相对路径也可以根据所给的 base 来计算。
options参数说明:
options.cwd
类型: String
默认值: process.cwd()
输出目录的 cwd
参数,只在所给的输出目录是相对路径时候有效。
options.mode
类型: String
默认值: 0777
八进制权限字符,用以定义所有在输出目录中所创建的目录的权限。
应用实例:
var gulp= require('gulp'),
gulp.task('test', function () {
gulp.src('./client/templates/*.jade')
.pipe(jade())
.pipe(gulp.dest('./build/templates'))
.pipe(minify())
.pipe(gulp.dest('./build/minified_templates'));
});
3.gulp.task(name[,deps],fn)
该方法用来定义一个能够执行的gulp任务。
参数 | 说明 |
---|---|
name | 任务名称,不能包含空格 |
deps | 该任务依赖的任务,依赖任务的执行顺序跟在deps中声明的顺序一致 |
fn | 该任务调用的插件操作 |
name参数说明:
任务的名字,如果你需要在命令行中运行你的某些任务,那么,请不要在名字中使用空格。
deps参数说明:
类型:Array
一个包含任务列表的数组,这些任务会在你当前任务运行之前完成。
gulp.task('mytask', ['array', 'of', 'task', 'names'], function() {
// 做一些事
});
注意: 你的任务是否在这些前置依赖的任务完成之前运行了?请一定要确保你所依赖的任务列表中的任务都使用了正确的异步执行方式:使用一个 callback,或者返回一个 promise 或 stream。
fn参数说明:
该函数定义任务所要执行的一些操作。通常来说,它会是这种形式:gulp.src().pipe(someplugin())
。
应用实例:
vargulp= require('gulp'); gulp.task('test_1',function(){
console.log('test_1 done');
}); gulp.task('test_2',function(){
console.log('test_2 done!');
}); gulp.task('test_3',function(){
console.log('test_3 done');
}); gulp.task('end',['test_1','test_2','test_3'],function(){
console.log('end done');
});
运行结果:
My_computer>>gulp end
[11:31:39] Using gulpfile F:\Gulp_src\gulp_test01\gulpfile.js
[11:31:39] Starting 'test_1'...
test_1 done
[11:31:39] Finished 'test_1' after 171 μs
[11:31:39] Starting 'test_2'...
test_2 done!
[11:31:39] Finished 'test_2' after 581 μs
[11:31:39] Starting 'test_3'...
test_3 done
[11:31:39] Finished 'test_3' after 201 μs
[11:31:39] Starting 'end'...
end done
[11:31:39] Finished 'end' after 291 μs
4.gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb])
监听文件修改,文件修改保存和执行相应配置的任务。
参数 | 说明 |
---|---|
glob | 需要处理的源文件匹配符路径 |
opts | 传给gaze的参数,具体参看 gaze ; |
tasks | 需要执行的任务的名称数组 |
cb(event) | 每个文件变化执行的回调函数 |
glob参数说明:
类型:String或者Array
一个 glob 字符串,或者一个包含多个 glob 字符串的数组,用来指定具体监控哪些文件的变动。
tasks参数说明:
类型:Array
需要在文件变动后执行的一个或者多个通过 gulp.task()
创建的 task 的名字。
cb(event)参数说明:
每次变动需要执行的 callback。
gulp.watch('js/**/*.js', function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});
callback 会被传入一个名为 event
的对象。这个对象描述了所监控到的变动:
event.type
类型: String
发生的变动的类型:added
, changed
或者 deleted
。
event.path
类型: String
触发了该事件的文件的路径。
5.gulp.run()
gulp模块的 run()
方法,表示要执行的任务。可能会使用单个参数的形式传递多个任务。注意:任务是尽可能多的并行执行的,并且可能不会按照指定的顺序运行。
应用实例:
gulp.task('end',function(){
gulp.run('test_1','test_2','test_3');
});
运行结果:
My_computer>>gulp end
[11:56:13] Using gulpfile F:\Gulp_src\gulp_test01\gulpfile.js
[11:56:13] Starting 'end'...
gulp.run() has been deprecated. Use task dependencies or gulp.watch task trigger
ing instead.
[11:56:13] Starting 'test_1'...
test_1 done
[11:56:13] Finished 'test_1' after 562 μs
[11:56:13] Starting 'test_2'...
test_2 done!
[11:56:13] Finished 'test_2' after 207 μs
[11:56:13] Starting 'test_3'...
test_3 done
[11:56:13] Finished 'test_3' after 205 μs
[11:56:13] Finished 'end' after 8.52 ms
Gulp 新手使用的更多相关文章
- gulp的使用以及Gulp新手入门教程
Gulp新手入门教程 原文 http://w3ctrain.com/2015/12/22/gulp-for-beginners/ Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务: 搭 ...
- Gulp新手入门教程
Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务: 搭建web服务器 文件保存时自动重载浏览器 使用预处理器如Sass.LESS 优化资源,比如压缩CSS.JavaScript.压缩图片 ...
- Gulp 常用插件
插件使用注意事项: 插件需要先 npm/cnpm install xx --save-dev gulp taskname,如果 task 已经设置成 default 的依赖,直接 gulp 即可 ta ...
- 前端小白的gulp入门
gulp新手入门 全局安装 cnpm install -g gulp 本地安装cnpm install gulp -D 如果项目没有package.json,记得npm init 安装插件cnpm i ...
- 新手 gulp+ seajs 小demo
首先,不说废话,它的介绍和作者就不在多说了,网上一百度一大堆: 我在这里只是来写写我这2天抽空对seajs的了解并爬过的坑,和实现的一个小demo(纯属为了实现,高手请绕道); 一.环境工具及安装 1 ...
- gulp前端自动化构建工具新手入门篇
很久没有更新博文了. 经过了一次年前吐血的赶项目,终于在年后回血了.趁着有空,新学到了一个前端自动化构建工具-gulp. 现在我们通过这3个问题来学习一下: 1.什么是gulp? 2.为什么要用gul ...
- Gulp探究折腾之路(I)
前言: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码 ...
- 前端打包构建工具gulp快速入门
因为之前一直有人给我推荐gulp,说他这里好哪里好的.实际上对我来说够用就行.grunt熟悉以后实际上他的配置也不难,说到效率的话确实是个问题,尤其项目大了以后,目前位置遇到的项目都还可以忍受.不过不 ...
- r.js结合gulp等于webpack(angular为例)
本人大学时玩dojo,开始了AMD模块化的不归路,工作后一直使用requirejs,感觉非常好.但是,近来随着react的火热,webpack成为了天下无敌的模块化工具,能做模块化,合并压缩,监视等, ...
随机推荐
- Python-类的绑定方法与非绑定方法
类中定义的函数分成两大类 一:绑定方法(绑定给谁,谁来调用就自动将它本身当作第一个参数传入): 绑定到类的方法:用classmethod装饰器装饰的方法. 为类量身定制 类.boud_method() ...
- Python—闭包
闭包的定义:即函数定义和函数表达式位于另一个函数的函数体内(嵌套函数).而且,这些内部函数可以访问它们所在的外部函数中声明的所有局部变量.参数.当其中一个这样的内部函数在包含它们的外部函数之外被调用时 ...
- Mergeable Stack(链表实现栈)
C - Mergeable Stack ZOJ - 4016 一开始用stl中内置的栈来写,其中第三个操作,我先复制到一个数组,再将其倒给另一个栈 这个方法有两个错误的地方: 1.栈在内存很大需要扩容 ...
- 如何优化Docker储存
大家在使用Docker的过程中,有没有想过,Docker在本地存储镜像时把文件存储在哪里了呢?有没有对文件的总大小做一定的限制呢?能不能调整本地存储的位置及总限制大小呢?今天,我们就从这些问题入手,来 ...
- Use the Microsoft Symbol for VS and Windbg
快捷方式mklink的远程符号由于所有者权限问题,链接到本地可能造成不能使用, 或每次都需要重新下载, 1.环境变量中没有设置_NT_SYMBOL_PATH的值 2.windbg快捷方式中也没有设置- ...
- Python PEP8 编码规范中文版
原文链接:https://legacy.python.org/dev/peps/pep-0008/ 参考:https://blog.csdn.net/ratsniper/article/details ...
- MyEclipse 10.X激活方法
普遍的激活办法请参考: http://blog.csdn.net/miss_kun/article/details/51819206 http://jingyan.baidu.com/article/ ...
- mybatis一级缓存详解
mybatis缓存分为一级缓存,二级缓存和自定义缓存.本文重点讲解一级缓存 一:前言 在介绍缓存之前,先了解下mybatis的几个核心概念: * SqlSession:代表和数据库的一次会话,向用户提 ...
- 剑指offer(10)
题目: 输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有的奇数位于数组的前半部分,所有的偶数位于数组的后半部分,并保证奇数和奇数,偶数和偶数之间的相对位置不变. 思路: 如果忽略题目中 ...
- Web移动端---iPhone X适配(底部栏黑横线)
一.相信大家有被iPhone X底部黑色横线支配的恐惧 上面我们可以看到,底部的导航栏被一条黑色横线所盖住,那么就很烦.下面我们可以开始进行适配环节 1.首先我们可以用 JS 判断手机环境是不是 iP ...