【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？

1. 利用NodeJS的spawn運行cmd命令

   //切換運行環境到項目中
   process.chdir("項目地址");
   //執行grunt
   require("child_process").spawn("grunt");

   這種方案最簡單，但須要依賴NodeJS跟grunt-cli

2. 將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？

1. 利用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命令

2. 利用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的命令來實現子進程，坑爹了。

3. 利用HTML5的webworker

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

   測試後，發現成功運行，消息也正常接收，可...webworker不支持運行nodejs代碼，就是grunt沒法跑起來。

---

三.目前可用方案

1. 採用非子進程方式

   • 沒法同時跑多個grunt任務
   • grunt沒有提供結束的方法
   • 須要手動清除grunt的watch任務以及不少變量值，比較麻煩
   • 出錯極可能會直接結束程序

2. 獨立將child內容打包成可執行文件，採用child_process.spawn執行

   • 須要打開兩個可執行文件，兩個加起來至少也有80M
   • 開發時，須要用fork，打包時候用spawn

3. 安裝NodeJS，採用webworker方式

   • 電腦必須安裝了NodeJs
   • 目前較好的方案
   • 將來nodewebkit支持子進程方式，能夠比較方便修改過來

PS：暫時還沒發現其它能夠跑子進程方式，求其餘大神解救