Grunt打包GMU组件 报错处理

2024-01-15 08:59

本文主要是介绍Grunt打包GMU组件 报错处理,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

莫Q群的大神推荐移动GMU组件,GMU是基于zepto的mobile UI组件库,提供webapp、pad端简单易用的UI组件,官网:http://gmu.baidu.com/具有以下特点:

  1. 简单易用

  2. 轻量级

  3. 文档丰富,自定义下载

  4. 专业稳定

  5. 丰富实用UI组件

  6. 开源免费

基础版本中只实现了能通用的部分,而其他可能通用的部分都是通过插件的形式来扩展,需要为GMU组件量身定制了一套基于Grunt的代码合并工具,配置最终需要的js文件即可,其他依赖文件都会自动打包进来

官网打包下载流程http://gmu.baidu.com/download

 

  1. 安装node.js。
  2. 安装git。window用户请安装msysgit, Linux/Mac用户请安装git命令行工具。
  3. 安装Grunt。  npm install -g grunt-cli
  4. git clone https://github.com/gmuteam/GMU.git  克隆Git代码到当前目录,正常执行后,当前目录会多出来一个GMU目录。
  5. 进入GMU目录 cd GMU
  6. npm install, 安装node依赖。
  7. grunt dist, 根据配置项,在dist目录中生成合并版本代码, dist/gmu.js, 对应的样式和图片资源也会生成在此目录下。

一二三步骤可以参考 node.js 安装、图文详解  学习笔记--Git安装 创建版本库 图文详解   学习笔记--Gruntjs、安装、图文详解

四、clone GMU

打开git命令窗口,也可以使用cmd,如果cmd执行git报错,需要将git添加到环境变量中。在git下cd进入莫项目,

执行命令: git clone https://github.com/gmuteam/GMU.git  网速快一分钟不到即可clone完毕

再进入GMU目录 cd GMU ,npm安装软件包 npm install 

一开始蛮正常的,到后来报错了

phantomjs 报错,万恶的河蟹...(此处省略n字),找了个vpn代理,删掉刚刚git的GMU整个目录(第一次没删除,npm install 执行时报错,不得已整个删除GMU目录),再次使用git命令取得GMU目录,再次安装包,这次phantomjs成功了

最终npm install 成功

关键时候到了,执行 grunt dist 漫长等待,终于成功了

 

查看根gmu目录,多了dist目录了里面有js css images

如果需要配置其他的组件,需要修改Gruntfile.js配置文件,组件功能介绍官网有API

 

 

转载于:https://www.cnblogs.com/xbcq/p/3670265.html

这篇关于Grunt打包GMU组件 报错处理的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/608351

相关文章

Python FastAPI+Celery+RabbitMQ实现分布式图片水印处理系统

《PythonFastAPI+Celery+RabbitMQ实现分布式图片水印处理系统》这篇文章主要为大家详细介绍了PythonFastAPI如何结合Celery以及RabbitMQ实现简单的分布式... 实现思路FastAPI 服务器Celery 任务队列RabbitMQ 作为消息代理定时任务处理完整

C#使用SQLite进行大数据量高效处理的代码示例

《C#使用SQLite进行大数据量高效处理的代码示例》在软件开发中,高效处理大数据量是一个常见且具有挑战性的任务,SQLite因其零配置、嵌入式、跨平台的特性,成为许多开发者的首选数据库,本文将深入探... 目录前言准备工作数据实体核心技术批量插入:从乌龟到猎豹的蜕变分页查询:加载百万数据异步处理:拒绝界面

Springboot处理跨域的实现方式(附Demo)

《Springboot处理跨域的实现方式(附Demo)》:本文主要介绍Springboot处理跨域的实现方式(附Demo),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不... 目录Springboot处理跨域的方式1. 基本知识2. @CrossOrigin3. 全局跨域设置4.

Flutter打包APK的几种方式小结

《Flutter打包APK的几种方式小结》Flutter打包不同于RN,Flutter可以在AndroidStudio里编写Flutter代码并最终打包为APK,本篇主要阐述涉及到的几种打包方式,通... 目录前言1. android原生打包APK方式2. Flutter通过原生工程打包方式3. Futte

python+opencv处理颜色之将目标颜色转换实例代码

《python+opencv处理颜色之将目标颜色转换实例代码》OpenCV是一个的跨平台计算机视觉库,可以运行在Linux、Windows和MacOS操作系统上,:本文主要介绍python+ope... 目录下面是代码+ 效果 + 解释转HSV: 关于颜色总是要转HSV的掩膜再标注总结 目标:将红色的部分滤

SpringBoot启动报错的11个高频问题排查与解决终极指南

《SpringBoot启动报错的11个高频问题排查与解决终极指南》这篇文章主要为大家详细介绍了SpringBoot启动报错的11个高频问题的排查与解决,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一... 目录1. 依赖冲突:NoSuchMethodError 的终极解法2. Bean注入失败:No qu

springboot报错Invalid bound statement (not found)的解决

《springboot报错Invalidboundstatement(notfound)的解决》本文主要介绍了springboot报错Invalidboundstatement(not... 目录一. 问题描述二.解决问题三. 添加配置项 四.其他的解决方案4.1 Mapper 接口与 XML 文件不匹配

Python实现自动化接收与处理手机验证码

《Python实现自动化接收与处理手机验证码》在移动互联网时代,短信验证码已成为身份验证、账号注册等环节的重要安全手段,本文将介绍如何利用Python实现验证码的自动接收,识别与转发,需要的可以参考下... 目录引言一、准备工作1.1 硬件与软件需求1.2 环境配置二、核心功能实现2.1 短信监听与获取2.

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

Python使用date模块进行日期处理的终极指南

《Python使用date模块进行日期处理的终极指南》在处理与时间相关的数据时,Python的date模块是开发者最趁手的工具之一,本文将用通俗的语言,结合真实案例,带您掌握date模块的六大核心功能... 目录引言一、date模块的核心功能1.1 日期表示1.2 日期计算1.3 日期比较二、六大常用方法详