gulp两种配置方式总结
#自动化构建工具 gulp
优点:
基于流,任务化
可以对我们写完的项目进行自动打包处理
压缩
合并
增加版本号
常用API:src 读,dest 写,watch 监控,task 定制任务,pipe 用流的方式处理
基本命令
npm init -y
npm i -g gulp
npm i gulp --save-dev
安装gulp插件
gulp
gulp-clean //执行任务前先删除一次build目录
gulp-concat //使用gulp-concat合并javascript文件,减少网络请求
gulp-connect //浏览器自动刷新
gulp-cssmin //压缩css文件
gulp-imagemin //压缩图片
gulp-less //将less文件编译成css
gulp-load-plugins [//可以加载package.json文件中所有的gulp模块](()。避免一个个手动加载的问题;
gulp-uglify //压缩javascript文件,减小文件大小
open
编写任务
lib
html
json
less
js
image
clean
reload
watch
编写配置文件
引入必要的模块;并配置gulpfile.js
var gulp=require(‘gulp’);
var = r e q u i r e ( ′ g u l p − l o a d − p l u g i n s ′ ) ( ) ; / / 我 们 其 他 g u l p 模 块 都 可 以 直 接 用 =require('gulp-load-plugins')();//我们其他gulp模块都可以直接用 =require(′gulp−load−plugins′)();//我们其他gulp模块都可以直接用引入,不需要声明变量了
var open=require(‘open’); //open单独引入,因为他没有以gulp开头
//app:用来定义目录路径;
var app={
srcPath:‘src/’,//源代码目录
devPath:‘build/’,//开发目录,整合之后的文件
prdPath:‘dist/’//生产上线目录,生产和部署
};
//拷贝文件:拷贝第三方文件到开发和生产目录;
gulp.task(‘lib’,function () {
gulp.src(‘bower_components//*.js’)///_:对当前bower_components下所有文件,进行深度遍历;同时读取所有文件
.pipe(gulp.dest(app.devPath+‘vendor’)) //拷贝到开发,并重命名
.pipe(gulp.dest(app.prdPath+‘vendor’)) //拷贝到生产目录;
.pipe(KaTeX parse error: Expected ‘EOF’, got ‘}’ at position 51: …级浏览器支持IE9及9以上; }̲); //拷贝html gul….connect.reload())
})
//json
gulp.task(‘json’,functio 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 n () {
gulp.src(app.srcPath+’/data/**/_.json’)
.pipe(gulp.dest(app.devPath+‘data’))
.pipe(gulp.dest(app.prdPath+‘data’))
.pipe(KaTeX parse error: Expected ‘EOF’, got ‘}’ at position 20: …nect.reload()) }̲) //以下任务会有变化 //….less())
.pipe(gulp.dest(app.devPath+‘css’))
.pipe( . c s s m i n ( ) ) / / 运 用 生 产 环 境 之 前 , 先 压 缩 下 ; . p i p e ( g u l p . d e s t ( a p p . p r d P a t h + ′ c s s ′ ) ) . p i p e ( .cssmin()) //运用生产环境之前,先压缩下; .pipe(gulp.dest(app.prdPath+'css')) .pipe( .cssmin())//运用生产环境之前,先压缩下;.pipe(gulp.dest(app.prdPath+′css′)).pipe(.connect.reload())
})
//js
gulp.task(‘js’,function () {
gulp.src(app.srcPath+‘scripts/**/*.js’)
.pipe( . c o n c a t ( ′ i n d e x . j s ′ ) ) / / 进 行 J S 代 码 合 并 ; 合 并 后 到 开 发 环 境 . p i p e ( g u l p . d e s t ( a p p . d e v P a t h + ′ j s ′ ) ) . p i p e ( .concat('index.js')) //进行JS代码合并;合并后到开发环境 .pipe(gulp.dest(app.devPath+'js')) .pipe( .concat(′index.js′))//进行JS代码合并;合并后到开发环境.pipe(gulp.dest(app.devPath+′js′)).pipe(.uglify()) //压缩后,再发布到生产环境
.pipe(gulp.dest(app.prdPath+‘js’))
.pipe(KaTeX parse error: Expected ‘EOF’, got ‘}’ at position 20: …nect.reload()) }̲) //image gulp.….imagemin())
.pipe(gulp.dest(app.prdPath+‘image’))
.pipe(KaTeX parse error: Expected ‘EOF’, got ‘}’ at position 20: …nect.reload()) }̲) //以上就完成静态资源文件….clean())
})
//写一个总的任务,把以上任务进行合并起来,以后想打包整个项目,只需要执行build任务即可;
gulp.task(‘build’,[‘image’,‘js’,‘less’,‘lib’,‘json’,‘html’]);
//问题:开发完一段代码后,想看看它的实际效果,我们得build,然后启动服务器,到服务器中去查看;
//自动化打包编译,并运行服务器
gulp.task(‘serve’,[‘build’],function () {
. c o n n e c t . s e r v e r ( r o o t : [ a p p . d e v P a t h ] , l i v e r e l o a d : t r u e , / / 自 动 加 载 p o r t : 1234 ) / / 自 动 打 开 浏 览 器 o p e n ( ′ h t t p : / / l o c a l h o s t : 123 4 ′ ) / / 实 现 自 动 编 译 ; 我 们 希 望 的 是 , 每 更 改 一 段 代 码 , 它 自 动 编 译 , 并 自 动 刷 新 浏 览 器 来 查 看 g u l p . w a t c h ( a p p . s r c P a t h + ′ s c r i p t / ∗ ∗ / ∗ . j s ′ , [ ′ j s ′ ] ) / / 监 控 J S 文 件 , 并 执 行 j s 任 务 ; / / l i b 一 般 不 变 更 , 所 以 不 用 对 他 进 行 监 控 , 如 果 要 监 控 , 监 控 静 态 资 源 源 文 件 的 书 写 如 下 g u l p . w a t c h ( ′ b o w e r c o m p o n e n t s / ∗ ∗ / ∗ ′ , [ ′ l i b ′ ] ) g u l p . w a t c h ( a p p . s r c P a t h + ′ ∗ ∗ / ∗ . h t m l ′ , [ ′ h t m l ′ ] ) g u l p . w a t c h ( a p p . s r c P a t h + ′ d a t a / ∗ ∗ / ∗ . j s o n ′ , [ ′ j s o n ′ ] ) g u l p . w a t c h ( a p p . s r c P a t h + ′ s t y l e s / ∗ ∗ / ∗ . l e s s ′ , [ ′ l e s s ′ ] ) g u l p . w a t c h ( a p p . s r c P a t h + ′ s c r i p t s / ∗ ∗ / ∗ . j s ′ , [ ′ j s ′ ] ) g u l p . w a t c h ( a p p . s r c P a t h + ′ i m a g e / ∗ ∗ / ∗ ′ , [ ′ i m a g e ′ ] ) / / 如 果 想 实 现 " 实 时 预 览 " , 还 需 要 添 加 .connect.server({ root:[app.devPath], livereload:true,//自动加载 port:1234 }) //自动打开浏览器 open(‘http://localhost:1234’) //实现自动编译;我们希望的是,每更改一段代码,它自动编译,并自动刷新浏览器来查看 gulp.watch(app.srcPath+‘script/**/*.js’,[‘js’]) //监控JS文件,并执行js任务; //lib一般不变更,所以不用对他进行监控,如果要监控,监控静态资源源文件的书写如下 gulp.watch(‘bower_components/**/*’,[‘lib’]) gulp.watch(app.srcPath+‘**/*.html’,[‘html’]) gulp.watch(app.srcPath+‘data/**/*.json’,[‘json’]) gulp.watch(app.srcPath+‘styles/**/*.less’,[‘less’]) gulp.watch(app.srcPath+‘scripts/**/*.js’,[‘js’]) gulp.watch(app.srcPath+‘image/**/*’,[‘image’]) //如果想实现"实时预览",还需要添加 .connect.server(root:[app.devPath],livereload:true,//自动加载port:1234)//自动打开浏览器open(′http://localhost:1234′)//实现自动编译;我们希望的是,每更改一段代码,它自动编译,并自动刷新浏览器来查看gulp.watch(app.srcPath+′script/∗∗/∗.js′,[′js′])//监控JS文件,并执行js任务;//lib一般不变更,所以不用对他进行监控,如果要监控,监控静态资源源文件的书写如下gulp.watch(′bowercomponents/∗∗/∗′,[′lib′])gulp.watch(app.srcPath+′∗∗/∗.html′,[′html′])gulp.watch(app.srcPath+′data/∗∗/∗.json′,[′json′])gulp.watch(app.srcPath+′styles/∗∗/∗.less′,[′less′])gulp.watch(app.srcPath+′scripts/∗∗/∗.js′,[′js′])gulp.watch(app.srcPath+′image/∗∗/∗′,[′image′])//如果想实现"实时预览",还需要添加.connect.reload()函数,在每个任务下面
})
//问题:每次都要手动执行任务,好麻烦,所以可以设置默认任务;以后直接调用gulp即可;
gulp.task(‘default’,[‘serve’])
也可以使用如下插件进行简单配置:
gulp-rev; //给每个文件添加版本号,根据文件的内容算出每个文件的哈希码
使用: .pipe(rev())
gulp两种配置方式总结相关推荐
- Java框架篇---spring aop两种配置方式
Java框架篇---spring aop两种配置方式 第一种:注解配置AOP 注解配置AOP(使用 AspectJ 类库实现的),大致分为三步: 1. 使用注解@Aspect来定义一个切面,在切面中 ...
- SpringBoot的properties和yml两种配置方式, 配置注入参数, 以及配置文件读取失效的问题
SpringBoot支持两种配置方式,一种是properties文件,一种是yml 首先在pom文件中添加依赖: <dependency><groupId>org.spring ...
- Oracle RAC集群资源的两种配置方式,Admin Managed 和 Policy Manager,以及实验
对于Oracle RAC集群数据库,有两种资源管理方式:Administrator Managed(管理员管理的),Policy Managed(策略管理的) 要理解这两个概念,首先应该了解Serve ...
- Vite内网ip访问,两种配置方式
问题 使用vite运行项目的时候,控制台会只出现127.0.0.1(localhost)本地地址访问项目.不可以通过公司内网ip访问,其他团队成员无法访问,这是因为没有将服务暴露在局域网中: 两种解决 ...
- springboot之jackson的两种配置方式
springboot 针对jackson是自动化配置的,如果需要修改,有两种方式: 方式一:通过application.yml 配置属性说明:## spring.jackson.date-format ...
- 第四节:框架前期准备篇之进程外Session的两种配置方式
一. 基本介绍 1. 背景:Asp.Net默认的Session机制是进程内,存储在服务器端内存中,有这么几个缺点: ①:既然存在内存中,空间有限,不能存储大数据量信息,数据量多的话Session会被挤 ...
- mybatis-一对一的关联查询有两种配置方式
1.嵌套结果: (mybatis-standalone - MyBatisTest - testSelectBlogWithAuthorResult ()) <!-- 根据文章查询作者,一对一查 ...
- Nginx反向代理的两种配置方式
一.nginx反向代理简单配置 1.准备nginx环境 这篇文章的前提是已经配置好了NGINX,而且tomcat已经配置好了,而且能能够访问了. 反向代理不同端口(本案例均是单节点) 这里介绍一台ng ...
- Redis集群两种配置方式
2019独角兽企业重金招聘Python工程师标准>>> 第一种使用:JedisCluster <bean id="jedisPoolConfig" clas ...
最新文章
- WritableComparable排序案例(全排序)
- 《Cloudera hadoop大数据平台实战指南》此书2019年1月已上市
- 使用gridlayout布局后,因某些原因又删除,并整理目录结构时,Unable to resolve target 'android-7'
- TestNG中的参数化– DataProvider和TestNG XML(带有示例)
- 训练集的识别率一直波动_机器学习验证集为什么不再有新意?
- jQuery1.4.2新特性
- 如何在 Mac 上合并 PDF?
- 投影法字符分割matlab,利用投影法进行字符分割
- linux系统升级python版本
- 18719 填涂颜色
- 魔方二代 php代码还原
- MFC之图像绘制---高速绘图控件(High-speed Charting Control)应用(二)
- 微信小程序—自定义组件
- esxi迁移linux报错device eth0 does not seem tobe present,delaying
- 特斯拉与费拉里斯究竟是如何发明多相电机的呢?
- 开源项目扮演的角色_适用于Linux的5种开源角色扮演游戏
- 分析响应时间ns级别的TVS管个中奥秘
- 前端开发:npm install报错npm ERR! enoent ENOENT:no such file or directory, open…的解决方法
- SoapUI中返回提示信息“The processing instruction target matching “[xX][mM][lL]“ is not allowed”的解决方法及原因
- 通过机器码获得注册码的完整方案
热门文章
- android 信息(mms)的故事(八)-- 彩信的解析
- C语言——数组定义及用法
- 《石器时代》《魔力宝贝》图像压缩格式的破解
- python中的序列类型数据结构元素的切片操作_PythonI/O进阶学习笔记_4.自定义序列类(序列基类继承关系/可切片对象/推导式)...
- 【最终幻想15 国王之剑】制作介绍1:不再是游戏动画,而是“电影”制作
- 数据仓库的四个层次设计
- 成人职业教育:知乎、B站、网易“短兵相接”
- 未来流行遛机器狗,也许能解决城市宠物背后的矛盾
- 经典8个数据分析模型
- dec在oracle中,在SQL – Oracle中查找匹配的间隔