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是一個十分好用的瀏覽器同步測試工具。

優勢：

一、它能監聽文件的更改而且自動刷新頁面，節省了調試頁面的時間，尤爲是作移動端的響應式開發的時候；
二、CSS動態注入，不用刷新整個頁面，想一想作單頁應用時，若是有鏈式動畫的話，有了這個神器會有多爽；
三、能夠架設靜態服務器，若是咱們有本地服務器，它也支持使用代理的方式。

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

二、設置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  // 設置訪問的端口號
    });
});

使用代理的方式須要注意，本地服務器不能是編輯器內置的服務器，只能是本身搭建的服務器，不然會沒法訪問。