查看你的web文件包

|- view

|-|- index.html

|-node_modules

安裝對應的gulp插件

這個時候請確認你已經把gulp安裝完成了。

進入控制臺，進入對應的項目地址

安裝gulp-connect插件

npm install gulp-connect //這個插件是gulp模擬靜態服務器的插件

編寫gulpfile.js文件

重點來了，想讓你的工作更輕松更自動，就要好好寫gulpfile.js了

首先先把需要用到的方法放到簡單的(你喜歡的)名字變量里

var gulp = require('gulp');

var connect = require('gulp-connect'); //靜態服務器

我們來啟動一個靜態服務器

//使用connect啟動一個web服務器

gulp.task('woyaofuwuqi', function () { //任務名稱不要有空格

connect.server({

liverload: true,port:9000 //端口號

});

});

編寫默認任務

//默認任務

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

// 測試一下

console.log('this is a new test page.');

gulp.start('woyaofuwuqi'); //啟動一個web服務器

});

gulp每次啟動的時候(在控制臺寫gulp)都會運行默認任務

完成半自動化

4.1 制作一個清除緩存的方法

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

//清除緩存，或者說，重新加載所有html文件

gulp.src('*.html')

.pipe(connect.reload());

});

4.2 監聽html文件

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

//監聽所有html文件，如果有變化，則執行清除緩存方法

gulp.watch(['*/*.html'],['qinghuancun']);

});

4.3 把監聽任務追加到啟動服務器任務中

//第一種方法：將監聽任務寫進'woyaofuwuqi'任務中

//不推薦

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

//任務名稱不要有空格

connect.server({

liverload: true,port:9000 //端口號

});

gulp.watch(['*/*.html'],['qinghuancun']);

});

/***********************************************************/

//第二種方法：新建一個任務列表，把監聽任務與服務器任務都放在列表中

//推薦

gulp.task('taskList', ['woyaofuwuqi','watchHtml']);

//修改默認任務

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

// 測試一下

console.log('this is a new test page.');

//gulp.start('woyaofuwuqi');

gulp.start('taskList'); //執行任務列表

});

查看你的成果

在命令行中進入你的項目文件夾，輸入gulp，進入

如果你正確走完了前一篇文章，你的web包里應該會出現這個文件夾。 ?

當然，端口號是你自己設置的咯。 ?

總結

以上是生活随笔為你收集整理的gulp修改服务器端口,2.用gulp建立一个服务器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。