樣式腳本本地化開發方法①【前端開發技巧】

朋友們，是否是在進行前端開發的時候常常須要修改css和js代碼呢？

調試代碼時。代碼存儲庫不斷被修改？同一個腳本樣式文件n多人操做？移動端調試時須要各類清理緩存……

這些問題將會帶來各類各樣對前端開發的不便。所以須要有一種本地化開發的方法：本地直接進行修改調試代碼，而後直接在PC端或移動端測試運行。如此這般，那調試代碼就簡單快捷多了。有助於「選擇性的」提升工做效率哦。（爲何是有選擇性呢？好比下面說的方法。由於這個方法確定也是有侷限性的。好比：非該局域網下的ip訪問該頁面便加載不了樣式與腳本，除非你的本地服務器是支持廣域網的。因此你在本地調試完以後確定仍是要上傳到服務器上去的，所以通常只新的需求，新的代碼比較適合使用此方法，老的需求代碼都是修改的，就很差使用本地話修改了。）

 

這裏說下2種方法：一種是利用本地服務器，而另外一種是利用有道雲筆記。下期講第二種方法。

 

好，如今咱們就來講說如何使用這種樣式腳本本地化來調試前端代碼吧。

1.下載本地服務器（這裏提供一個我的經常使用的php服務器）

下載地址：http://pan.baidu.com/s/1qXDljgK （度娘盤）

安裝：隨你喜歡安裝在哪一個盤都行。

安裝完成後，桌面會出現3個快捷方式：

PHP服務器 是服務器啓動程序

phpwww 是前端文件存儲空間（這裏咱們用來存儲須要調試的css js文件就行）

mysqldata 是mysql本地數據庫空間（這裏咱們就不用它了）

2.建立局域網本地服務器

首先咱們啓動PHP服務器吧。

1.這裏咱們選擇關閉

2.這裏咱們點擊開始

 

3.通常推薦使用第三個「開始&訪問」的連接，這時便建立了一個本地的局域網服務器了。當前自動打開的主頁就是剛剛搭建起來的本地服務器主頁。

也就是說phpwww目錄中的index.php，就是當前服務器的主頁。

好比：我如今的地址就是：http://192.168.0.101:50080/

3.建立局域網直鏈樣式腳本文件

在phpwww目錄中建立一個目錄，如js 

進入js目錄建立一個js文件，如new.js

而後保存代碼。

那麼當前腳本的絕對路徑地址即是：http://192.168.0.101:50080/js/new.js

4.在網絡項目中引入本地的調試樣式腳本文件

這裏咱們就試試引入這個本地腳本

在你的服務器頁面中的適當位置加入代碼：

<script src="http://192.168.0.101:50080/js/new.js"></script>

頁面的代碼：

當你執行你搭建的網絡頁面時。瀏覽器便會載入你剛剛加入的這個文件

執行效果：

瀏覽器載入的文檔列表

5.調試樣式腳本

若是你以爲樣式腳本有問題，那你能夠直接在本地的該文件中直接改，改完後直接Ctrl+S保存。而後刷新頁面便可

注：該服務器中的資源若是想在移動端調試的。須要是你的電腦用的是wifi網絡，而後你手機也鏈接同一個網絡。那麼手機上調試代碼也是很簡單的了。