grunt、Browsersync服務及weinre遠程調試

1、grunt server服務

前端開發時，常常須要把靜態文件映射成web服務，傳統的作法是丟到apache，但過重太不友好了。開發angular的時候，官方的chrome插件對file:///的支持很差，因此最好在web瀏覽器裏面。在 Grunt 環境下，能夠直接使用集成在 Grunt 中的 Connect 插件完成站點服務器的支持。在 connect 中設置一個 connect 任務的名字，注意不要叫 options ，這是 connect 保留的配置名。咱們這裏稱爲 server。 

'use strict';
module.exports = function (grunt) {

    // Project configuration.
    grunt.initConfig({

        connect: {
            server: {
                options: {
                    protocol: 'http',
                    port: 8000,
                    hostname: '*',
                    keepalive: true,
                    base: ['src/']
                }
            }
        }

    });

    grunt.loadNpmTasks('grunt-contrib-connect');
}

使用 keepalive 這個選項可使得 grunt 在執行到 connect 的時候，不會退出這個任務，保持服務器的持續執行，這樣你就能夠一直訪問這個服務器了。可是，須要注意的是，這個 grunt 任務會阻塞後繼任務的執行，因此，你須要將這個任務排在最後一個任務。

• protocol 服務協議，能夠是 'http' 或者 'https', 若是使用 https ，須要額外配置服務器證書。
• port 服務器的端口，默認爲 8000
• base 能夠是一個字符串，或者一個數組，或者一個對象，用來表示映射到網站虛擬根目錄的目標。
  • 字符串，映射到網站虛擬根目錄的物理路徑，默認爲 Gruntfile.js 所在的目錄
  • 數組，多個被映射到網站虛擬根目錄的物理路徑
  • 對象，每一個路徑能夠配置更加詳細的選項，能夠經過 { path: xxx, options: xxxx} 進行配置，其中 options 會傳遞給 serve-state 模塊處理。
• hostname 默認爲 '0.0.0.0'，表示能夠從任何網絡地址來訪問。
• keepalive 是否保持服務，不會退出服務

1. open

若是你但願在啓動服務以後，自動打開瀏覽器，而不用本身打開瀏覽器，再輸入訪問地址，能夠將 open 設置爲 true。

open 能夠設置 boolean, 字符串，對象。默認爲 false，設置爲 true 將會自動打開瀏覽器。若是設置爲字符串，則爲瀏覽器打開的地址。對象的配置將會直接傳遞給 open 處理。 

{ 
　　target: 'http://localhost:8000', // target url to open, 目標路徑 
　　appName: 'chrome', // name of the app that opens, ie: open, start, xdg-open，自動啓動的應用名稱, 好比你的瀏覽器：chrome 
　　callback: function() {} // called when the app has opened 
}

2. livereload，能夠配置爲 boolean 或者 數值，用來表示是否支持 livereload。

設置爲 true 或者數值表示支持 connect-livereload，可是這個設置不能直接使用，須要 connect-livereload 的配合，因此並不能直接實現自動加載。你還須要 grunt-contrib-watch 或者其餘的庫支持來實現文件修改時的自動加載。

3. useAvailablePort，如何使用端口，若是設置爲 true，則任務會尋找 port 指定的下一個可用的端口，默認爲 false. 

4. onCreateServer，服務建立以後的回調函數，容許集成其它庫到網站中，例如，集成 Socket.IO 的示例。注意，這須要你先準備好了 socket.io 模塊。 

grunt.initConfig({ 
    connect: { 
        server: { 
            options: { 
                port: 8000, 
                hostname: '*', 
                onCreateServer: function(server, connect, options) { 
                    var io = require('socket.io').listen(server); 
                    io.sockets.on('connection', function(socket) { 
                        // do something with socket 
                    });
                 } 
            } 
        } 
    } 
});

5. middleware 

很顯然，網站處理的中間件。若是你以爲這個默認的靜態文件服務器不夠強大的話，能夠經過中間件進行擴展。能夠配置一個函數或者數組，默認爲使用 options.base 處理靜態文件和目錄瀏覽的數組。若是提供了一個數組的話，就會取代默認的服務器處理，直接採用自定義的中間件進行處理，這須要咱們徹底定義服務器中的處理。

6. 配置多個服務器，須要注意的是，若是有一個服務器的 keepalive 設置爲 true，就會阻塞其它的服務器。 

// Project configuration.
grunt.initConfig({
  connect: {
    site1: {
      options: {
        port: 9000,
        base: 'www-roots/site1'
      }
    },
    site2: {
      options: {
        port: 9001,
        base: 'www-roots/site2'
      }
    }
  }
});

完整配置文件

grunt-contrib-connect , 用來充當一個靜態文件服務器，自己集成了 livereload 功能 
grunt-contrib-watch , 監視文件的改變，而後執行指定任務，這裏用來刷新  grunt serve 打開的頁面

輔助的插件

load-grunt-tasks , 省事的插件，有了這個能夠不用寫一堆的grunt.loadNpmTasks('xxx') ，再多的任務只須要寫一個 require('load-grunt-tasks')(grunt) 。

