2017春 前端自動化(一)構建工具的搭建

 2017春 前端自動化(一)構建工具的搭建

引言：在當前項目開發中，爲了減免人工重複的勞動；

爲了更加自動化、智能化的開發項目，摸索了好久的前端自動化開發流程，娓娓道來、逐一而列……

 

 A:搭建 node 環境
當今互聯網江湖，惟BAT三足鼎立，取其中間，跟着A漲點姿式；
淘寶的利好大事，淘寶 NPM 鏡像，官網地址   http://npm.taobao.org/  

 

點進去

選擇

Node.js 鏡像  http://npm.taobao.org/mirrors/node 

 

點進去
通過屢次測試，咱們選擇穩定版本

Mirror index of https://nodejs.org/dist/v6.2.0/
下載：node-v6.2.0-x64.msi        17-May-2016 19:55    12263424(11.7MB)連接
進行安裝便可。

接下來，dos窗口下輸入:node -v
彈出 

 

 

 

 則，安裝node成功。

 

爲了後續gulp插件能夠更好更快速的安裝，咱們能夠事先安裝cnpm,(ps:cnpm從國內下載，淘寶作的，速度快)
dos窗口下輸入： npm install -g cnpm --registry=https://registry.npm.taobao.org  便可

 

B:gulp 自動化構建工具
gulp 官網    http://www.gulpjs.com.cn/   

先全局安裝gulp 
dos窗口下輸入：npm install --global gulp

後續在開發項目中的時候須要dos窗口輸入（npm install gulp --save-dev）相似這樣輸入命令;以做爲項目的開發依賴（devDependencies）。

這個時候基礎環境有了，咱們在本身喜歡的編輯器（非eclipse）裏面導入本身的項目文件夾
以後，在當前項目，配置node環境

先生成packge.json文件 
在當前文件夾打開dos窗口，輸入：npm (cnpm ) init 

 

回車
以後，回到項目頁面，看見  package.json 顯示出來了

 

接下來，當前項目，安裝 gulp

 

 

 

 

 

 

cnpm install gulp  --save-dev 

 

而後，咱們安裝瀏覽器自動刷新插件：browser-sync   專門作瀏覽器自動刷新 

（ps:幫你自動 打開瀏覽器 ，而且 能夠爲你搭建一個web服務器，實時刷新。）
當前項目文件夾dos窗口下輸入:cnpm install browser-sync --save-dev 

 

 

右鍵，創建gulpfile.js文件
開始寫任務了

 

var gulp=require("gulp");

var browserSync=require("browser-sync");

gulp.task("server",function(){
browserSync.init({
"server":"./",
"port":"8282",
"files":[
   "./**/.*html",
   "./styles/*.css",
   "./script/*.js"
  ]

});
});

gulp.task("default",function(){
gulp.start("server");
});

 

 

至此，一個項目的，自動化基礎環境，有了。咱們能夠在此裏面，快速編寫咱們的代碼，工具減小了不少冗餘的流程。未完，待續……

 

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