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