chenkehao 发表于 2017-2-23 08:35:52

【Grunt】关于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:暂时还没发现其它可以跑子进程方式,求其他大神解救
页: [1]
查看完整版本: 【Grunt】关于Grunt可视化的尝试