time-grunt 插件，可用來顯示每個任務所花的時間和百分比，因爲此示例中基本就 watch 任務佔了百分百的時間。

module.exports = function(grunt){

  //require('load-grunt-tasks')(grunt); //加載全部的任務
  //require('time-grunt')(grunt); 若是要使用 time-grunt 插件

  require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

  grunt.initConfig({
    connect: {
      options: {
        port: 9000,
        hostname: '*', //默認就是這個值，可配置爲本機某個 IP，localhost 或域名
        livereload: 35729  //聲明給 watch 監聽的端口
      },

      server: {
        options: {
          open: true, //自動打開網頁 http://
          base: [
            '/Users/chen/Documents/workspace/sirius/'  //主目錄
          ]
        }
      }
    },

    watch: {
      livereload: {
        options: {
          livereload: '<%=connect.options.livereload%>'  //監聽前面聲明的端口  35729
        },

        files: [  //下面文件的改變就會實時刷新網頁
          'app/*.html',
          'app/style/{,*/}*.css',
          'app/scripts/{,*/}*.js',
          'app/images/{,*/}*.{png,jpg}'
        ]
      }
    }
  });

  grunt.registerTask('serve', [
    'connect:server',
    'watch'
  ]);
}

2、 Browsersync

Browsersync能讓瀏覽器實時、快速響應您的文件更改（html、js、css、sass、less等）並自動刷新頁面。更重要的是 Browsersync能夠同時在PC、平板、手機 等設備下進項調試。 

  

browserSync: {
        bsFiles: {
            src : 'assets/css/*.css'
        },
        options: {
            server: {
                baseDir: "/Users/chen/Documents/workspace/sirius/"
            }
        }
    }

3、 Weinre

Weinre 的全稱是 Web Inspector Remote（遠程 Web 調試工具）。能夠幫助咱們在 PC 端遠程調試運行在移動設備瀏覽器內的 Web 頁面或應用，可以即時調試 DOM 元素、 CSS 樣式 和 JavaScript 等。

Weinre 的調試服務器是基於 Node.js 實現的，所以在安裝 Weinre 以前先要安裝  Node 運行環境。安裝 Weinre 有兩種方式，使用 npm 或者下載二進制文件進行安裝。

使用二進制包安裝的命令以下： 

npm -g install http://example.com/path/to/apache-cordova-weinre-X.Y.Z-bin.tar.gz

還能夠經過 Node 包管理工具安裝： （全局，安裝一次就能夠）

sudo npm -g install weinre

安裝好之後就能夠啓動 Weinre 了，Weinre 提供了6個可選的啓動參數，其中下面兩個參數通常會修改，其它的用默認值就能夠了。

• --httpPort 調試服務器運行的端口，默認的 8080，若是這個端口有在用，能夠改成其它端口；
• --boundHost 調試服務器綁定的 IP 地址，也能夠是域名，默認是 localhost，還能夠設置爲 -all-，表示綁定到全部當前機器能夠訪問的接口。以下所示：

weinre --boundHost -all-

這些配置也能夠在 Weinre 根目錄下建立 server.properties 文件配置，內容以下所示：

boundHost:    -all-
httpPort:     8081
reuseAddr:    true
readTimeout:  1
deathTimeout: 5

須要注意的是，命令行設置的參數會覆蓋文件配置的參數。

二、啓動weinre：weinre（默認8080端口） 

在服務器主頁有兩項內容很重要：

• A 連接到調試客戶端頁面，打開後默認到遠程面板，以下圖所示。
• B 目標代碼，這段代碼要加入到須要調試的頁面中，也能夠用書籤的方式動態加入。

 

 

遠程面板總共有四部分：

• A 面板切換，用過 Chrome 或者 Safari  開發者工具的對這個界面確定很熟悉。
• B 鏈接到調試服務器的頁面，便可以調試的頁面。
• C 鏈接到調試服務地的客戶端，當前只有一個。
• D 調試服務器屬性，綁定的端口和調試服務器可以響應式的 IP 地址列表。

 

支持的調試客戶端（運行調試界面的瀏覽器）：

• Google Chrome
• Apple Safari
• 其它基於 WebKit 的瀏覽器

　　支持的調試目標（須要調試的網站或應用的界面）：

• Android 瀏覽器應用
• iOS Mobile Safari 應用
• PhoneGap/Cordova
• other　

　　不支持的調試目標：

• iOS 3.1.3 及更早版本
• webOS 1.45 及更早版本

 

三、啓動本地調試頁面，手機綁定反向代理（注意端口衝突）

四、電腦訪問： http://localhost:8080/

 

頁面添加腳本：

<script src=" http://localhost:8080/target/target-script-min.js#anonymous" /></script>

進入調試頁面，頁面Dom在手機端會有對應：
 http://localhost:8080/client/#anonymous

 

 

 

參考

http://www.cnblogs.com/haogj/p/4785286.html

http://www.tuicool.com/articles/yEJBF3

http://www.browsersync.cn/

http://www.cnblogs.com/lhb25/p/debug-mobile-site-and-app-with-weinre.html