因為開發需要,希望可以自動監控專案底下的HTML/CSS/JavaScript,只要有變更即更新瀏覽器,就不用手動自己重新整理了。而且寫Less的時候,也可以在存檔的時候自動compile成css使用,很方便的處理方式~ 接下來就開始把環境設定一下:

  1. 初始化專案並且建立package.json
    npm init --yes

  2. 建立node.js的虛擬環境:(先請安裝nodeenv)
    nodeenv .env

後面的.env可以置換成想要置放的資料夾名稱

  1. 將環境換成剛剛建好的node.js虛擬環境(此做法在於如果不小心出了問題,比較不會影響到整個電腦的node.js環境 source .env/bin/actiave

到時候有需要退出環境的時候,只需要直接執行
deactivate_node

就可以退出環境了。

  1. 安裝所需要的套件: 這個安裝的目的是希望能夠監控專案裡面的HTML/LESS/JavaScript檔案,有變更的時候就會編譯LESS或是重新整理正在開發的瀏覽器(即Livereload的功能),基本上來說,需要先利用npm安裝以下幾個套件:
  • gulp 這邊個人會使用gulp來處理,其實也可以使用grunt,但因為沒玩過就是了。(記得要安裝在global)
  • gulp-cli (在terminal使用gulp,記得要裝在global)
  • gulp-less
  • browser-sync (檔案改變的時候可以將結果同步瀏覽器,不用再另外安裝extension)

接下來就示專案需求可以安裝webpack或是babel之類的工具了。

  1. 設定gulpfile.js 因為gulp吃的是gulpfile.js,請先在專案根目錄中設定gulpfile.js,接下來準備設定gulpfile.js的部分:
這邊是先在gulpfile.js上設定載入使用的library

var gulp = require("gulp");
var less = require("gulp-less");
var browsersync = require("browser-sync").create();

下方的部分是設定less file compile

gulp.task('less',function(){
gulp.src('./less/*.less')
.pipe(less())
.pipe(gulp.dest('./css/'))
});

設定監控檔案,有變動即利用rowsersync重新整理瀏髡器

gulp.task('watch',function(){
gulp.watch('./less/.less',['less']).on("change", browsersync.reload)
gulp.watch('./js/
.js').on("change", browsersync.reload)
gulp.watch("./*.html").on("change", browsersync.reload)
});

browser sync configuration

gulp.task('browser-sync', function(){
browsersync.init({
server: {
baseDir: "./",
proxy: "test.dev"
},
ui: {
port: 3000,
weinre:{
port: 3001
}
}
})
})

這個是最後一行需要放上的部分,default startup的設定

gulp.task('default',['less','watch', 'browser-sync']);

以上檔案處理完畢後,就可以回到專案資料夾根目錄的地方,直接用gulp即可以執行我們設定好的環境並且進行開發了。