## 編寫server服務 ### 1。安裝gulp-concat插件 ``` npm install --save-dev gulp-connect@5.6.1 //安裝gulp-connect插件，創建一個node服務 ``` ### 2。在gulpfile.js中添加代碼 ``` var connect = require('gulp-connect'); gulp.task('server',function () { connect.server(); }); gulp.task('all', ['myhtml', 'myless','myjs', 'myimage', 'server']); gulp.task('default',['all']); ``` ### 3。在項目目錄下命令窗口執行gulp 在瀏覽器中訪問[http://localhost:8080/build/] ## 添加熱更新功能 ``` ulp.task('server',function () { /*1.設置web服務器*/ connect.server({ root:['build'],//服務器管理/運行哪個目錄(默認是項目的根目錄) livereload:true, //是否熱更新。 port:9999 //指定web服務的端口號（默認是8080） }); /*2.gulp監視文件，并且可以在文件發生改動時候做一些事情. * 參數一：監視的文件 * 參數二: 在文件變動后執行的一個task任務 * */ gulp.watch('src/less/*',['myless']); }); //3.在myless任務中添加重新加載功能 gulp.task('myless',function(){ gulp.src('src/less/index.less') .pipe(less()) //編譯成為css\ .pipe(cssmin()) //讀取和壓縮css文件 .pipe(gulp.dest('build/css')) //輸出到指定目錄 .pipe(connect.reload()) //當內容發生改變時， 重新加載。 }); ``` ***** **注意** 每修改一次服務上面的 內容就要重新在命令窗口跑一次gulp命令，修改其他頁面的內容在熱更新開啟的情況下不用跑服務