使用 Live-server 作为开发服务器

我一直都用 Webstorm,所以分享时漏掉了搭建本地测试服务器的环节,现在补上。

实战组件开发——手机日历 – 1. 项目启动 直播结束后,有同学问我怎么在本地调试。于是我突然意识到这个问题:

我一直都用 Webstorm,它有内置开发服务器,点一下就可以在浏览器里用 http:// 协议预览了。但是没有用 Webstorm 的同学就办不到,如果直接双击 .html 会议 file:/// 协议打开,影响开发。

然后我就录了下面这段视频,介绍使用 Live-server 进行本地开发。视频很短,中间等待安装的时间比较长,可以跳过。


另外,《实战组件开发》的第四讲:《用 Gulp 打包发布吧!》将于本周五进行,欢迎大家来围观。


Live-server 官网

神奇的 China

如果使用 Git 遇到 “A TLS packet with unexpected length was received” 的错误,不妨试一下 git config –global https.proxy ‘socks5://127.0.0.1:9999’

买的阿里云机器,git clone 不下来,报错:

A TLS packet with unexpected length was received

摸不到头脑,Google 之,在 StackOverFlow 上面找到一个神奇的答案

If you are in china,may be you should set proxy for git,for example

git config --global https.proxy 'socks5://127.0.0.1:9999'

竟然有效!

给WebStorm添加FileWatcher支持Browserify

使用WebStorm的FileWatcher可以进行各种文件编译,除了内建类型,添加自定义类型也完全没有问题。

按惯例先介绍本文角色:

Browserify 是一款让我们在浏览器端使用require('modules')来管理模块的工具。它会分析代码中的依赖关系,然后进行编译,打包成一个文件,我们只需要在HTML中引用生成的文件即可。

WebStorm 则是JetBrains出品的开发利器,集成了各种开发工具和环境,价格不贵,速度很快,样式好看,我非常喜欢。

Browserify 也提供了个工具,叫 watchify ,可以监控文件变化,即时编译。不过我更喜欢让WebStorm帮我处理这些事情,所以小小研究了一下,配置成功。

具体步骤

  1. 通过 NPM 安装 Browserify
    npm install browserify -g
    
  2. [Preferences] -> [Tools] -> [File Watchers]

  3. 点击“+”按钮,没有内建方案,所以选择“<custom>”

    WebStorm Preferences

  4. 名字(Name)随便写,描述(Description)可以留空,重点是下面几项

  5. FileType 选择 JavaScript

  6. Scope 监控范围,内建的都不合适,所以点“…”按钮,弹出自定义的监控范围

  7. 新建一个域,名字和项目一样,好认。展开项目目录,选择存放JS文件的目录,点右侧的“Include”和“Include Recursively”将该目录下所有文件和文件夹都包含进来。OK保存。

    WebStorm Scope

  8. Program 是要执行的程序,这里自然是 Browserify,Mac下通常在/usr/local/bin/browserify

  9. Arguments 参数,参考 Browserify 的文档介绍,常规命令是

    browserify index.js -o bundle.js --debug
    

    其中 index.js 是我的入口JS,那么直接去掉 browserify 就好了。

  10. Working Directory 工作目录,点击右侧的“Insert Macros”按钮,选择 “$ProjectFileDir$”。后面接上目录“/js/”。

  11. 完成!

    WebStorm Browserify File Watcher

小优化

  1. 前面我们设置监控范围的时候比较粗放,这样生成 bundle.js 之后会再跑一遍,有点不爽,所以图中我把 bundle.js 过滤掉了

  2. 确保这个File Watcher正常工作后,可以去把 Show console 设置成Never,这样在编辑到一半的时候就不会有错误提示了。

推荐好用的JS CDN

推荐一个国内的静态代码CDN:http://www.staticfile.org/。

上周GFW又抽风,导致取自CDN的jQuery和Bootstrap经常404,后台各种罢工。

开始想说干脆放弃CDN得了,结果自家服务器也不是很给力……本地路径的静态文件也经常加载失败,挠了半天头,再去找找国内的CDN吧。

后来想起来前几天看到七牛搞了个免费的开源仓库CDN,通过Google找到,叫http://www.staticfile.org/。打开一看,首页只列出不多的几个库,版本也不是最新的。我以为又是个没人维护的烂尾工程,读了介绍才知道他们倡导大家都来提交库信息,共同建立全面的CDN资源。我本想把这次要到的库和可以更新的库提交上去,后来发现原来他们已经引入了cdnjs.com里所有的库,只不过没有写在首页……果然大家都喜欢写代码不喜欢写文档啊,差点就错过了。

BTW,cdnjs.com居然还提供了animate.css,真好。

好在他们做了命令行工具,可以装上查引用地址。比如我想知道能不能用underscore,就可以这样:

// 安装
npm install -g sfile

// 查找underscore
sfile search underscore

// 得到链接,这里要用全名
sfile get underscore.js

最后看https://github.com/staticfile/static/issues里的内容才知道,他们会把国外成熟的库直接从cdnjs复制过来,提交新库应以国内的为主。嗯,将来把Nervenet弄完也提交进去。

