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插件和壓縮及合並代碼的話，可以看如下文章即可：