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-待
内置函数总结 https://www.cnblogs.com/jason-lv/p/8243141.html https://www.cnblogs.com/pyyu/p/6702896.html 数 ...
- java问题
Collection 和 Collections的区别? Collection是集合类的上级接口,继承与他的接口主要有Set 和List. Collections是针对集合类的一个帮助类,他提供一系列 ...
- Springboot+Redis 配置和使用
pom.xml 引入redis 开启缓存 <!-- cache --> <dependency> <groupId>org.springframework.boot ...
- iOS QRcode识别及相册图片二维码读取识别
https://www.jianshu.com/p/48e44fe67c1d 2016.03.30 10:32* 字数 892 阅读 16197评论 5喜欢 34赞赏 1 最近碰到一个用户 在使用我们 ...
- Django 中的Form表单认证
一.Form表单 1.1 Form的几个功能 验证用户数据(显示错误信息) 初始化页面显示内容 HTML Form提交保留上次提交数据 生成HTML标签 1.2 创建表单类Form 1. 创建 ...
- python模块详解
什么是模块? 常见的场景:一个模块就是一个包含了python定义和声明的文件,文件名就是模块名字加上.py的后缀. 但其实import加载的模块分为四个通用类别: 1 使用python编写的代码(.p ...
- KubeCon CloudNativeCon China 2019
KubeCon CloudNativeCon China 2019 - LF Asia, LLChttps://events.linuxfoundation.cn/events/kubecon-clo ...
- Git SSH公钥配置
https://www.cnblogs.com/smuxiaolei/p/7484678.html https://blog.csdn.net/weixin_42063071/article/deta ...
- python 获取列表中次大的数值.
需求: 1.写个函数,把一组数字传到函数中,然后取出最大值和次大值. 2.不能使用排序函数. 分析: Q: list = [100,50,60,70,30,45] 怎么从这个列表中取出最大值? A: ...
- HTML5经典实例——1基础语法和语义
1指定DOCTYPE 在页面的最开始处指定HTML5 DOCTYPE DOCTYPE是不区分大小写的.可以任意的使用大小写. <!DOCTYPE html> <html lang=& ...