重复一下网站地址:http://www.staticfile.org/。最后感谢下这些好人,以及服务提供商七牛云存储

本地部署weinre帮助移动开发

如何在本地电脑上搭建weinre服务,帮助我们调试远程页面(比如手机上)。

weinre是个开源项目,用来在Web开发中做远程调试的工作,相当给力。后来也捐给了Apache基金会,并且从ruby移植到了JavaScript,现在可以直接通过npm安装。在最近的广告墙大重构中,这个工具帮了我很大的忙。

安装weinre首先要装node.js,后者在Windows和Mac上直接下包就能装,并且自动配置环境,很方便;在Linux上需要自己编译一次,也不复杂,我之前有篇日志写了,现在还好使,可以看看。

node.js环境搞定后,直接用npm就可以安装weinre了,直接装在全局中最好:

sudo npm install weinre -g

接下来启动weinre,我在这里卡了一阵,大概因为不太了解端口侦听的缘故,我以为直接启动就好,结果从外面连不上(手机连不上连点反应都没有,很难排查),因为侦听的是localhost的ip,也就是127.0.0.1。后来尝试绑定内网ip,才算解决问题:

# 8081是想找一个不常用的端口,后面的ip是我在内网的ip
weinre --httpPort 8081 --boundHost 192.168.10.54

这次无论是本机还是手机都可以正常访问了。然后Mac这里可能还会遇到点小问题。虽然我关闭了防火墙,但是Unix自带的ipfw还在工作,会阻止从外面过来的访问(不知道为啥80没问题),所以要给8081端口专门的许可:

sudo ipfw add 8081 allow from any to any

之后就万事大吉了,在HTML里添加 <script src="http://192.168.10.54:8081/target/target-script-min.js#meathill"></script> (域名根据具体情况修改),然后打开 http://192.168.10.54:8081/client/#meathill 就可以查看了,如果有多台终端在调试的话,还可以点选目标机器。

好了,享受下weinre带来的方便快捷的移动端调试吧。(不自己截图了,借用了weinre官网上的图片)

weinre使用截图
weinre使用截图

Aptana里安装Ant

在aptana下安装ant,比较简单。

开始整理以前的项目,准备换一种组织形式。所以产生一个需求,批量发布很多东西,比如发布一套html、发布若干JS、发布SWF,等等。

解决这种需求当然应该用ant,不过打开aptana查了下,发现里面没有ant。所以需要重新安装一下。因为ant是eclipse标配,所以安装过成还算简单。

继续阅读“Aptana里安装Ant”

使用Aptana进行基于jQuery框架的开发

Aptana Studio 3.0.5之后,可以通过Commands > Install Bundle > jQuery来增加对jQuery的引用。

慢慢的,Aptanta Studio已经升级到3.0.6,新版本具体更新哪些内容我也没在意——我只是追新而已——不过我终于发现了增加类库支持的方法。

Aptana Studio 2.0的时候,要使用什么类库就直接添加引用(Reference)就好了,非常方便;和其它开发工具同类型的操作方式也很相似,用起来很舒服。可是3.0升级后取消了这一功能,搞得大家很不适应,开发者承诺会让这个功能回归,结果确是另一副样子:添加对应sdocml文件到项目当中,而且得是物理添加,但是在我的环境中怎么搞都不成功。

从3.0.4起Aptana增加Start Page,介绍一些Features和Bug修复信息。我就是从里面的“Adding JavaScript libraries to your projects”了解到上面功能的。这次升级后我随手点开,发现“JavaScript Library Support”指向的是另外一个地址,里面提到,从3.0.5之后,可以直接通过添加包的方式来增加jQuery类库支持,方法如下:

  1. Commands > Install Bundle > jQuery
  2. 右击项目,选择Properties > Project Build Path,然后勾上jQuery 1.6.2的复选框
这样操作起来简单得多了。
PS:3.0.6之后,不再需要步骤2
PS2:在“Install Bundle”时我还发现其它一些包,比如WordPress和Github,有机会试用一下。

不推荐使用TortoiseGit 1.7.2版

我很喜欢尝鲜,所以看到TortoiseGit升级到1.7.2版之后就兴冲冲跑去升了级,结果出现一个bug折腾到现在,终于还是放弃了。装回1.6.5之后一切正常。鉴于google到的资料(尤其是中文)非常有限,所以不建议大家安装最新版。

我很喜欢尝鲜,所以看到TortoiseGit升级到1.7.2版之后就兴冲冲跑去升了级,结果出现一个bug折腾到现在,终于还是放弃了。装回1.6.5之后一切正常。鉴于google到的资料(尤其是中文)非常有限,所以不建议大家安装最新版。

PS:这会儿(2011-08-22 22:26)发现Google Code上1.7.2的下载链接已经去掉了,想必官方也发现了这个致命bug。

PS2:官方已经发布了1.7.3版,修复了我所说的这个bug,可以试用。

继续阅读“不推荐使用TortoiseGit 1.7.2版”