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 ...
随机推荐
- Unity3d学习日记(二)
跟着教程做让背景可以滚动起来并添加了背景的粒子特效,加入了敌机. ctrl攻击,↑↓←→移动,Game Over后按R重新开始游戏. Space Shooter游戏地址:http://ya ...
- exception = {"元数据集合中已存在具有标识“xxx”的项。\r\n参数名: item"}
vs提示:exception = {"元数据集合中已存在具有标识"xxx"的项.\r\n参数名: item"} 出现这个错误说明有重复的字段,有可能是继承的类里 ...
- 【bzoj2870】最长道路tree 树的直径+并查集
题目描述 给定一棵N个点的树,求树上一条链使得链的长度乘链上所有点中的最小权值所得的积最大. 其中链长度定义为链上点的个数. 输入 第一行N 第二行N个数分别表示1~N的点权v[i] 接下来N-1行每 ...
- 【bzoj1705】[Usaco2007 Nov]Telephone Wire 架设电话线 dp
题目描述 最近,Farmer John的奶牛们越来越不满于牛棚里一塌糊涂的电话服务 于是,她们要求FJ把那些老旧的电话线换成性能更好的新电话线. 新的电话线架设在已有的N(2 <= N < ...
- Python单例模式的四种方法
在这之前,先了解super()和__new__()方法 super()方法: 返回一个父类或兄弟类类型的代理对象,让你能够调用一些从继承过来的方法. 它有两个典型作用: a. 在单继承的类层次结构中, ...
- [NOI.AC省选模拟赛3.31] 附耳而至 [平面图+最小割]
题面 传送门 思路 其实就是很明显的平面图模型. 不咕咕咕的平面图学习笔记 用最左转线求出对偶图的点,以及原图中每个边两侧的点是谁 建立网络流图: 源点连接至每一个对偶图点,权值为这个区域的光明能量 ...
- spring+springMVC+mybatis较全
1.基本概念 1.1.Spring Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框架,由Rod Johnson 在其著作Expert One-On- ...
- LUOGU 1440
#include<cstdio> #include<algorithm> #include<cstring> #define N 1000005 using nam ...
- UVA.725 Division (暴力)
UVA.725 Division (暴力) 题意分析 找出abcdefghij分别是0-9(不得有重复),使得式子abcde/fghij = n. 如果分别枚举每个数字,就会有10^10,肯定爆炸,由 ...
- UVA.699 The Falling Leaves (二叉树 思维题)
UVA.699 The Falling Leaves (二叉树 思维题) 题意分析 理解题意花了好半天,其实就是求建完树后再一条竖线上的所有节点的权值之和,如果按照普通的建树然后在计算的方法,是不方便 ...