使用Grunt遇到的问题?

  • 必须要安装NodeJS
  • 必须安装grunt-cli
  • 需要编写复杂的Gruntfile.js规则
  • 每个项目中必须存在nodejs的grunt模块
  • 不方便管理每一个包含grunt的项目
  • 无法快速开始一个项目

解决思路

  • 直接把NodeJSgrunt-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");

    这种方案最简单,但需要依赖NodeJSgrunt-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:暂时还没发现其它可以跑子进程方式,求其他大神解救

【Grunt】关于Grunt可视化的尝试的更多相关文章

  1. 关于Grunt可视化的尝试

    关于Grunt可视化的尝试 使用Grunt遇到的问题? 必须要安装NodeJS 必须安装grunt-cli 需要编写复杂的Gruntfile.js规则 每个项目中必须存在nodejs的grunt模块 ...

  2. 杂项-Grunt:grunt build 打包和常见错误

    ylbtech-杂项-Grunt:grunt build 打包和常见错误 1. 安装.打包返回顶部 1. npm WARN deprecated coffee-script@: CoffeeScrip ...

  3. 【grunt】grunt 基础学习

    1. 干啥的呢? 项目打包管理,用处有 1)可用于压缩合并前端文件,包括css/js , 2)可用于管理发布文件与开发文件,3)可用于自动编译less 文件 2. 常用的东西有哪些呢? 常用的插件有 ...

  4. 高效开发之SASS篇 灵异留白事件——图片下方无故留白 你会用::before、::after吗 link 与 @import之对比 学习前端前必知的——HTTP协议详解 深入了解——CSS3新增属性 菜鸟进阶——grunt $(#form :input)与$(#form input)的区别

    高效开发之SASS篇   作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家 ...

  5. Grunt-cli的执行过程以及Grunt加载原理

    通过本篇你可以了解到: 1 grunt-cli的执行原理 2 nodeJS中模块的加载过程 Grunt-cli原理 grunt-cli其实也是Node模块,它可以帮助我们在控制台中直接运行grunt命 ...

  6. 【GruntMate】一个让你更方便使用Grunt的工具

    GruntMate是什么? 一个基于Grunt的项目管理可视化工具(还不知道Grunt是什么?可以谷歌一下就知道了!) GruntMate有哪些功能? 方便的管理基于Grunt的项目 方便统一管理Gr ...

  7. Grunt教程——初涉Grunt

    前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为庞大和复杂,代码维护.打包.发布等流程也 变得极为繁琐,同时浪费的时间和精力也越来越多,当然人为的错误 ...

  8. 使用Grunt启动和运行

    开始使用Grunt 大多数开发人员都一致认为,JavaScript开发的速度和节奏在过去的几年里已经相当惊人.不管是Backbone.js和Ember.js的框架还是JS Bin社区,这种语言的发展变 ...

  9. 【转】自动化任务运行器 Grunt 迅速上手

    原文转自:http://blog.jobbole.com/51586/ 这篇文章将带领你用Grunt来提速和优化网站开发的流程.首先我们会简短介绍Grunt的功能,然后我们直接上手,介绍如何用Grun ...

随机推荐

  1. 平衡二叉树,AVL树之图解篇

    学习过了二叉查找树,想必大家有遇到一个问题.例如,将一个数组{1,2,3,4}依次插入树的时候,形成了图1的情况.有建立树与没建立树对于数据的增删查改已经没有了任何帮助,反而增添了维护的成本.而只有建 ...

  2. Spring入门_01

    <bean id="userAction" class="com.umgsai.spring.UserAction"> <property n ...

  3. 安装PL/SQL Developer 遇到的问题及解决方法

    在用PL/SQL Developer安装Oracle客户端时,报错误,初始化失败,一直找不到原因,换Oracle版本也解决不了问题,之后才发现,是Oracle的环境变量配置错了,之前用户配了Oracl ...

  4. glibc 简介:

    glibc 编辑 glibc是GNU发布的libc库,即c运行库.glibc是linux系统中最底层的api,几乎其它任何运行库都会依赖于glibc.glibc除了封装linux操作系统所提供的系统服 ...

  5. You should blog even if you have no readers

    Spencer Fry wrote a great post on "Why entrepreneurs should write." I would further add th ...

  6. 【原创】express3.4.8源码解析之中间件

    前言 注意:旧文章转成markdown格式. 中间件(middleware)的概念来自于TJ的connect库,express就是建立在connect之上. 就如同connect的意思是 连接 一样, ...

  7. topo排序 + 用邻接表优化后的

    输入数据: 4 61 21 32 33 42 44 2 4 61 21 32 33 42 41 2 topo排序为偏序: #include<stdio.h> #include<que ...

  8. Java 参数的一些心得

    java 对象入参是传入的是引用(一块内存), 基础类型是值(复制内容),测试代码如下 public class TestA { private String name; public String ...

  9. 小白科普之JavaScript的数组

    一.与其他语言数据的比较    相同点:有序列表    不同点:js的数组的每一项可以保存任何类型的数据:数组的大小是可以动态调整的 二.数组创建的两种方法 1)  var colors = new ...

  10. zb的生日

    http://acm.nyist.net/JudgeOnline/problem.php?pid=325 zb的生日 时间限制:3000 ms  |  内存限制:65535 KB 难度:2   描述 ...