參考
前面兩節學習到gulp的基本知識，也知道gulp可以進行壓縮,監控，combo等等，這節進行實戰。由于gulp有很多插件,所以我們不必重復造輪子,只用用好相關插件就可以
gulp當做web服務器
某些時候我們會在本地安裝Apache或者Nginx當做靜態服務器,有了gulp之后就不用了。gulp-connect插件可以實現web服務器功能
安裝gulp-connect：
npm install --save-dev gulp-connect
示例：
'use strict';
const gulp = require('gulp');
const connect = require('gulp-connect');
gulp.task('server',function(){
connect.server();
});
gulp.task('default',['server']);
執行命令gulp,然后終端會打印日志如下:
[22:07:20] Using gulpfile ~/WebstormProjects/es6-doc/gulpfile.js
[22:07:20] Starting 'server'...
[22:07:20] Finished 'server' after 34 ms
[22:07:20] Starting 'default'...
[22:07:20] Finished 'default' after 7.53 μs
[22:07:20] Server started http://localhost:8080
可以看出已經啟動了web服務器。可以通過http://localhost:8080訪問。默認是訪問gulpfile.js所在目錄的index.html
省時的瀏覽器同步測試工具browsersync
rowsersync能讓瀏覽器實時、快速響應您的文件更改（html、js、css、sass、less等）并自動刷新頁面。更重要的是 Browsersync可以同時在PC、平板、手機等設備下進項調試。您可以想象一下：“假設您的桌子上有pc、ipad、iphone、android等設備，同時打開了您需要調試的頁面，當您使用browsersync后，您的任何一次代碼保存，以上的設備都會同時顯示您的改動”。無論您是前端還是后端工程師，使用它將提高您30%的工作效率。
gulp 壓縮js css
安裝 gulp-uglify：
npm install --save-dev gulp-uglify
示例：
gulp.watch('js/*.js',['uglify_js']);
gulp.task('uglify_js',function(){
gulp.src('js/*.js')
.pipe(uglify())
.pipe(gulp.dest('build/js'));
});
gulp.task('default',['uglify_js']);
上面這段代碼可以實現,當js文檔下面的js文件內容變化時，會被重新壓縮并輸出到目的目錄
gulp 編譯less
安裝：
npm install --save-dev gulp-less
示例：
const gulp = require('gulp');
const less = require('gulp-less');
// 編譯less
// 在命令行輸入 gulp less 啟動此任務
gulp.task('less', function () {
// 1. 找到 less 文件
gulp.src('less/**.less')
// 2. 編譯為css
.pipe(less())
// 3. 另存文件
.pipe(gulp.dest('dist/css'))
});
// 在命令行使用 gulp auto 啟動此任務
gulp.task('auto', function () {
// 監聽文件修改，當文件被修改則執行 less 任務
gulp.watch('less/**.less', ['less'])
})
// 使用 gulp.task('default') 定義默認任務
// 在命令行使用 gulp 啟動 less 任務和 auto 任務
gulp.task('default', ['less', 'auto'])
上面代碼可以實現less文件變化,編譯輸出到css文件夾下
另外還可以用gulp來編譯sass和壓縮圖片以及combo文件等等。可以自己去查看
