您的位置：首页 > 其它

关于Grunt可视化的尝试

2013-09-09 15:58 218 查看
关于Grunt可视化的尝试

使用Grunt遇到的问题？

必须要安装
NodeJS


必须安装
grunt-cli


需要编写复杂的
Gruntfile.js
规则

每个项目中必须存在nodejs的
grunt
模块

不方便管理每一个包含grunt的项目

无法快速开始一个项目

解决思路

直接把
NodeJS
跟
grunt-cli
包含进去？

弄个有UI的界面来管理？

用程序简化gruntfile的规则？

将所有项目中需要的grunt模块包含到一起？

默认内置一些常用功能模块？

解决方案 -- nodewebkit

集成了
nodejs
，省去NodeJS安装

集成
webkit
内核，方便编写界面

适合前端人员开发

一次开发，兼容三大平台window/mac/linux

遇到问题

一.如何让NodeJS运行Grunt？

利用NodeJS的spawn运行cmd命令

//切换运行环境到项目中
process.chdir("项目地址");
//执行grunt
require("child_process").spawn("grunt");

这种方案最简单，但需要依赖
NodeJS
跟
grunt-cli


将grunt-cli的模块直接引进代码中，利用nodejs调用

var gruntpath = "grunt.js的路径";
var grunt = require(gruntpath);
grunt.cli();

直接运行，提示找不到gruntfile.js，修改grunt文件夹中的
task.js
，大概在430行左右

var old_path = process.cwd();//获取当前工作目录
process.chdir('项目文件目录');//修改到项目目录
var gruntfile = allInit ? null : grunt.option('gruntfile') ||
grunt.file.findup('Gruntfile.{js,coffee}', {nocase: true});//查找gruntfile文件
process.chdir(old_path);//修改回程序目录
此处省略n行代码~~~
(grunt.option('npm') || []).forEach(task.loadNpmTasks);//加载npm的模块
process.chdir('项目文件目录');//切换到项目目录

先切换到项目文件目录查找
gruntfile.js
文件，然后切换回程序目录查找node模块,运行完grunt后，程序自动退出了，囧，需要修改grunt下的
exit.js


process.exit(0);//这句需要注释掉


二.如何在子进程中运行Grunt？

利用NodeJS的child_process.fork

var child = require("child_process").fork("child.js");
child.onmessage = function(data){
console.log(data);
}
child.on("exit",function(exitCode){
console.log(exitCode);
});

--运行后提示：unzip the package xx/child.js，上网各种谷歌之后得出作者结论：


child_process.fork is broken


--囧，就是这个方法是不能用了？继续谷歌之后得知


child_process.fork是无法运行js文件，它是直接运行执行命令
nw 文件夹

，所以修改一下，在
child
文件夹中也放一个
package.json
文件，执行后，果然成功了。


--然后又留下一个大问题，无法使用fork的通信接口，囧，最后只好用
tcp
来实现进程通信。

--当我想打包成app测试的时候，发现，压根就不会运行子进程
child



因为child_process.fork是运行
nw
命令，所以，打包后是没有nw命令



利用NodeJS的webworker来执行

npm install node-webworker

之后引用
worker.js


var Worker  = require("worker.js");
var workker = new Worker("child.js");
worker.onmessage = function(data){
console.log(data);
}
worker.postmessage({msg:'hello'});

运行后，发现child.js中的任何信息都无法传递回给父进程，最后发现在
worker.impl.buffer
中保存了相关信息。

var timeId = setInterval(function(){
var msg = worker.impl.buffer;
if(!msg)return false;
console.log(msg);
worker.imple.buffer = "";
},1000);

虽然很挫，但还是实现了功能了，打包测试，发现一切OK。发送到其它电脑测试，提示：


spawn node not found，就是需要执行的命令找不到


奇怪，我没调用
spawn
，哪来找不到？打开worker.js的源码查看，囧，发现：

child_process.spawn("node xxx.js");

囧，原来它是执行了
node
的命令来实现子进程，坑爹了。

利用HTML5的webworker

var worker = new Worker("child.js");
worker.onmessage = function(data){};
worker.postmessage("hello");

测试后，发现成功运行，消息也正常接收，可...
webworker
不支持运行
nodejs
代码，就是grunt无法跑起来。

三.目前可用方案

采用非子进程方式

无法同时跑多个grunt任务

grunt没有提供结束的方法

需要手动清除grunt的watch任务以及很多变量值，比较麻烦

出错很可能会直接结束程序

独立将child内容打包成可执行文件，采用child_process.spawn执行

需要打开两个可执行文件，两个加起来至少也有80M

开发时，需要用fork，打包时候用spawn

安装NodeJS，采用webworker方式

电脑必须安装了NodeJs

目前较好的方案

未来nodewebkit支持子进程方式，可以比较方便修改过来

PS：暂时还没发现其它可以跑子进程方式，求其他大神解救

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航