之前專案中一直用的都是gulp-livereload，用gulp-webserver啟伺服器，來實現瀏覽器實時重新整理，但是每一次更新程式碼重新編譯有點慢。之後各種找原因改解決方案。

方案一：加入gulp-changed來監測檔案是否改變過，如更改了index.less，只編譯less。

方案二：不實時編譯所有檔案，只編譯less檔案，將目標目錄放到專案目錄內，專案上線之前在執行一次壓縮合並的過程。

最終確定瞭如上兩種方案，執行起來也只是快那麼一丟丟，所以將之前看到過的Browsersync引入試試，一頓研究之後發現速度真快的可以！不僅快，Browsersync還有一個非常好用的功能：裝置同步。當你的電腦和手機或者ipad連的相同wifi，可以在移動裝置上訪問相同ip相同埠，即可實現多裝置同步。真的是同步哦，比如在pc端向下滾動了頁面，其他裝置也會一起滾動。或者更新了程式碼，所有裝置都會實時重新整理。

注意：此教程僅適用於較小的個人負責專案，並且開發目錄結構與輸出目錄結構要相同，防止編譯後資源路徑找不到。

注二：我的機器為win10，webstorm可以自動儲存程式碼，每次更新程式碼後ctrl+tab切換回瀏覽器就可以看見渲染結果，不用ctrl+s，不用f5，沒有等待時間，不用手動打包，瀏覽器看見結果測試一下就可以直接釋出上線。如果你也喜歡這樣的開發模式，請仔細閱讀下文內容。完整程式碼點選這裡下載。

一、建立專案目錄Landing、新建index.html，新建src資料夾，在src內新建images、less、js資料夾。

二、在根目錄建立package.json，根據需要刪減依賴

三、安裝依賴（兩種方法）

1、按需配置好package.json 在根目錄npm install即可。

2、在根目錄npm install gulp gulp-concat gulp-clean-css gulp-uglify gulp-imagemin imagemin-pngquant gulp-htmlmin gulp-changed gulp-less del browser-sync --save-dev。有了package.json後，下一次使用按照第一步操作即可。

四、建立gulpfile.js，按需編寫你需要的配置。程式碼如下。

-------------------------------------------------------------------------------------------------------------------------------------------

2017.6.9修改：當前配置存在一個弊端，每一次執行gulp指令時，會將dist目錄下全部刪除，然後執行images，因此彈出頁面之後由於圖片還沒有編譯移動完成，頁面需等待很久才能正常顯示。故改動以下幾個位置：

1：delete任務新增 ' 排除images ' 資料夾，即執行gulp時執行delete任務刪除資料夾時保留images資料夾。

2：去掉省略布林值和刪除空格屬性，專案中有些view切換可能會受影響。

3：gulp預設任務裡，server.start將不執行images，防止第二次編譯images。這樣能保證每次跑專案第一時間看到頁面的渲染情況，無需等待。而且每當加入新圖片時，會執行images將圖片移動到指定資料夾。

PS：下方程式碼為修改後程式碼

---------------------------------------------------------------------------------------------------------------------------------------------

var gulp     = require('gulp'),
    concat   = require('gulp-concat'),//- 多個檔案合併為一個；
    cleanCSS = require('gulp-clean-css'),//- 壓縮CSS為一行；
    ugLify   = require('gulp-uglify'),//壓縮js
    imageMin = require('gulp-imagemin'),//壓縮圖片
    pngquant = require('imagemin-pngquant'), // 深度壓縮
    htmlMin  = require('gulp-htmlmin'),//壓縮html
    changed  = require('gulp-changed'),//檢查改變狀態
    less     = require('gulp-less')//壓縮合並less
    del      = require('del')
    browserSync = require("browser-sync").create();//瀏覽器實時重新整理

//刪除dist下的所有檔案
gulp.task('delete',function(cb){
    return del(['dist/*','!dist/images'],cb);
})

//壓縮html
gulp.task('html', function () {
    var options = {
        removeComments: true,//清除HTML註釋
        collapseWhitespace: true,//壓縮HTML
        removeScriptTypeAttributes: true,//刪除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//刪除<style>和<link>的type="text/css"
        minifyJS: true,//壓縮頁面JS
        minifyCSS: true//壓縮頁面CSS
    };
    gulp.src('src/index.html')
        .pipe(changed('dist', {hasChanged: changed.compareSha1Digest}))
        .pipe(htmlMin(options))
        .pipe(gulp.dest('dist'))
        .pipe(browserSync.reload({stream:true}));
});

//實時編譯less
gulp.task('less', function () {
    gulp.src(['./src/less/*.less']) //多個檔案以陣列形式傳入
        .pipe(changed('dist/css', {hasChanged: changed.compareSha1Digest}))
        .pipe(less())//編譯less檔案
        .pipe(concat('main.css'))//合併之後生成main.css
        .pipe(cleanCSS())//壓縮新生成的css
        .pipe(gulp.dest('dist/css'))//將會在css下生成main.css
        .pipe(browserSync.reload({stream:true}));
});

//壓縮js
gulp.task("script",function(){
    gulp.src(['src/js/jquery-3.1.0.min.js', 'src/js/index.js'])
        .pipe(changed('dist/js', {hasChanged: changed.compareSha1Digest}))
        .pipe(concat('index.js'))
        .pipe(ugLify())
        .pipe(gulp.dest('dist/js'))
        .pipe(browserSync.reload({stream:true}));
});

// 壓縮圖片
gulp.task('images', function () {
    gulp.src('./src/images/*.*')
        .pipe(changed('dist/images', {hasChanged: changed.compareSha1Digest}))
        .pipe(imageMin({
            progressive: true,// 無失真壓縮JPG圖片
            svgoPlugins: [{removeViewBox: false}], // 不移除svg的viewbox屬性
            use: [pngquant()] // 使用pngquant外掛進行深度壓縮
        }))
        .pipe(gulp.dest('dist/images'))
        .pipe(browserSync.reload({stream:true}));
});

//啟動熱更新
gulp.task('serve', ['delete'], function() {
    gulp.start('script','less','html');
    browserSync.init({
        port: 2017,
        server: {
            baseDir: ['dist']
        }
    });
    gulp.watch('src/js/*.js', ['script']);         //監控檔案變化，自動更新
    gulp.watch('src/less/*.less', ['less']);
    gulp.watch('src/*.html', ['html']);
    gulp.watch('src/images/*.*', ['images']);
});

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

五、在根目錄命令列裡執行gulp，會自動啟動瀏覽器並開啟埠為2017的網頁。在配置符合需求的情況下，接下來你的工作就只剩下開發了。最後只用把dist目錄打包釋出一切ok！