用gulp來實現web服務器

用gulp來實現web服務器

點這裏查看原文

---

gulp如今是愈來愈流行了。它能夠作的事情實在是太多了，好比，拼接js文件，壓縮圖片。

在這個教程裏，你會了解怎麼使用gulp.js來實現一個應用了內置的livereload功能的本地web服務。

之前的實現方式

假設咱們要開發一個單頁應用。這個app的入口是index.html。咱們的目標是可讓瀏覽器經過localhost來訪問這個頁面。之前，你須要安裝一個Apache或者Nginx這樣的服務器軟件來實現這樣的功能。

更棒的實現方式

時至今日，javascript無所不能了，就要稱霸天下了，甚至它均可以去實現一個web服務。這篇文章裏，咱們就要用一個gulp的插件，人稱gulp-connect。用這個插件來實現一個WEB服務。

接下來的篇幅，咱們就要來爲咱們的單頁應用來配置一個本地服務。

開始下文以前，我假定你已經把準備工做都已經作好了，好比gulpfile文件已建好！

第一步，安裝

第一步，咱們要來安裝下gulp-connect插件
安裝的命令以下：

npm install --save-dev gulp-connect

小提示：npm install --save-dev 能夠簡寫爲npm i -D

如今，咱們來定義web服務，gulpfile.js的代碼以下

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

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

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

只要在終端執行gulp命令，而後在瀏覽器地址欄輸入localhost:8080就能夠看到index.html啦。
localhost:8080所指向的就是gulpfile文件所在的那一級目錄。
在終端輸入ctrl+c會結束當前任務。

在github能夠找到本文全部例子的源碼。
點這裏看github

加入livereload的支持

建立一個基礎的web服務很簡單，是否是？那如今咱們繼續來把livereload加入web服務中。
咱們須要作兩件事情：
首先，告訴web服務啓動的時候運行livereload。
其次，在頁面有更新的時候通知livereload刷新頁面。

第一步很簡單是否是，咱們只要將livereload的屬性設置爲true，將webserver這個任務寫成下面的樣子。

gulp.task('webtask',function(){
    connect.server({
        livereload:true
    });
});

第二步的話就取決於你具體的實例了。好比說，咱們要將less文件自動編譯成css樣式表，並讓其被瀏覽器識別。
咱們來將這個例子分步處理下：
首先，須要一個'watcher'，用來監控less文件的變化，監控到變化後這個'watcher'就會去觸發less的編譯器，將其輸出爲一個css文件。以後這個css文件有更新了以後就會去通知livereload，讓其刷新頁面。

在這個例子裏面，還須要用到gulp-less插件。
插件的安裝命令以下

npm install --save-dev gulp-less

gulp裏已經有了watch這個方法，能夠來充當'watcher'

咱們的文檔結構大體能夠以下：
.
├── node_modules
│ └── ...
├── styles
│ └── main.less
├── gulpfile.js
├── index.html
└── package.json

watch任務執行的時候，gulp.js監聽styles文件夾裏less文件的全部改動，當有改動的時候就會觸發less任務。每一次編譯以後，結果會自動返回給瀏覽器。
gulpfile.js文件的代碼以下所示（做者容許將下列代碼使用於你本身的項目）：

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

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

gulp.task('less',function(){
    gulp.src('styles/main.less')
    .pipe(less())
    .pipe(gulp.dest(styles))
    .pipe(connect.reload());
});

gulp.task('watch',function(){
    gulp.watch('style/*.less',['less']);
})

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

如今咱們從新在終端執行gulp，而後再在瀏覽器打開localhost:8080。
作完這些，咱們就能夠試着在style文件夾的less文件裏作一些改動。它會當即編譯並刷新瀏覽器。
看吧，這樣咱們並不須要依賴什麼瀏覽器插件，就能夠實現頁面的自動刷新啦！

一些小小調整

注意，咱們以前寫的gulpfile.js文件只是一個小小的示例用於示範怎麼來實現一個運用了livereload的web服務。
我很是建議你們能夠把將其餘gulp插件一塊兒玩起來。
你也能夠試着從新修改下你寫的各個task的結構，用一用不是gulp內置的watch方法，這個方法能夠只監控有改動的文件。這個對於之後你若是使用更大的代碼庫來講尤其重要。

本教程的接下來部分，咱們來看一看對於以上實現web服務的另外一個方案。

更換Hostname和Port

gulp-connect插件自己有不少可選的配置。
好比說，你能夠更改web服務的端口號或者hostname。你甚至能夠用一個你習慣使用的hostname配上80端口（默認的是localhost:8080）
代碼以下：

