iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 14
1
Modern Web

CSS 實戰心法系列 第 14

Gulp - Webserver

Gulp 很適合搭配任何其他的前後端結構,就先前介紹的幾個章節,只要略為修改輸入及輸出的路徑即可;除了搭配其他後端結構外,Gulp 也有適合直接開發的方法,本章會在介紹 Gulp Webserver,這樣就能夠直接在 Gulp 中開啟 Webserver。

gulp webserver

範例程式碼:https://github.com/Wcc723/ironman-gulp-sass/tree/v0.4.icon-fonts

Gulp webserver 能夠在 gulp 運行的期間開啟 webserver,並且包含著 Livereload 的功能,只要修改專案中的資料夾檔案,就能夠自動的更新瀏覽器上的畫面,讓開發更迅速。

package.json: 僅有新增一個 gulp-webserver。

"dependencies": {
  "async": "^2.1.4",
  "autoprefixer": "^6.5.3",
  "gulp": "^3.9.1",
  "gulp-consolidate": "^0.2.0",
  "gulp-iconfont": "^8.0.1",
  "gulp-plumber": "^1.1.0",
  "gulp-postcss": "^6.2.0",
  "gulp-sass": "^2.3.2",
  "gulp-webserver": "^0.9.1"
}

gulpfile.js 可以依據以下的方法設定。

var webserver = require('gulp-webserver');  // 載入 webserver

// webserver
gulp.task('webserver', function() {
  setTimeout(function(){
    gulp.src(path.public)                   // 預設開啟路徑
      .pipe(webserver({                     // 啟動 webserver
        livereload: true,                   // Livereload 的功能
        open: false,                        // 是否自動開啟 瀏覽器
        host: '0.0.0.0',                    // 如果使用 0.0.0.0 的 ip,還會另外開啟 wifi 等對外網路
        port: 10000,                        // 開放通訊埠
      }));
  }, 1000);
});

gulp.task('default', ['others', 'sass', 'iconfonts', 'watch', 'webserver']);

設定完成後,一樣輸入 gulp 就會依序執行先前所設定的內容,而 Webserver 放在做後是確保所有流程完成後再開啟 Webserver ,使第一次執行專案的開發者也能夠執行。

結語

Gulp 介紹的目前為止,其實已經掌握大部分 Gulp 所使用的手法,接下來僅需要調整到合適的搭配環境即可;如果在開發上遇到 Gulp 不足的地方,可以到 NPM 的網站上透過 gulp 作為關鍵字,搜尋是否有其他套件可以使用。

http://ithelp.ithome.com.tw/upload/images/20161214/20083608lO7tNbwBGl.png

到目前所介紹的內容,也都只要略作修改,觀念都可以運用在任何的套件上,如果遇到任何問題,也歡迎來詢問我喔~。

文章同時分享於:https://wcc723.github.io/css/2016/12/14/gulp-webserver/


上一篇
Gulp - 在本地端製作 Icon Fonts
下一篇
為什麼 Boostrap (這篇很短~)
系列文
CSS 實戰心法30

尚未有邦友留言

立即登入留言