关于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:暂时还没发现其它可以跑子进程方式,求其他大神解救
关于Grunt可视化的尝试的更多相关文章
- 【Grunt】关于Grunt可视化的尝试
使用Grunt遇到的问题? 必须要安装NodeJS 必须安装grunt-cli 需要编写复杂的Gruntfile.js规则 每个项目中必须存在nodejs的grunt模块 不方便管理每一个包含grun ...
- Kibana查询说明
elasticsearch构建在Lucene之上,过滤器语法和Lucene相同 Kibana接口概述 Kibana接口分为四个主要部分: 发现 可视化 仪表板 设置 我们将按照列出的顺序浏览每个部分的 ...
- Gruntjs提高生产力(三)
以下例子来自真实项目,有所删减 grunt-test project 目录结构如下 一我的目的: 1.在src-dev目录中开发最终产出于src目录 2.src-dev中的index目录相当于一个wi ...
- 解密国内BAT等大厂前端技术体系-阿里篇(长文建议收藏)
进入2019年,大前端技术生态似乎进入到了一个相对稳定的环境,React在2013年发布至今已经6年时间了,Vue 1.0在2015年发布,至今也有4年时间了. 整个业界在前端框架不断迭代中,也寻找到 ...
- 解密国内BAT等大厂前端技术体系-百度篇(长文建议收藏)
1 引言 整个业界在前端框架不断迭代中,也寻找到了许多突破方向,例如跨平台中的RN.Flutter,服务端GraphQL.Serverless,前端和客户端的融合越来越紧密,前端在Node和Elect ...
- 【大厂】389- 解密国内BAT等大厂前端技术体系-阿里篇(长文建议收藏)
进入2019年,大前端技术生态似乎进入到了一个相对稳定的环境,React在2013年发布至今已经6年时间了,Vue 1.0在2015年发布,至今也有4年时间了. 整个业界在前端框架不断迭代中,也寻找到 ...
- ELK学习笔记之Kibana查询和使用说明
0x00 概述 elasticsearch构建在Lucene之上,过滤器语法和Lucene相同 Kibana接口概述 Kibana接口分为四个主要部分: 发现 可视化 仪表板 设置 我们将按照列出的顺 ...
- 解密国内BAT等大厂前端技术体系-美团点评之上篇(长文建议收藏)
引言 进入2019年,大前端技术生态似乎进入到了一个相对稳定的环境,React在2013年发布至今已经6年时间了,Vue 1.0在2015年发布,至今也有4年时间了. 整个业界在前端框架不断迭代中,也 ...
- 翻译——3_Gaussian Process Regression
使用不同的机器学习方法进行预测 续上篇2_Linear Regression and Support Vector Regression 高斯过程回归 %matplotlib inline impor ...
随机推荐
- shell变量赋值进阶
首先,要理解shell中变量的3种赋值情况: unset 例子. unset a 空字符串, null 例子. a='' 非空,即不是unset,并且不是空字符串 例子: a=1 or a=b等 然后 ...
- linux_shell_获取日期相关
shell里直接调用系统变量 获取当天日期`date +%Y%m%d` 获取昨天日期`date -d yesterday +%Y%m%d` 获取前天日期`date -d -2day +%Y%m%d` ...
- Linux 解决文件删除,但并没有改变磁盘可用性
昨天收到zabbix警报邮件,有一个server的 /home 文件夹的使用达成90%以上.检查,发现MongoDB数据文件到这个文件夹.高.而这个MongoDB的数据如今又都不用了.于是就直接把它的 ...
- 【转】Appium测试安卓Launcher以滑动窗体获得目标应用
原文地址:http://blog.csdn.net/zhubaitian/article/details/39755553 所谓Launcher,指的是安卓的桌面管理程序,所有的应用图标都放在laun ...
- 【百度地图API】如何区分地址解析和智能搜索?
原文:[百度地图API]如何区分地址解析和智能搜索? 摘要: 很多用户一直无法区分地址解析geocoder和智能搜索localsearch的使用场景.该文章用一个详尽的示例,充分展示了这两个类,共5种 ...
- Linux开发环境的搭建和使用——Linux本必备软件SSH
SSH 至 Secure Shell 缩写.由 IETF 网络工作组(Network Working Group)开发:SSH 以建立应用层和传输层安全协议中的基础上. SSH 是眼下较可靠,专为远程 ...
- 如何清除应用程序承载 WebBrowser 控件时缓存
原文:如何清除应用程序承载 WebBrowser 控件时缓存 http://support.microsoft.com/kb/262110/zh-cn察看本文应用于的产品 function loadT ...
- 高性能双端js模板
高性能双端js模板(新增filter)---simplite simplite是一款js实现的模板引擎,它能够完成浏览器端js模版和node服务器端js模板的数据渲染. 渲染性能十分突出. 支持浏览器 ...
- javascript通过数日两个日期之间的比较分离
$(function () { var starttime = transdate("2014-09-30 15:53:00"); var endtime = transdat ...
- java设计模式之十桥接模式(Bridge)
桥接模式就是把事物和其具体实现分开,使他们可以各自独立的变化.桥接的用意是:将抽象化与实现化解耦,使得二者可以独立变化,像我们常用的JDBC桥DriverManager一样,JDBC进行连接数据库的时 ...