connect.server({    port:80,
    host:'gulp.dev'});

進行了這個配置以後，咱們要在hosts文件裏面加上gulp.dev,而後運行sudo gulp，由於要使用80端口的話，是須要管理員權限的。

一些進階特性

你能夠同時啓動多個web server。這個頗有用的。好比說，若是你要同時啓動一個開發和一個測試的服務。

gulp-connect也能夠設置多個根目錄。
好比，你要用coffeescript，而後將壓縮過得js文件放到一個臨時的文件夾，那就能夠在根目錄root中加上這個臨時的文件夾而不去影響原來的源文件夾。

在GitHub上你能夠得到更多的示例，連接以下：
https://github.com/AveVlad/gulp-connect

重構咱們的代碼

在以上的例子中，咱們只是寫了一個小小的將less編譯成css文件，並讓其當即體如今瀏覽器中的例子。
雖然它奏效了，可是咱們能夠作的更好。
當把編譯和livereload混合起來用的時候，可能會有一些問題。
因此，咱們將他們拆分開來並用watch來監控。
爲此，就須要用到上面提到的gulp-watch插件。

咱們能夠再加入一個coffeeScript的編譯步驟。這個增長的步驟會使咱們的新結構更加清晰。

安裝新插件的命令

npm install --save-dev gulp-watch gulp-coffee

在gulpfile.js文件的最頂部引用這兩個插件。在下面的步驟中，我假設你已經在scripts文件夾裏有了以.coffee爲後綴的文件。
重寫的gulpfile文件，以下所示：

var gulp = require('gulp'),
connect = require('gulp-connect'),
watch = require('gulp-watch'),
coffee = require('gulp-coffee'),
less = require('gulp-less');

gulp.task('webserver',function(){
    connect.server({
        live reload:true,
        root:['.','.tmp']
    });
});

gulp.task('livereload',function(){
    gulp.src(['.tmp/styles/*.css','.tmp/scripts/*.js'])
    .pipe(watch()) //注意此處的watch是gulp-watch插件
    .pipe(connect.reload());
});

gulp.task('coffee',function(){
    gulp.src('scripts/*.coffee')
    .pipe(coffee())
    .pipe(dest('.tmp/scripts'));
});
gulp.task('less',function(){
    gulp.src('styles/main.less')
    .pipe(less())
    .pipe(gulp.dest('.tmp/styles'));
});

gulp.task('watch',function(){
    gulp.watch('style/*.less',['less']);
    gulp.watch('scripts/*.coffee',['coffee']);
})

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

最大的變化，是增長的livereload任務。這個任務僅僅是監聽了編譯以後的文件，而後若是有變化就刷新瀏覽器。watch()方法能夠僅僅只從新加載有變化的文件。gulp自帶的gulp.watch()會將整個項目都從新加載。
由於添加了livereload這個任務，咱們就不須要在每一步的編譯以後都加上.pipe(connect.reload())了。因此，咱們把每一個任務按照他們各自關注的點分開定義，這樣對於項目開發來講比較好。
同時，咱們也發現，編譯以後的文件再也不保存至他們各自的文件夾去了。如今它們存儲在一個臨時文件夾.tmp中。文件夾的內容就是生成的文件，它們存儲在臨時文件夾，再也不去污染scripts和styles文件夾。咱們也建議不要將臨時文件夾加入版本控制系統。
咱們要作的就是把臨時文件夾也視爲一個根目錄
代碼以下

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

這邊通過個人測試，通過編譯以後會自動生成.tmp文件夾，這個文件夾裏有一個styles文件夾存儲css文件有一個scripts文件夾存儲js文件。而後咱們的版本控制系統是git，那麼在.gitignore文件裏就要寫上.tmp，不要讓.tmp這個臨時文件夾加入版本控制系統。由於在本地預覽，這樣html就得要能獲取到css和js文件，那麼就在root裏把.tmp也設置爲根目錄。這樣gulp執行的時候，就能讀取到css和js文件啦~
提交git的話，就提交html,styles folder,scripts folder.
協同開發者若是clone的話，再執行下gulp就會再次生成臨時文件夾，進行預覽。

總結

如今，你已經能夠用gulp來構建一個本地web服務了。
你也能夠嘗試和其餘gulp插件配合使用，來構建或者測試一個單頁應用。
這裏的web服務僅僅是本地服務，若是你要做爲生產，就得要用一些相似Nginx或者CDN這樣的高效解決方案。

Grunt及相似的項目均可以實現以上的功能，gulp只是提供了一個比較簡便的方法來實現這個功能。

本文轉載自：http://www.jianshu.com/p/e66a5bb96b7e