Grunt 使用指南

Grunt 是一个基于 NodeJS 的项目的自动化构建工。目前可以用的插件非常丰富,足以应对大多项目中的需要。CofeeScript, handlebars, jade, less, REQUIRE.JS 等知名开源项目都在使用。

日常开发中,我们常使用 Grunt 协助完成以下任务:

  • 自定义项目模版、快速搭建
  • 代码压缩、合并、部署
  • 代码校验、测试
  • 静态服务器

安装

Grunt 目前的最新版本是 0.4.x,Grunt 和 Grunt 插件都使用 NPM 进行管理,需要安装于 Node.js 0.8.0 以上版本。NodeJS 安装请参考:Windows,NodeJS 环境配置

如果之前安装过 0.4.x 以下版本,需要先卸载。

合并 Template 和 Javascript

目前手头上负责的项目已经开发两年多了,刚开始那会儿,require.js 大家还不太熟悉,backbone 还没周岁,项目的模块化加载是基于 head.js 基础上加入了 css 加载的几近纯手工方式,打包的时候,需要根据用途进行JS合并。使用的是模版引擎是 underscore 自带的 tempalte。

项目原有的加载问题

模版的获取、渲染流程是这样的

通过工具中定义了一个获取模版文件的方法CustomGetTemplateFn

//utils.js
var CustomGetTemplateFn = function (templateFileName){
    var template = $.ajax({
        url: "./template/" + templateFileName + ".tpl",
        dataType: "script",
        async: false
    });

    return _.template(template);
}

图片模块中使用到了模版文件 book.html

对 Jade 的一些看法

作为 Express 的默认模版,Jade 进入了我的视野,如同习惯了 Javascript 的语法,再见到 Coffescript 时的惊艳。优雅、简单是对 Jade 的第一印象,在 Github 上拥有4K的Star足见其受欢迎的程度。

我在刚开发 Noderce 时就用上了 Jade,经过一番学习使用起来倒没有什么问题,但使用 Jade 这个过程并不像想象中的愉快,我遇到了一些的问题,并且耗费在写HTML上的时间有所增加。在之后的 Node.js 项目中我改用 EJS,非常的舒适习惯、效率很高。

我整理了自己使用 Jade 后的一些看法,希望对大家在选择模版引擎时有所帮助。

不能减少你的输入

这是 Jade 官网给的示例

WhatsInput,一款安卓输入法,手机的无线键盘

WhatsInput,是一款输入法,通过 WIFI,使你的PC键盘向手机输入内容。

  1. 漂亮的 ICON
  2. 简单的输入界面

希望 WhatsInput 可以在某个情景中,帮助你一些。

  1. 使用一些移动互联网的 IM 类应用时,假如:陌陌,WhatsApp,KiK 等
  2. 轻量级短信快速的输入方案
  3. 安卓应用测试时,需要内容输入
  4. ....

使用方法:

  1. 在设置中启用 WhatsInput
  2. 在需要使用时切换到 WhatsInput 输入法,这时你会看到类似这样的地址: http://192.168.1.100:6688
  3. 在浏览器中打开
  4. 支持 Enter 和 TAB 键

Google Play 地址:https://play.google.com/store/apps/details?id=com.buscode.whatsinput

Windows,NodeJS 环境配置

真的没见过比 NodeJS 更简单的开发环境搭建了,打开 http://nodejs.org/download/ 下载适合你的32位或者64位 Windows Installer (.msi) 安装包,双击一路狂点下一步,完成!

WIN + R 键入 CMD 运行,输入 node -v ,成功显示 NodeJS 版本即成功,输入 npm -v 显示 npm 版本号。

现在,你可以使用 npm install MODULE_NAME 安装你需要包进行开发了。

满足你的强迫症

如果你有以下疑问:

  1. nodejs 这货装哪去了?
  2. 我运行 npm install -g 命令时,这个模块被保存在哪里?
  3. 听说 npm 有 cache 机制,这些 cache 保存在哪里?

Noderce AppFog 部署指南

Pass 云平台可以使我们非常快速的部署我们的应用程序而不需要太多的精力花费在配置系统环境上。目前,我的博客部署在 AppFog 上,AppFog 目前使用来看会偶尔宕机,但一般很快就能恢复。

