一、grunt server服务

前端开发时,经常需要把静态文件映射成web服务,传统的做法是丢到apache,但太重太不友好了。开发angular的时候,官方的chrome插件对file:///的支持不好,所以最好在web浏览器里面。在 Grunt 环境下,可以直接使用集成在 Grunt 中的 Connect 插件完成站点服务器的支持。在 connect 中设置一个 connect 任务的名字,注意不要叫 options ,这是 connect 保留的配置名。我们这里称为 server。 
  1. 'use strict';
  2. module.exports = function (grunt) {
  3.  
  4. // Project configuration.
  5. grunt.initConfig({
  6.  
  7. connect: {
  8. server: {
  9. options: {
  10. protocol: 'http',
  11. port: ,
  12. hostname: '*',
  13. keepalive: true,
  14. base: ['src/']
  15. }
  16. }
  17. }
  18.  
  19. });
  20.  
  21. grunt.loadNpmTasks('grunt-contrib-connect');
  22. }

使用 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 处理。

  1. {
  2.   target: 'http://localhost:8000', // target url to open, 目标路径
      appName: 'chrome', // name of the app that opens, ie: open, start, xdg-open,自动启动的应用名称, 比如你的浏览器:chrome
  3.   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 模块。

  1. grunt.initConfig({
  2. connect: {
  3. server: {
  4. options: {
  5. port: ,
  6. hostname: '*',
  7. onCreateServer: function(server, connect, options) {
  8. var io = require('socket.io').listen(server);
  9. io.sockets.on('connection', function(socket) {
  10. // do something with socket
  11. });
  12. }
  13. }
  14. }
  15. }
  16. });

5. middleware

很显然,网站处理的中间件。如果你觉得这个默认的静态文件服务器不够强大的话,可以通过中间件进行扩展。可以配置一个函数或者数组,默认为使用 options.base 处理静态文件和目录浏览的数组。如果提供了一个数组的话,就会取代默认的服务器处理,直接采用自定义的中间件进行处理,这需要我们完全定义服务器中的处理。

6. 配置多个服务器,需要注意的是,如果有一个服务器的 keepalive 设置为 true,就会阻塞其它的服务器。

  1. // Project configuration.
  2. grunt.initConfig({
  3. connect: {
  4. site1: {
  5. options: {
  6. port: ,
  7. base: 'www-roots/site1'
  8. }
  9. },
  10. site2: {
  11. options: {
  12. port: ,
  13. base: 'www-roots/site2'
  14. }
  15. }
  16. }
  17. });

完整配置文件

grunt-contrib-connect , 用来充当一个静态文件服务器,本身集成了 livereload 功能 
grunt-contrib-watch , 监视文件的改变,然后执行指定任务,这里用来刷新  grunt serve 打开的页面

辅助的插件

load-grunt-tasks , 省事的插件,有了这个可以不用写一堆的grunt.loadNpmTasks('xxx') ,再多的任务只需要写一个 require('load-grunt-tasks')(grunt) 。

time-grunt 插件,可用来显示每一个任务所花的时间和百分比,由于此示例中基本就 watch 任务占了百分百的时间。
  1. module.exports = function(grunt){
  2.  
  3. //require('load-grunt-tasks')(grunt); //加载所有的任务
  4. //require('time-grunt')(grunt); 如果要使用 time-grunt 插件
  5.  
  6. require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
  7.  
  8. grunt.initConfig({
  9. connect: {
  10. options: {
  11. port: ,
  12. hostname: '*', //默认就是这个值,可配置为本机某个 IP,localhost 或域名
  13. livereload: //声明给 watch 监听的端口
  14. },
  15.  
  16. server: {
  17. options: {
  18. open: true, //自动打开网页 http://
  19. base: [
  20. '/Users/chen/Documents/workspace/sirius/' //主目录
  21. ]
  22. }
  23. }
  24. },
  25.  
  26. watch: {
  27. livereload: {
  28. options: {
  29. livereload: '<%=connect.options.livereload%>' //监听前面声明的端口 35729
  30. },
  31.  
  32. files: [ //下面文件的改变就会实时刷新网页
  33. 'app/*.html',
  34. 'app/style/{,*/}*.css',
  35. 'app/scripts/{,*/}*.js',
  36. 'app/images/{,*/}*.{png,jpg}'
  37. ]
  38. }
  39. }
  40. });
  41.  
  42. grunt.registerTask('serve', [
  43. 'connect:server',
  44. 'watch'
  45. ]);
  46. }

二、Browsersync
Browsersync能让浏览器实时、快速响应您的文件更改(html、js、css、sass、less等)并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。 
  1. browserSync: {
  2. bsFiles: {
  3. src : 'assets/css/*.css'
  4. },
  5. options: {
  6. server: {
  7. baseDir: "/Users/chen/Documents/workspace/sirius/"
  8. }
  9. }
  10. }

三、 Weinre

Weinre 的全称是 Web Inspector Remote(远程 Web 调试工具)。可以帮助我们在 PC 端远程调试运行在移动设备浏览器内的 Web 页面或应用,能够即时调试 DOM 元素、 CSS 样式 和 JavaScript 等。
Weinre 的调试服务器是基于 Node.js 实现的,因此在安装 Weinre 之前先要安装 Node 运行环境。安装 Weinre 有两种方式,使用 npm 或者下载二进制文件进行安装。
使用二进制包安装的命令如下: 
  1. npm -g install http://example.com/path/to/apache-cordova-weinre-X.Y.Z-bin.tar.gz

还可以通过 Node 包管理工具安装: (全局,安装一次就可以)

  1. sudo npm -g install weinre

安装好以后就可以启动 Weinre 了,Weinre 提供了6个可选的启动参数,其中下面两个参数一般会修改,其它的用默认值就可以了。

  • --httpPort 调试服务器运行的端口,默认的 8080,如果这个端口有在用,可以改为其它端口;
  • --boundHost 调试服务器绑定的 IP 地址,也可以是域名,默认是 localhost,还可以设置为 -all-,表示绑定到所有当前机器可以访问的接口。如下所示:
  1. weinre --boundHost -all-

这些配置也可以在 Weinre 根目录下创建 server.properties 文件配置,内容如下所示:

  1. boundHost: -all-
  2. httpPort:
  3. reuseAddr: true
  4. readTimeout:
  5. 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. 201621123034 《Java程序设计》第5周学习总结

    作业05-继承.多态.抽象类与接口 1. 本周学习总结 1.1 写出你认为本周学习中比较重要的知识点关键词 答:关键字:接口.继承.多态 1.2 尝试使用思维导图将这些关键词组织起来.注:思维导图一般 ...

  2. "亿家App"问卷调查分析结果及心得体会

    一.问卷问题设计 调查背景:随着现代社会互联网的发展,基于家庭产生的服务项目也越来越多.为增加家庭之间的交流和互助,增加家庭内部.家庭与家庭之间的沟通互助,并利用互联网便捷交流的优势,使家庭在享受服务 ...

  3. 第二章 持续集成jenkins工具使用之系统基本设置

    Jenkin系统初始化成功后,会进入用户设置页面,设置用户信息后即可进入系统,如果没有设置用户,jenkins系统默认的用户是admin,密码administrator 1.1         Con ...

  4. 第三部分shell编程3(shell脚本2)

    7. if 判断一些特殊用法 if [ -z $a ] 这个表示当变量a的值为空时会怎么样if grep -q '123' 1.txt; then 表示如果1.txt中含有'123'的行时会怎么样if ...

  5. python redis插件安装

    #tar xvzf redis-py-2.2.1.tar.gz #cd redis-py-2.2.1 #python setup.py install   附件: https://app.yinxia ...

  6. 从HR 到SBP其实还有很长的一段路要走

    战略性业务伙伴 Strategic business partners 关于这本书,一般是因为好奇,从HR到BP的角色,再到这个SBP,其实是一段没有走过的很虚的过程,不过总归是需要灯塔,即使偶尔只是 ...

  7. 移动端body跟着模态框一起滑动问题

    遇到了一个问题,是点击链接出现弹框,弹框里面的内容是可以滑动的,结果我滑动的时候发现下面的body也跟着一起滑动,先看一下代码. 弹框的 HTML: <div class="mask& ...

  8. 实用图像处理入门 - 1 - opencv VS2012 环境搭建

    标签中的部分 font-family: 华文细黑; font-size: 26px; font-weight: bold; color: #611427; margin-top:40px; } h2 ...

  9. Codeforces Round #517 Div. 1翻车记

    A:真的懵逼了.冷静了半天之后决定二分一下答案,然后先a安排上尽量小的再贪心地一个个扩大.40min才过.这个做法非常怂的以代码复杂度和时间复杂度为代价换取了比较稳的正确性,事实上由于1~n可以组合出 ...

  10. Android 内核--Context对象

    Context(在Android中翻译为场景):一个Activity就是一个Context,一个Service也是一个Context,应用程序中有多少个Activity或者Service,就会有多少个 ...