前端自动化之(一)—浏览器自动实时刷新
前端自动化之(一)—浏览器自动实时刷新
引言:
无数次的修改查看效果,无数次的清除缓存查看,重启,启动……只为了看见一个变化生效而已。
当修改一个地方的时候,要想看见效果, 如此大费周折?尤其是对于前端来说,不是那么很懂得eclispse工具的操作,淡淡的忧伤……
不爽!
哪里有需要,哪里有突破!
当修改一个地方的时候,要想看见效果, 如此大费周折?尤其是对于前端来说,不是那么很懂得eclispse工具的操作,淡淡的忧伤……
不爽!
哪里有需要,哪里有突破!
前端自动化之——自动实时刷新,应运而来!
首先,我们新建一个名为“refresh”的文件夹,存储在电脑硬盘,比如D盘。
结构如下解析所示:
refresh---|--->html
|--->styles
|--->scripts
|--->image
之后,通过本地个人喜欢的编辑器,导入,打开,比如(Hbuilder)
基础工作做好了,下面, 开始搭建node环境。
|--->image
之后,通过本地个人喜欢的编辑器,导入,打开,比如(Hbuilder)
基础工作做好了,下面, 开始搭建node环境。
A.下载安装node(过程不表,直接按照google出来的next……next……)
B. 安装gulp自动化构建工具(http://www.gulpjs.com.cn/)
下面, 我们需要在项目中配置node服务
当前文件夹打开dos,输入:node -v ,执行之后,显示V6.2.0,说明安装成功
C.先 生成packge.json文件
dos窗口输入: npm (cnpm ) init
等走完执行命令,查看“refresh”文件夹多了一个 “package.json” 文件
内含
{
"name": "refresh",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
D.安装gulp
dos窗口输入: cnpm install gulp --save-dev
E.浏览器自动实时刷新
插件(browser-sync) 专门做浏览器自动刷新
帮你自动 打开浏览器 ,并且 可以为你搭建一个web服务器,实时刷新。
F.安装browser-sync
dos窗口输入: cnpm install browser-sync --save-dev
这个时候,刷新下hbuilder目录结构,则如下显示
{
"name": "refresh",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"browser-sync": "^2.18.5",
"gulp": "^3.9.1"
}
}
表示 “gulp”和“browser-sync”都安装成功了
G:新建gulpfile.js配置文件
进行编辑
var gulp=require("gulp");
var browserSync=require("browser-sync");
gulp.task("server",function(){
browserSync.init({
"server":"./",
"port":"8686",
"files":[
"./**/*.html",
"./styles"/*.css",
"./scripts/*.js"
]
});
});
gulp.task("default",function(){
gulp.start("server");
});
如上编辑好之后,进入dos窗口,输入
gulp 回车
则,浏览器自动打开当前index.html页面
这个时候,试着,去修改对应的样式文件,结构,之后,保存ctrl+s.
双屏下表现,更为良好,左边修改,右边生效,好不痛快!
初步探索,不是很详细,但是这样操作,确实可以解决很多刷新的问题,也可以减少很多F5的时间。
能让你一天之中,少用好几次F5的机会,无形中节约了时间。
现实词汇很多“秒杀”概念,这个也就是所谓的,“秒刷”吧!
路漫漫其修远兮, 吾将上下而求索。过程中,披荆斩棘,需要大侠您来指点引路……
下载截图地址:https://files.cnblogs.com/files/leshao/refresh.rar
多谢“田兄”一路指点,得以完善……
作为工作备忘录而已!