一、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: ,
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: ,
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: ,
base: 'www-roots/site1'
}
},
site2: {
options: {
port: ,
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: ,
hostname: '*', //默认就是这个值,可配置为本机某个 IP,localhost 或域名
livereload: //声明给 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:
reuseAddr: true
readTimeout:
deathTimeout:

需要注意的是,命令行设置的参数会覆盖文件配置的参数。
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/
 
页面添加脚本:
进入调试页面,页面Dom在手机端会有对应:http://localhost:8080/client/#anonymous
 
 
 
 

grunt、Browsersync服务及weinre远程调试的更多相关文章

  1. 使用weinre远程调试

    1.调试环境: 1)使用nodejs搭建调试服务器: 先安装node,然后使用npm安装weinre,在node.js安装目录输入以下命令 npm install weinre 2)需要wifi环境和 ...

  2. Cordova 5 架构学习 Weinre远程调试技术

    手机上的页面不像桌面开发这么方便调试.能够使用Weinre进行远程调试以方便开发.本文介绍windows下的安装与使用. 安装 使用npm安装.能够执行: ###npm config set regi ...

  3. Weinre 远程调试移动端页面

    Weinre 是一款远程调试工具,使用JS编写, 可以让我们在电脑上直接调试运行在手机上的远程页面,当你的代码已经发布上线,这时候出现了问题,Weinre就可以帮你调试. 调试场景 调试页面在手机上. ...

  4. Weinre 远程调试移动端手机web页面

    调试场景 1.调试页面在手机上.2.调试工具在PC的chrome3.手机跟pc要在同一个网络环境下,也就是都使用一个wifi 一.安装 Weinre 1.Weinre是基于nodejs实现的,所以使用 ...

  5. weinre远程调试

    一: 关于weinre weinre是一款依赖于nodejs的远程调试工具,现阶段一般用到手机app上调试非常的强大 二: weinre的安装 1)  安装 nodejs以及npm 2) 安装wein ...

  6. weinre 远程调试 安装 配置

    1.第一种方法:安装:npm install -g weinre 2.第一种方法:开启本地监听服务器(修改端口,默认端口是8080):在cmd中运行: weinre --httpPort 8101 - ...

  7. 安卓手机移动端Web开发调试之Chrome远程调试(Remote Debugging)

    一.让安卓打debug模式的apk包 二.将电脑中的chrome升级到最新版本,在chrome浏览器地址栏中输入chrome://inspect/#devices: 在智能手机还未普及时,移动设备的调 ...

  8. SpringBoot2.0(四) 远程调试

    和tomcat远程调试近似的配置,主要的配置如下所示: -Xdebug -Xrunjdwp:transport=dt_socket,server=y,suspend=n,address=10009 在 ...

  9. vs2010远程调试断点无效问题

    ps:本人按照下面的方式设置成功,个人感觉写的也比较清楚 来源:http://www.cnblogs.com/OpenCoder/archive/2010/02/17/1668983.html   v ...

随机推荐

  1. union查询

     select id, uid, money, FROM_UNIXTIME(created) as created, type FROM  (  #type=1是  cjw_finance_bonus ...

  2. Agile.Net 组件式开发平台 - 驱动开发示例

    首先讲一下概念,此驱动非彼驱动.在Agle.Net中我们将组件规划成两种类型,一种是基于业务的窗体组件,一种是提供扩展功能的驱动组件. 打个比方例如一般系统中需要提供身份证读卡功能,然而市面上有很多种 ...

  3. Python2爬虫获取的数据存储到MySQL中时报错"Incorrect string value: '\\xE6\\x96\\xB0\\xE9\\x97\\xBB' for column 'new' at row 1"的解决办法

    由于一直使用python3进行编码,在使用Python2时,将爬虫数据连接数据库进行存储时,出现如上的报错,经查资料 是数据库编码问题. 如下转自:http://www.cnblogs.com/liu ...

  4. mysql表、函数等被锁住无响应的问题

    场景: 在对表或函数等进行操作的时候,如果出现无法响应的情况(排除外网的网络问题),此时极有可能被某一个线程锁定了(这是函数的情况,表的话可能是被某一个用户锁定了),锁定的原因一般都是死循环出不来,而 ...

  5. jira & analytics

    jira & analytics jira 代码有毒呀 http://jira.xgqfrms.xyz:8888/rest/analytics/1.0/publish/bulk { resou ...

  6. 【bzoj4922】[Lydsy六月月赛]Karp-de-Chant Number 贪心+背包dp

    题目描述 给出 $n$ 个括号序列,从中选出任意个并将它们按照任意顺序连接起来,求以这种方式得到匹配括号序列的最大长度. 输入 第一行包含一个正整数n(1<=n<=300),表示括号序列的 ...

  7. 【bzoj1143】[CTSC2008]祭祀river Floyd+网络流最小割

    题目描述 在遥远的东方,有一个神秘的民族,自称Y族.他们世代居住在水面上,奉龙王为神.每逢重大庆典, Y族都会在水面上举办盛大的祭祀活动.我们可以把Y族居住地水系看成一个由岔口和河道组成的网络.每条河 ...

  8. 前端基础:HTML标签(下)

    前端基础HTML标签(下) 1.表单 表单的功能主要用于向服务器传输数据,从而实现客户端与Web服务器的交互.表单能够包含input系列标签,比如:文本字段.复选框.单选按钮.提交按钮等:表单还包含t ...

  9. HTML5语义元素总结

    HTML5语义元素 语义=意义 语义元素=元素的意义   什么事语义元素? 一个语义元素能够清楚的描述其意义给浏览器和开发者. 无语义 元素实例:div.span.无需考虑内容. 语义 元素实例:fo ...

  10. BZOJ1195 HNOI2006最短母串(状压dp)

    按照子串出现的先后考虑.令f[i][j]为已经出现的字符串集合为i,最后一个出现的字符串为j时的最短串长,预处理一下任意两个串的最长重叠长度,转移显然.有点麻烦的是字典序,强行增加代码难度. 另一个比 ...