前端自動化之(一)—瀏覽器自動實時刷新

前端自動化之(一)—瀏覽器自動實時刷新

引言：

無數次的修改查看效果，無數次的清除緩存查看，重啓，啓動……只爲了看見一個變化生效而已。
當修改一個地方的時候，要想看見效果， 如此大費周折？尤爲是對於前端來講，不是那麼很懂得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

 

多謝「田兄」一路指點，得以完善……