前端自动化之(一)—浏览器自动实时刷新
引言：
无数次的修改查看效果，无数次的清除缓存查看，重启，启动……只为了看见一个变化生效而已。 当修改一个地方的时候，要想看见效果， 如此大费周折？尤其是对于前端来说，不是那么很懂得eclispse工具的操作，淡淡的忧伤…… 不爽！ 哪里有需要，哪里有突破！
前端自动化之——自动实时刷新，应运而来！ 首先，我们新建一个名为“refresh”的文件夹，存储在电脑硬盘，比如D盘。 结构如下解析所示： refresh---|--->html |--->styles
|--->scripts |--->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的机会，无形中节约了时间。
现实词汇很多“秒杀”概念，这个也就是所谓的，“秒刷”吧！
路漫漫其修远兮， 吾将上下而求索。过程中，披荆斩棘，需要大侠您来指点引路……
下载截图地址：http://files.cnblogs.com/files/leshao/refresh.rar
多谢“田兄”一路指点，得以完善……