有 V2EX 上发了一个帖子介绍了一个 Noderce,得到了一些关注,所以写个 AppFog 部署指南给大家。

1. AppFog 管理工具

AF CLI TOOL 是使用 ruby 编写的命令行工具,可以运行在 Mac, *nix, Windows 上。通过它,可以创建应用、服务、查看应用日志等一系列的功能。 官方有非常详细的安装说明,请查询。https://docs.appfog.com/getting-started/af-cli

IDEA 配置同步

IDEA 这样的神器在很多情况下比 VIM 强上不少,但依然需要不断的调教才能越来越称手。在公司配置好的设置、功能,回家又要再来一次?那得多蛋疼,配合强大的 Dropbox 来帮你自动保存配置吧。

此方法也适用于 JetBrains 家的其它 IDE,IntelliJ Idea, PyCharm, WebStorm, PhpStorm, RubyMine, AppCode

弄清楚默认配置文件路径

  1. Windows XP 保存在这 \Documents and Settings\.IntelliJIdeaXX
  2. Windows Vista, Windows 7, Windows 8 保存在 \Users\.IntelliJIdeaXX
  3. Unix/Linux 保存在 ~/.IntelliJIdeaXX (~ 就是 /home/ 目录)
  4. Mac 保存在 ~/Library/Preferences/IntelliJIdeaXX

Thanks For Acterce

感谢一路有你作伴。
只是追梦的路上少了你,我怕自己不习惯。
再见我们的理想,再见我们曾经梦。

IDEA 使用外部工具

作为神器IDE,绝大部分的功能都已经内置或者通过插件来实现,但依然有一部分的功能无法通过 WebStorm 来完成。比如前端开发,很多的压缩工具使用 JAVA 、 ruby 、 .net 等来编写,你需要在命令行中运行它们,在 WebStorm 不用这么麻烦,可以使用 External Tools 功能来便捷的运行。

此方法也适用于 JetBrains 家的其它 IDE,IntelliJ Idea, PyCharm, WebStorm, PhpStorm, RubyMine, AppCode

以 CSS 压缩工具 CSSTidy 为例,介绍配置一个 external tools 的步骤

一、工具准备

下载 CSSTidy http://csstidy.sourceforge.net/download.php

新建一个目录,专门用于保存 WebStorm External Tools,把 csstidy.exe 扔到一个目录下,我放在 E:\dropbox\appdata\WebIde50\external_tools\csstidy\csstidy.exe

IDEA 字体美化

IDEA的中文字体一直不能让人满意。把字体改为 YaHei Consolas ,但英文的行距,字粗等方面的渲染依然不够理想,刚开始以为是 Consolas 的原因,就上 V2EX 问了一下,才知道,Monospaced 不是一个字体,而是一个字体类别,IntelliJ IDE 的字体,可以通过修改 fontconfig.properties 来定义一系列的字体类别顺序,使英文使用一种字体,中文使用另一种字体。

此方法也适用于 JetBrains 家的其它 IDE,IntelliJ Idea, PyCharm, WebStorm, PhpStorm, RubyMine, AppCode

英文好的童鞋,可以看 Oracle 官方对 Font Configuration Files 的说明。

以下以 IDEA 为例,说明配置中文字体为“微软雅黑”,英文字体为 “Courier New“ 的步骤。适用于 Windows 7。

一、找到你的 IDEA 使用的 JDK / JRE 里的 lib 目录

IntelliJ 家的 IDE,都自带了 JRE ,所以正常情况下,IDEA 使用的 JRE 目录就在你的IDEA根目录的jre里。我的路径是: D:\soft\JetBrains\IntelliJ IDEA\jre\jre\lib (下文涉及到这个路径的,请主动更换为你自己的实际路径)

二、修改 fontconfig.properties

找开 D:\soft\JetBrains\IntelliJ IDEA\jre\jre\lib ,把 fontconfig 开头的几个不同后缀的文件全部改名,或者转移到其它目录备份。下载我提供的这个文件,解压后,将 fontconfig.properties 扔到 D:\soft\JetBrains\IntelliJ IDEA\jre\jre\lib 目录下。重启 IDEA,打开设置。将字体设置为 Monospaced 即可。

回到顶部