【Grunt】关于Grunt可视化的尝试

chenkehao

使用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：暂时还没发现其它可以跑子进程方式，求其他大神解救