使用 Gulp 配置 Web 開發服務器

時間 2019-11-11

原文原文鏈接

重點:

1.從github上拉下來的gulp文件，只要裏面的package.json的依賴有的話，只需用命令進入目錄，輸入cnpm install ,安裝完全部插件後，該文件會多了一個"node_moules"文件夾，在connect.server配置好port後能夠直接命令"gulp" ,運行全部任務，命令會顯示:localhost:port ,就能夠直接在瀏覽器輸入:localhost:8088等等訪問項目。javascript

2.沒有gulp，直接進入命令"cnpm init" ,而後輸入文件描述等等，文件夾生成package.json。然後命令「npm install gulp-connect --save-dev」等本項目安裝指定插件依賴。再新建gulpfile.js配置自動化任務就可。php

構建工具 Gulp.js 最近正在變得愈來愈流行。咱們能夠用它作不少事，好比合並 JavaScript 文件或者壓縮圖片。css

本文將向你介紹如何使用 Gulp.js 來做爲本地 Web 服務器，並且內置了 livereload 支持。html

從前的作法

假設咱們須要開發一個單頁的 web 應用。應用入口很簡單，就是 index.html 文件。咱們的目的是經過瀏覽器，以及 localhost 域名訪問這個文件(某些狀況下，經過 file:// 協議訪問不能知足需求)。在此以前，或許你會在本機安裝一個 Apache 或者 Nginx 服務器。若是隻是爲了經過 HTTP 協議訪問一些靜態文件，如今以上這些都不必了。java

更好的辦法

如今，由 Javascript 來實現的解決方案几乎無處不在，甚至是做爲 web 服務器（都要感謝 Node.js啊）。最流行的是一個叫作 Connect 的開源組件。咱們將經過 Gulp.js 的一個插件 gulp-connect 來調用它（與 grunt-contrib-connect 同樣，不過 Gulp.js 更容易）。node

在接下來的章節中，咱們要爲咱們的單頁應用配置一個本地 web 服務器，我假設你已經有了其它基礎配置，好比 gulpfile.js 文件。nginx

初始化安裝

首先，用下面的命令來安裝 Connect 插件：git

npm install--save-dev gulp-connectgithub

提示：npm install --save-dev 能夠簡化爲 npm i -D.web

接下來，爲 web 服務器定義一個任務。gulpfile.js 文件中的代碼相似下面這樣：

vargulp = require('gulp'),

connect = require('gulp-connect');

gulp.task('webserver', function() {

connect.server();

});

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

這樣就定義好了，只要在終端/命令行中執行 gulp, 就能夠啓動 web 服務器。而後能夠在瀏覽器中打開localhost:8080, 就能看到 index.html 的內容。這個簡單的 web 服務器以當前 gulpfile.js 文件所在的文件夾做爲網站根目錄。服務器將一直運行，監聽 localhost:8080, 要中止服務器，能夠回到終端/命令行下按 Ctrl + C。（用過 Node.js, Grunt 或者 PHP 內置服務器的話，你必定對此很是熟悉。）

這個示例，以及接下來的全部示例的源代碼能夠在Github下載。每一個例子的代碼在一個單獨的文件夾下，你須要在對應的文件夾下執行 npm install 命令來安裝依賴項。

添加實時刷新（ livereload ）支持

設置基本的 web 服務器很是簡單，接下來咱們要繼續完善它，首先要實現實時刷新。須要作兩件事：

讓 web 服務器帶實時刷新支持啓動
告訴組件何時應該自動刷新

第一步很簡單，只要給 connect.server() 方法傳入一個參數便可：

gulp.task('webserver', function() {

connect.server({

livereload: true

});

第二步取決於你的項目的狀況。在這個示例中（從 Github 下載示例代碼，本例使用 02-livereload ），咱們須要 Gulp.js 自動把 LESS 文件編譯成 CSS 樣式，並將其注入到瀏覽器。

先來分解一下這個例子：咱們須要一個「監控器（ watcher ）」，它負責檢查 LESS 文件是否發生變化。若是發生變化，它會通知 LESS 編譯器把 LESS 文件編譯爲 CSS 文件，而後新的 CSS 文件經過實時刷新注入到頁面。

爲了編譯 LESS 文件，須要用到 gulp-less 插件。你能夠經過運行 npm i -D gulp-less 來安裝 gulp-less 並在 gulpfile.js 文件中添加這個依賴項。watcher 不用額外插件， Gulp.js 已經自帶了。

咱們的文件結構如如下所示：

.

├── node_modules

│ └── ...

├── styles

│ └── main.less

├── gulpfile.js

├── index.html

└── package.json

在 watch 任務中，Gulp.js 監聽 styles 目錄下全部的 *.less 文件，一旦它們發生變化，就觸發 less 任務。本例中， main.less 是 LESS 的入口文件。每次編譯完成後，結果會自動注入到瀏覽器。 gulpfile.js的內容相似下面的實例，你能夠複製粘貼到你的項目中：

// 定義依賴項

vargulp = 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']);

保存以後，回到終端/命令行，Ctrl+C 中止服務器（若是它還處於運行狀態），而後再次執行 gulp 啓動服務器。打開瀏覽器，打開 localhost:8080. 如今咱們能夠去 style 目錄下的 LESS 文件作一點修改，並保存。你會看到 LESS 的修改被實時編譯並自動同步生效到瀏覽器中的頁面上。特別要說明的是，你不須要任何瀏覽器插件或者擴展。

一點優化

請記住：前面的 gulpfile.js 只是一個爲了演示如何使用 gulp.js 做爲帶有實時刷新支持的 web 服務器的精簡示例。在實際項目中，建議配合其它的一些插件一塊兒使用。你能夠嘗試着從新排列任務的順序，或者嘗試一下非內置的 gulp-watch 插件，這個插件可讓你只處理髮生變化的文件。若是你的項目有大量的代碼/文件，這個功能很是有用。在接下來的例子中，我會再演示另外的一種任務結構。

修改主機名和端口

gulp-connect 插件支持不少配置選項，前面咱們只用到了 livereload 這一個。若是你須要修改 web 服務器監聽的端口或者主機名，好比想經過 http://gulp.dev 來訪問，你能夠這樣作：

connect.server({

port: 80,

host: 'gulp.dev'

});

爲了可以經過 gulp.dev 域名以及默認的 80 端口來啓動和訪問，你須要：

在 hosts 文件中配置 gulp.dev 指向本機 IP 地址
沒有其它程序佔用80端口（好比 Apache, Nginx, QQ旋風，騰訊視頻，迅雷等……）
root 或者 Administrator 權限（因爲80端口是系統保留端口）

一些高級特性

你還能夠繼續深刻探索 connect 插件的其它用法，好比同時啓動多個 web 服務器。有時候這很必要，好比你須要運行一個開發服務器，同時執行集成測試等。

gulp-connect 也提供了一些額外的特性，好比用多個文件夾做爲單個服務器的根目錄。例如，你使用 CoffeeScript, 但願把編譯的 Javascript 文件暫存在某個臨時目錄中，你能夠把本來的項目根目錄與該臨時文件夾同時做爲網站根目錄。具體的實例能夠在這裏找到。

重構咱們的代碼

在前面的示例中，咱們配置了一個「小巧玲瓏」的 gulpfile.js 來完成把 LESS 文件編譯成 CSS 而且自動注入瀏覽器的任務。它能用，可是還能夠優化。因爲咱們把編譯和實時刷新兩個任務混合成了一個，有可能會致使問題。因此，接下來咱們要把它們拆成單獨的任務，而後只監控生成後的文件。爲了達到這個目的，就須要用到剛纔提到的 gulp-watch 插件。

既然要重構，那就再多作一點，咱們順便把 CoffeeScript 編譯也添加進去。這樣，新的目錄結構會更加整潔。首先經過 npm 來安裝須要的新插件：

npm install--save-dev gulp-watchgulp-coffee

而後在 gruntfile.js 中加載。接下來的步驟，我假設你已經在 scripts 目錄下建立了一些 .coffee 文件。這個示例的源文件在前面已經提到過的這個 github repo 中的 03-livereload-refactored 文件夾中。重構以後的 gruntfile.js 參見下面的代碼，咱們隨後要一步一步地講解這些代碼：

vargulp = require('gulp'),

connect = require('gulp-connect'),

watch = require('gulp-watch'),

less = require('gulp-less'),

coffee = require('gulp-coffee');

gulp.task('webserver', function() {

connect.server({

livereload: true,

root: ['.', '.tmp']

});

gulp.task('livereload', function() {

gulp.src(['.tmp/styles/*.css', '.tmp/scripts/*.js'])

.pipe(watch())

.pipe(connect.reload());

});

gulp.task('less', function() {

gulp.src('styles/main.less')

.pipe(less())

.pipe(gulp.dest('.tmp/styles'));

});

gulp.task('coffee', function() {

gulp.src('scripts/*.coffee')

.pipe(coffee())

.pipe(gulp.dest('.tmp/scripts'));

});

gulp.task('watch', function() {

gulp.watch('styles/*.less', ['less']);

gulp.watch('scripts/*.coffee', ['coffee']);

})

gulp.task('default', ['less', 'coffee', 'webserver', 'livereload', 'watch']);

最大的變化是加入了單獨的 livereload 任務。這個任務只負責監控（經過 gulp-watch 插件）編譯後的文件的變化，並在瀏覽器中刷新它們。gulp-watch 自定義的 watch() 函數讓咱們能夠只刷新變化的文件，而內置的 gulp.watch() 一般會刷新全部文件。

因爲加入了一個額外的獨立監控任務，編譯步驟後面就再也不須要 .pipe(connect.reload()) 命令。這樣咱們就把任務根據它們的不一樣職能進行了劃分，這是軟件開發中通過實踐驗證的設計模式。

此外還應該注意到，編譯後的文件再也不保存在它們各自原先的源文件夾中，而是存儲在 .tmp 臨時文件夾中，這個文件夾的內容只有編譯生成的文件，這樣原來的樣式和腳本文件夾就再也不被生成的文件污染。這個文件夾還應該被排除在版本管理系統以外，好比 svn-ignore 屬性和 .gitignore 文件。可是爲了在開發過程當中可以進行測試，須要把 .tmp 也做爲網站根目錄，在 webserver 任務中，完成這個工做的任務是下面這行代碼：

root: ['.', '.tmp']

通過重構以後，完成的工做雖然沒有什麼不一樣，可是相比以前，就變得更加清晰明瞭，並且便於擴展。