gulp+browser-sync使用方法

gulp簡介

gulp是基於流的自動化構建工具，也就是說gulp是通過操作流實現自動編譯，壓縮文件等操作的。這得益於node.js對流的支持，當然gulp.js和構建的任務文件都是JavaScript編寫的。

安裝方法：

$ npm install -g gulp  //全局安裝
$ npm install --save-dev gulp   //本地安裝，只是開發版的依賴

設置自動化任務：

創建一個gulpfile.js文件，這個文件里面放置我們要設置的任務。文件里的代碼大概是這個樣子的。

// 模塊引用
var gulp = require('gulp');
//設置任務
gulp.task('task1',function () {
    console.log('task1 is completed!');
});

然后我們在控制台執行任務

$ gulp task1

// 打印結果如下
[20:45:22] Using gulpfile E:\apersonal-project\exercise\gulpfile.js
[20:45:22] Starting 'task1'...
task1 is completed!
[20:45:22] Finished 'task1' after 267 μs

我們剛剛執行完task1任務，這個任務只是打印了一句話。gulp有豐富的插件庫 ，我們可以使用上面的插件實現我們想要的功能。

browser-sync介紹

browser-sync是一個十分好用的瀏覽器同步測試工具。

優點：

1、它能監聽文件的更改並且自動刷新頁面，節省了調試頁面的時間，尤其是做移動端的響應式開發的時候；
2、CSS動態注入，不用刷新整個頁面，想想做單頁應用時，如果有鏈式動畫的話，有了這個神器會有多爽；
3、可以架設靜態服務器，如果我們有本地服務器，它也支持使用代理的方式。

guop+browser-sync使用方法

browser-sync並不算是gulp的一個插件，但是通過gulp可以直接使用browser-sync。
browser-sync有兩種使用方式，架設靜態服務器或者使用代理。

1. 安裝准備

$ npm install -g gulp  //全局安裝
$ npm install --save-dev gulp   //本地安裝，只是開發版的依賴
// 安裝插件
$ npm install --save-dev browser-sync

2、設置gulpfile.js文件
這里先說一下例子中的目錄結構，根目錄是exercise，里面有一個blink文件夾和gulpfile.js文件，blink文件夾下有一個blink.html。

• [X] exercise

  • [x] blink
    • [x] blink.html
  • [x] gulpfile.js

• 設置任務---架設靜態服務器的方法

// 安裝依賴
var gulp = require('gulp'),
    browserSync = require('browser-sync');
// 設置任務---架設靜態服務器
gulp.task('browser-sync', function () {
    browserSync.init({
        files:['**'],
        server:{
            baseDir:'./',  // 設置服務器的根目錄
            index:'blink/blink.html' // 指定默認打開的文件
        },
        port:8050  // 指定訪問服務器的端口號
    });
});

最后執行任務，瀏覽器會自動打開blink.html頁面，而且當你更改blink.html頁面內容時，無需手動刷新，頁面會自動更新。

$ gulp browser-sync

效果圖

• 設置任務---使用代理、

// 安裝依賴
var gulp = require('gulp'),
    browserSync = require('browser-sync');
// 設置任務---使用代理
gulp.task('browser-sync', function () {
    browserSync.init({
        files:['**'],
         proxy:'localhost', // 設置本地服務器的地址
         port:8080  // 設置訪問的端口號
    });
});

使用代理的方式需要注意，本地服務器不能是編輯器內置的服務器，只能是自己搭建的服務器，否則會無法訪問。