gulp实现自动化打包(二)
引言
- 在这篇文章中我基于上一篇文章gulp的简单打包示例(一)的
代码(重点,不然看的懵逼状态)
来介绍gulp的自动化打包,主要是修改gulpfile.js
配置文件。当我们执行gulp任务,gulp自动帮我们打开默认的网页文件,每当保存代码,gulp也自动监测相应文件的变化,执行相应的任务,并实时刷新页面。
下载
- 注意
open
并不是gulp
的插件,它只是一个第三方库,可以自动在浏览器打开我们设置的url
地址。
npm install gulp-connect open --save-dev
引入插件、库
var connect = require('gulp-connect')
var open = require('open')
注册一个自动化打包server
(名字随意)任务
- 一、
connect
有一个server
方法,该方法相当于一个微型的服务器,里面有三个配置属性:
root: 配置可以访问的文件夹(我试过监视文件,并不能打开),相当于向外暴漏了该文件夹下的资源
livereload: 是否实时刷新页面,默认为false,需要手动刷新页面。
port: 监听的端口号
- 二、
open
函数传入一个url
即可帮我们自动在浏览器打开该网址,
1、
open('http://localhost:3000')
,则会打开root
监视文件夹下的index.html
文件,如果不存在index.html
文件,则打开root
监视文件夹根目录
2、open('http://localhost:3000/pages/home.html')
,此时指定了打开的具体文件,则会打开指定的文件
3、如果不存在访问的资源,则会报错
- 三、
gulp.watch()
可以监视某个文件是否变化,一旦变化就会执行第二个参数相应的任务。
gulp.task('server', ['default'], function(){
connect.server({
root:'./dist',//打开的目标 文件夹
livereload: true,//实时刷新
port: 3000
})
open('http://localhost:3000')
gulp.watch('./src/*.html', ['html'])
gulp.watch('./src/pages/*.html', ['pages'])
gulp.watch('./src/js/*.js', ['js'])
gulp.watch('./src/less/*.less', ['less'])
gulp.watch('./src/css/*.css', ['css'])
gulp.watch('./src/img/*.*', ['img'])
})
实现自动刷新
- 在上面的配置中,我们虽然可以实现保存可以自动打包,但是浏览器还不能自动刷新,需要在打包完成之后通知浏览器刷新,只要在相应的任务
piped
到gulp-connect
插件中即可。即.pipe(connect.reload())
,其他任务也一样,每当该任务执行完毕,都会推送消息给浏览器刷新页面。
//压缩 主页 html文件
gulp.task('html', function () {
return gulp.src('./src/*.html')
.pipe(htmlmin({
collapseWhitespace: true,
minifyJS: true,
minifyCSS:true,
removeComments: true,
removeSciptTypeAttributes: true,
removeStyleLinkTypeAttributes: true
}))
.pipe(gulp.dest('./dist/'))
// 在这里调用 connect.reload()方法即可
.pipe(connect.reload())
})
原理
- 我们在终端可以看到,开启了一个端口为
3000的http
服务,和端口为35729的LiveReload
服务,实际上它是一个websocket
服务,每当它监视对的文件发生改变,就会推送消息给浏览器刷新页面
浏览器我们也可以看到,它是一个
websocket
服务
gulp实现自动化打包(二)的更多相关文章
- gulp的简单打包示例(一)
引言 前端开发,打包工具是必不可少的,虽然有很多别人帮你封装好的打包工具,但自己配置一个,自身的实力也会大增呀.这篇博文主要讲的是使用gulp对html.js.less.css.图片的压缩合并等配置. ...
- gulp自动化打包及静态文件自动添加版本号
前端自动化打包发布已是一种常态,尤其在移动端,测试过程中静态资源的缓存是件很头疼的事情,有时候明明处理的bug测试还是存在,其实就是缓存惹的祸,手机不比pc浏览器,清理缓存还是有点麻烦的.所以自动化实 ...
- gulp前端自动化构建工具使用
(1)新建项目目录gulp_web (2)项目目录下建目录src里面存放需要进行gulp处理的文件目录及文件 (3)gulpfile.js文件内容为声明需要打包应用的gulp组件及打包文件路径和打包任 ...
- Jenkins实现Android自动化打包
转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/77102359 本文出自[赵彦军的博客] 1.Tomcat 进入 https://t ...
- ios实现fastlane自动化打包
终于抽出时间来学习自动化打包了,app在测试阶段一天总会经历好几次的打包,每次打包真是身心疲惫,刚打完的包说不定就被测试妹子反应还要微调什么地方,我就真的有气没法出,打一次包怎么也得浪费十几分钟,还不 ...
- Android Jenkins 自动化打包构建
前言 在测试app项目过程中,通常都是需要开发打测试包给到测试,但是无论是iOS还是Android的打包过程都是相当漫长的,频繁的回归测试需要频繁的打包,对于开发同学影响还是蛮大的.因此在这种情况下, ...
- iOS自动化打包上传的踩坑记
http://www.cocoachina.com/ios/20160624/16811.html 很久以前就看了很多关于iOS自动打包ipa的文章, 看着感觉很简单, 但是因为一直没有AppleDe ...
- Mac Jenkins+fastlane 简单几步实现iOS自动化打包发布 + jenkins节点设置
最近在使用jenkins 实现ios自动化打包发布蒲公英过程实践遇到了一些坑,特意记录下来方便有需要的人. 进入正题: 一.安装Jenkins 1.Mac上安装Jenkins 遇到到坑 因为 Jenk ...
- Jenkins 持续集成实现 Android 自动化打包
打 debug 包流程: git pull 分支最新代码 Android Studio:Build - Generate Signed APK 从 IDE 里可以看到,实际上该操作是执行了 assem ...
随机推荐
- ArrayList数组扩容方式(基于jdk1.8)
ArrayList无参构造函数为: public ArrayList() { this.elementData = DEFAULTCAPACITY_EMPTY_ELEMENTDATA; } 而DEFA ...
- blackarch 安装指南
建议直接 www.blackangle.cn/BlackArchGuide.htm v\:* {behavior:url(#default#VML);} o\:* {behavior:url(#de ...
- linux-head、tail、sort、uniq、pstree、ps
1.head 默认查看文件前10行 head -7 /etc/yum.conf -n num -n7代表查看文件前7行 2.tail 默认查看文件的后10行 tail -7 /etc/yum.conf ...
- 洛谷$P2523\ [HAOI2011]\ Problem\ c$ $dp$
正解:$dp$ 解题报告: 传送门$QwQ$ 首先港下不合法的情况.设$sum_i$表示$q\geq i$的人数,当且仅当$sum_i>n-i+1$时无解. 欧克然后考虑这题咋做$QwQ$. 一 ...
- SpringBoot 总结篇
时至今日,SpringBoot 系列文章也算是告一段落,回想起当初立flag的情景,仿佛还历历在目.用一个月时间学完 SpringBoot 并整理成文章?又定一些异想天开计划,当时这样 ...
- ACM北大暑期课培训第三天
今天讲的内容是深搜和广搜 深搜(DFS) 从起点出发,走过的点要做标记,发现有没走过的点,就随意挑一个往前走,走不 了就回退,此种路径搜索策略就称为“深度优先搜索”,简称“深搜”. bool Dfs( ...
- Linux学习_菜鸟教程_2
Linux 系统目录 /bin: bin是Binary的缩写,这个目录存放着最经常使用的命令. /boot: 存放启动Linux时的一些核心文件,包括一些连接文件以及镜像文件. /dev : de ...
- Inception V1、V2、V3和V4
Inception模块分为V1.V2.V3和V4. V1(GoogLeNet)的介绍 论文:Going deeper with convolutions 论文链接:https://arxiv.org/ ...
- C#登出系统并清除Cookie
1.前端页面代码: 前端页面代码主要显示退出系统或者网站的可视化按钮代码,代码如下:(请忽略项目关键字:CPU) <ul class="nav navbar-nav navbar-ri ...
- python的break、continue、pass
break break可以用来立即退出循环语句(包括else)continue continue可以用来跳过当次循环注意:break和continue都是只对离他最近的循环起作用 pass pass是 ...