grunt、Browsersync服务及weinre远程调试
一、grunt 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');
}
- 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)
。
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: {
bsFiles: {
src : 'assets/css/*.css'
},
options: {
server: {
baseDir: "/Users/chen/Documents/workspace/sirius/"
}
}
}
三、 Weinre
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:
在服务器主页有两项内容很重要:
- 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 及更早版本
grunt、Browsersync服务及weinre远程调试的更多相关文章
- 使用weinre远程调试
1.调试环境: 1)使用nodejs搭建调试服务器: 先安装node,然后使用npm安装weinre,在node.js安装目录输入以下命令 npm install weinre 2)需要wifi环境和 ...
- Cordova 5 架构学习 Weinre远程调试技术
手机上的页面不像桌面开发这么方便调试.能够使用Weinre进行远程调试以方便开发.本文介绍windows下的安装与使用. 安装 使用npm安装.能够执行: ###npm config set regi ...
- Weinre 远程调试移动端页面
Weinre 是一款远程调试工具,使用JS编写, 可以让我们在电脑上直接调试运行在手机上的远程页面,当你的代码已经发布上线,这时候出现了问题,Weinre就可以帮你调试. 调试场景 调试页面在手机上. ...
- Weinre 远程调试移动端手机web页面
调试场景 1.调试页面在手机上.2.调试工具在PC的chrome3.手机跟pc要在同一个网络环境下,也就是都使用一个wifi 一.安装 Weinre 1.Weinre是基于nodejs实现的,所以使用 ...
- weinre远程调试
一: 关于weinre weinre是一款依赖于nodejs的远程调试工具,现阶段一般用到手机app上调试非常的强大 二: weinre的安装 1) 安装 nodejs以及npm 2) 安装wein ...
- weinre 远程调试 安装 配置
1.第一种方法:安装:npm install -g weinre 2.第一种方法:开启本地监听服务器(修改端口,默认端口是8080):在cmd中运行: weinre --httpPort 8101 - ...
- 安卓手机移动端Web开发调试之Chrome远程调试(Remote Debugging)
一.让安卓打debug模式的apk包 二.将电脑中的chrome升级到最新版本,在chrome浏览器地址栏中输入chrome://inspect/#devices: 在智能手机还未普及时,移动设备的调 ...
- SpringBoot2.0(四) 远程调试
和tomcat远程调试近似的配置,主要的配置如下所示: -Xdebug -Xrunjdwp:transport=dt_socket,server=y,suspend=n,address=10009 在 ...
- vs2010远程调试断点无效问题
ps:本人按照下面的方式设置成功,个人感觉写的也比较清楚 来源:http://www.cnblogs.com/OpenCoder/archive/2010/02/17/1668983.html v ...
随机推荐
- union查询
select id, uid, money, FROM_UNIXTIME(created) as created, type FROM ( #type=1是 cjw_finance_bonus ...
- Agile.Net 组件式开发平台 - 驱动开发示例
首先讲一下概念,此驱动非彼驱动.在Agle.Net中我们将组件规划成两种类型,一种是基于业务的窗体组件,一种是提供扩展功能的驱动组件. 打个比方例如一般系统中需要提供身份证读卡功能,然而市面上有很多种 ...
- Python2爬虫获取的数据存储到MySQL中时报错"Incorrect string value: '\\xE6\\x96\\xB0\\xE9\\x97\\xBB' for column 'new' at row 1"的解决办法
由于一直使用python3进行编码,在使用Python2时,将爬虫数据连接数据库进行存储时,出现如上的报错,经查资料 是数据库编码问题. 如下转自:http://www.cnblogs.com/liu ...
- mysql表、函数等被锁住无响应的问题
场景: 在对表或函数等进行操作的时候,如果出现无法响应的情况(排除外网的网络问题),此时极有可能被某一个线程锁定了(这是函数的情况,表的话可能是被某一个用户锁定了),锁定的原因一般都是死循环出不来,而 ...
- jira & analytics
jira & analytics jira 代码有毒呀 http://jira.xgqfrms.xyz:8888/rest/analytics/1.0/publish/bulk { resou ...
- 【bzoj4922】[Lydsy六月月赛]Karp-de-Chant Number 贪心+背包dp
题目描述 给出 $n$ 个括号序列,从中选出任意个并将它们按照任意顺序连接起来,求以这种方式得到匹配括号序列的最大长度. 输入 第一行包含一个正整数n(1<=n<=300),表示括号序列的 ...
- 【bzoj1143】[CTSC2008]祭祀river Floyd+网络流最小割
题目描述 在遥远的东方,有一个神秘的民族,自称Y族.他们世代居住在水面上,奉龙王为神.每逢重大庆典, Y族都会在水面上举办盛大的祭祀活动.我们可以把Y族居住地水系看成一个由岔口和河道组成的网络.每条河 ...
- 前端基础:HTML标签(下)
前端基础HTML标签(下) 1.表单 表单的功能主要用于向服务器传输数据,从而实现客户端与Web服务器的交互.表单能够包含input系列标签,比如:文本字段.复选框.单选按钮.提交按钮等:表单还包含t ...
- HTML5语义元素总结
HTML5语义元素 语义=意义 语义元素=元素的意义 什么事语义元素? 一个语义元素能够清楚的描述其意义给浏览器和开发者. 无语义 元素实例:div.span.无需考虑内容. 语义 元素实例:fo ...
- BZOJ1195 HNOI2006最短母串(状压dp)
按照子串出现的先后考虑.令f[i][j]为已经出现的字符串集合为i,最后一个出现的字符串为j时的最短串长,预处理一下任意两个串的最长重叠长度,转移显然.有点麻烦的是字典序,强行增加代码难度. 另一个比 ...