【gulp】gulp + browsersync 建構前端項目自動化工作流

BrowserSync 能讓浏覽器實時、快速響應您的檔案（html、js、css、sass、less等等）的更改，BrowserSync 支援多終端（PC、ipad、iphone、android等等）裝置同時調試。無論您是前端還是後端工程師，使用它将提高您 30% 的工作效率。

什麼是 gulp？

gulp.js 是一個自動化建構工具，開發者可以使用它在項目開發過程中自動執行常見任務。gulp.js 是基于 node.js 建構的，利用 node.js 流的威力，你可以快速建構項目并減少頻繁的 IO 操作。gulp.js 源檔案和你用來定義任務的 gulp 檔案都是通過 javascript（或者 coffeescript ）源碼來實作的。更多關于 gulp，可以通過官網了解。

什麼是 browsersync？

browsersync 能讓浏覽器實時、快速響應您的檔案（html、js、css、sass、less等等）的更改，browsersync 支援多終端（PC、ipad、iphone、android等等）裝置同時調試。無論您是前端還是後端工程師，使用它将提高您 30% 的工作效率。更多關于 browsersync，可以通過官網了解。

安裝依賴包

npm install --save-dev gulp browser-sync      

配置 gulpfile.js

'use strict';

var gulp = require('gulp'),
    browserSync = require('browser-sync').create();

// 配置伺服器
gulp.task('serve', function() {
    browserSync.init({
        server: {
            baseDir: './'
        },
        port: 8000
    });
});

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

打開終端，輸入：

gulp      

如果顯示如下，說明啟動本地靜态伺服器成功了。

[15:16:00] Using gulpfile ~/Work/github/test-demo/gulpfile.js
[15:16:00] Starting 'serve'...
[15:16:00] Finished 'serve' after 12 ms
[15:16:00] Starting 'default'...
[15:16:00] Finished 'default' after 9.42 μs
[BS] Access URLs:
 -------------------------------------
       Local: http://localhost:8000
    External: http://172.16.18.11:8000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://172.16.18.11:3001
 -------------------------------------
[BS] Serving files from: ./      

這時候打開浏覽器，輸入 http://localhost:8000/ 就可以看到頁面了。

-----分割線-----

以上示例隻是最簡單的 demo，一般項目不單單隻有 browsersync 還有其他的 gulp 插件需要引用（比如，gulp-sass），後面的文章會逐一介紹如何使用這些插件，并逐漸完善 gulpfile.js。

PS：

如果端口号設定在 1024 以下的話，在 linux 下監聽會報錯，是因為 linux 監聽 <= 1024 的端口需要 root 權限。解決方法一：端口号 > 1024。解決方法二：sudo gulp。