前端自动化之(一)—浏览器自动实时刷新

前端自动化之(一)—浏览器自动实时刷新

引言：

无数次的修改查看效果，无数次的清除缓存查看，重启，启动……只为了看见一个变化生效而已。
当修改一个地方的时候，要想看见效果， 如此大费周折？尤为是对于前端来讲，不是那么很懂得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

 

多谢“田兄”一路指点，得以完善……