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

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

引言：

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

 

多謝“田兄”一路指點，得以完善……