Gulp實現web伺服器

龍恩0707發表於2016-03-08
Web伺服器

Gulp實現web伺服器

閱讀目錄

一：gulp實現web伺服器配置：

    對於前端開發而言，需要在本地搭建一個伺服器作為開發使用，雖然有時候也可以直接開啟頁面進行預覽效果，但是有時候頁面需要在伺服器執行，以前的做法是下載一個php，直接安裝下即可，或者使用nodeJS作為web伺服器，今天我門可以來學習下使用gulp的一個外掛 gulp－connect來配置作為本地伺服器來使用；當然該外掛也是居於nodeJS環境中的。

一：gulp實現web伺服器配置：

初始化安裝

首先，使用下面的命令來安裝connect外掛。

sudo  npm  install --save-dev gulp-connect

因此package.son內容程式碼變為如下：

{
  "name": "tongbanke",
  "version": "1.0.0",
  "description": "tobanke'",
  "main": "main.js",
  "scripts": {
    "test": "test"
  },
  "repository": {
    "type": "git",
    "url": "gulp"
  },
  "keywords": [
    "gulp",
    "test"
  ],
  "author": "kongzhi",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.6.2",
    "gulp-connect": "^2.0.5"
  }
}

gulpfile.js程式碼如下

var gulp = require('gulp'),
    connect = require('gulp-connect');

gulp.task('webserver', function() {
    connect.server();
});

gulp.task('default', ['webserver']);

如上是package.son程式碼和gulpfile.js程式碼；我們可以直接複製下來，新建package.son和gulp file.js兩個檔案，然後進入專案的目錄下 npm install 即可把所有的依賴包載入出來。如下圖：

這樣就好了，然後我們在終端命令下執行gulp命令即可；如下所示：

然後我們在瀏覽器中開啟 localhost:8080/index.html 就可以看到內容了，gulpfile.js檔案是在網站的根目錄下，伺服器將一直執行，監聽localhost:8080，如果我們想要停止伺服器的話，可以回到中斷命令下按ctrl＋c鍵即可。這個demo我也放到了github上了，如下：

https://github.com/tugenhua0707/basic 

我們可以直接使用git把它克隆下來放在本地目錄下，然後進入該目錄下，使用終端命令 

npm install 即可，把所有的依賴包就能提取出來。再執行gulp命令後，在瀏覽器下執行

http://localhost:8080/即可看到index.html頁面了。

二：新增實時重新整理（livereload）支援

     上面我們已經完成了使用 gulp-connect 實現伺服器了，現在我們需要實現實時重新整理，這樣的話，每當我更改一個檔案的時候，我就不需要重新執行命令，直接儲存程式碼即可生效，因此我們現在需要做兩件事情：

1. 讓web伺服器帶實時重新整理支援啟動。

2. 告訴組建什麼時候應該自動重新整理。

第一步的實現很簡單：只要給connect.server()方法傳入一個引數即可：

｛livereload: true｝即可，如下圖所示：

對於第二步，我們這裡簡單的實現以下使用gulpfile.js 來監聽less檔案，自動把less檔案編譯成css檔案，並將其注入到瀏覽器中，為了編譯LESS檔案，我門需要使用到gulp-less 外掛，我門可以執行如下命令：

sudo npm install --save-dev gulp-less 來安裝gulp-less，並且在gulpfile.js檔案中新增這個依賴項，現在我門可以看下 package.json程式碼變為如下：

// package.son
{
  "name": "tongbanke",
  "version": "1.0.0",
  "description": "tobanke'",
  "main": "main.js",
  "scripts": {
    "test": "test"
  },
  "repository": {
    "type": "git",
    "url": "gulp"
  },
  "keywords": [
    "gulp",
    "test"
  ],
  "author": "kongzhi",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.6.2",
    "gulp-connect": "^2.0.5",
    "gulp-less": "^1.2.3",
    "gulp-coffee": "^1.4.2",
    "gulp-watch": "^0.6.2"
  }
}

gulpfile.js程式碼變為如下：

// gulpfile.js

// 定義依賴項
var gulp = require('gulp'),
    connect = require('gulp-connect'),
    less = require('gulp-less');
 
// 定義 webserver 任務
gulp.task('webserver', function() {
    connect.server({
      livereload: true
    });
});
 
// 定義 less 任務
gulp.task('less', function() {
    gulp.src('styles/main.less')
        .pipe(less())
        .pipe(gulp.dest('styles'))
        .pipe(connect.reload());
});
 
// 定義 watch 任務
gulp.task('watch', function() {
    gulp.watch('styles/*.less', ['less']);
})
 
// 定義預設任務
gulp.task('default', ['less', 'webserver', 'watch']);

我門再來看看我門現在的目錄結構如下：

如上gulpfile.js檔案，我門使用watch這個任務去監聽LESS檔案，每當該檔案發生改變的時候，我門都會對less這個任務進行編譯，然後把編譯的檔案寫入到目標檔案中，因此當我門回到終端命令下執行gulp命令後，每當我門的css檔案有更改的話，都可以實時監聽到，對於第二點監聽到話，gulp有gulp-watch這個外掛了，其實可以做的更好的；同樣，為了大家有原始碼的話，也把專案放入git裡面去，大家也可以把它git 克隆下來，自行執行即可：如下：

https://github.com/tugenhua0707/livereload

想學習gulp的watch外掛和壓縮及合併程式碼的話，可以看如下文章即可：

http://www.cnblogs.com/tugenhua0707/p/4069769.html

相關文章