在linux下怎么打包直接运行的node-webkit桌面应用

node-webkit 是一个很神奇的桌面客户端项目,正如这个项目的名字,这个项目是由node 和 webkit 构成,简单来说,就是你可以用HTML 5和 node 进行桌面客户端开发,而且客户端还是同时支持在 WIN,MAC,LINUX运行. 下面,就用一个简单的例子来展示一下node-webkit的魅力.

创建项目

本例子基于Grunt构建

如果,你用过grunt,要创建一个node-webkit 非常简单,我已经写好了一个node-webkit的grunt-init的项目模板. 至于怎么安装这个模板,跟官方的教程一样. 如果你是windows 用户

md %USERPROFILE%.grunt-init\node-webkit

git clone git@github:youxiachai/grunt-init-node-webkit.git %USERPROFILE%.grunt-init\node-webkit

linux or mac

git clone git@github.com:youxiachai/grunt-init-node-webkit.git ~/.grunt-init/node-webkit

你只需要用

grunt-init node-webkit

就可以创建完毕.

app.nw 这个目录就是我们准备要开始写的pc 客户端的项目文件夹,运行node-webkit项目很简单,只需要把node-webkit 的运行环境配置到环境变量,然后运行

nw app.nw 就可以运行起来了. nodewebkit1

PS: 如果你不想接触grunt,不过我建议还是学一下grunt,你可以到github/rogerwang/node-webkit#quick-start 学习如何启动一个node-webkit应用.

效果图

oscdesk1

oscdesk2

这个就是所谓的 win 8 风格的客户端了吧....界面用的框架是这货:aozora.github.io/bootmetro/ 90% 的时间都是调整界面...蛋疼死了......连个 win8 风格的progress 都没..让我非常伤心..也可能是alpha 的原因吧. 不过最后的效果,还是很难看,就凑合着过去吧....

开发

基于node-webkit 开发pc 客户端语言支持 c/c++,html5,css3, js,node api.好了,现在我们开始用html 5 + css3 写一个pc 客户端吧. node-webkit本质就是一个可以跑node 的浏览器,所以,我们用web 开发的技巧来开发pc 客户端毫无问题.

首先,打开toolbar,在package.json文件里面有个toolbar的参数,设置为true即可,就会见到如下图所示:

toolbar

点击那个三横线的按钮,一个chrome 风的调试窗口就出来了.

console

开发的时候,我们修改完文件,并不需要重新运行程序来看结果,我们,可以直接点击左边的刷新按钮即可看到我们修改的运行结果.用node-webkit开发客户端是不是很方便了!

那么接下来,要开发一个oschina pc 客户端,我们只需要知道,相关api 就行了,从android 客户端源码里面可以得到相关api...具体代码在app/model/oschinaApi.js 文件里面.

node-webkit,已经吧相关的安全限制已经去掉,所以说,用node-webkit开发pc客户端,用webkit 发的请求不受同源限制. 用node-webkit 开发一些restful 应用是非常舒服的事情,只要有个不错的界面.关于node-webkit的东西也就这么些了,剩下的就是web 开发,不在本文node-webkit范围内,所以就不再啰嗦..

第一步：搭建环境，主要是nodejs, npm, grunt(grunt-cli)

$ mkdir installGrunt

$ cd installGrunt

$ npm install grunt --save-dev #如果看到如下信息表示grunt安装成功

$ grunt --version

grunt-cli v0.1.13

grunt v0.4.5

第二步：创建 package.json

# 在项目的根目录下创建package.json文件

（1）根据grunt-init模板自动创建一个特定的package.json文件；（需要先安装 npm install -g grunt-init）

（2）在命令终端通过npm init命令自动创建一个基本的package.json文件；（亲自测试过）

（3）从官网上复制或者下载一个package.json文件；（对新手最方便）

（4）手工创建一个package.json文件；（对高手最方便）

添加依赖

（1）逐个添加，逐个执行命令 $ npm install XXX --save-dev

XXX是常用插件名，如grunt-contrib-jshint

最好是全称，不要简写。我曾试过 npm install cssmin --save-dev 生成了无用的东西。

（2）也可以一次在package.json中添加多个插件，然后一次执行命令 $ npm install

安装声明的依赖关系grunt插件同时， 在项目根目录下添加一个node_modules目录，目录中放置对应grunt插件所需的插件目录名。

注：当你给npm install添加 --save-dev标志是，一个波浪线范围将被用于你的package.json中。（建议）

第三步：创建Gruntfile.js

# 添加自己合适的gruntfile配置，运行，得出预期输出

moduwww.hbbz08.com le.exports=function(grunt){

//任务配置

grunt.initConfig({

})

//载入任务

grunt.loadNpmTasks()

//注册任务

grunt.registerTask()

}

内容参见demo1

$ grunt #

运行成功，在目标目录下创建了一个压缩后的js，引用压缩后的js，效果一样。

实践2：加上css压缩的过程

1，在package.json使用命令加一个插件

npm install grunt-contrib-cssmin --save-dev #一开始使用npm install cssmin不对，下了两个

2，在Gruntfile.js中三个部分都加入cssmin相关的命令

3，运行grunt

注：如果已经在initConfig里配置了uglify和cssmin，则不能再注册任务名为uglify和cssmin，报错如下

(node) warning: Recursive process.nextTick detected. This will break in the next version of node.

Please use setImmediate for recursive deferral（递归延迟）.

解决办法：注释掉

//grunt.registerTask("uglify",['uglify'])

//grunt.registerTask("cssmin",['cssmin'])

grunt.registerTask("default",['uglify','cssmin'])//默认执行的任务

你先检查一下和他的情况类似不？（升级 jshint，如果你装了的话）

如果和 jshint 没关系，那我建议你把你的 Gruntfile 做个排查，说不定是哪个插件造成的，然后再试试升级之类的办法。

实在找不出原因，把 Gruntfile 贴上 Gist 再来，或者直接发 issue。

另外你的 node 是不是老了点啊，换个版本试试，折腾呗～我在公司就有用的 win7（集成测试），但我是不升级就不舒服斯基，只要不是依赖不允许，我都用最新版本，所以我没遇到过和你一样的问题呀。

---