grunt、Browsersync服务及weinre远程调试

一、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'
  ]);
}

二、Browsersync

Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。 

  

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

三、 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

需要注意的是，命令行设置的参数会覆盖文件配置的参数。

2、启动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 及更早版本

 

3、启动本地调试页面，手机绑定反向代理（注意端口冲突）

4、电脑访问：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