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

什麼是 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。