yeoman-bower-grunt之间的关系
npm install -g yo
前置技能
Node and NPM
nodeJs就是基于谷歌v8引擎的一个javascript环境,使js不仅可以运行在浏览器端,也能在服务器端运行。
NPM(Node Package Manager),是nodeJs的包管理工具,其主要作用就是可以利用npm下载和管理库框架之类的开发工具。
NPM使用
NPM主要用的命令就是npm install
,例如:
npm install -g yo
其中可以通过加入-g
意味着全局安装。如果直接执行npm install
不带其他任何参数,则意味着根据当前目录中package.json
文件的要求安装工具。
package.json
{
"name":"xxx",
...
"dependencies":{},
"devDependencies": {
"grunt": "^0.4.5"
},
"engines":{
"node": ">=0.10.0"
},
"script":{
"test": "grunt test",
"install":""
}
...
}
如上就是一个简单的package.json文件,该文件采用json(JavaScript Object Notation)语法.
- name
就是该package的名字;
- dependencies
是该项目在生产环境中所依赖的包;
而devDependencies
就是该项目在开发环境中所依赖的包。当在该文件目录下键入npm install
时,就会根据devDependencies下的内容下载所需工具。这里为空是因为虽然我们的项目是一个node项目,但是将来在开发的时候是一个站点,声明是没有意义的。如上例子中^0.4.5
意味着下载以0.开头的最新版本——0.x.x。而如果版本号为~0.4.5
,则意味着下载以0.4开头的最新版本——0.4.x;
- engines
是指项目所需的node版本必须大于0.10.0;
- scrpit
,指可以直接运行的脚本命令,在上面的例子我们输入npm test
,就会执行grunt test
命令
前端集成解决方案
很简单,所谓前端集成解决方案,就是一套包含框架和库,帮助开发者高效构建web应用程序的工作流。而如何实现前端集成解决方案呢,这就用到了下面的Yeoman,Bower和Grunt/Gulp,这些都是通过命令行实现的;也有可视化的工具,如FIS,Spirit。
Yeoman
什么是Yeoman
Yeoman是现代webapp的脚手架工具。
Yeoman的作用
Yeoman可以方便的为你初始一个项目,包括生成项目文件,代码结构,包依赖,初始页面的例子,等等,他预制了大量的最佳实践——generators,并自动将其与工具整合起来供你使用。
generators
根据你项目所需,比如你的项目中要用angular,那么你可以到Yeoman的官网中,找到Discovering generators
子页面,在里面找到angular的generators,找到适合你的最佳实践,其中带有八字胡的generators表示为Yeoman官方推出。除了最佳实践,Yeoman还是为我们统一了一些现阶段公认的例如代码校验,测试,压缩这些基本工作的流程。
使用Yeoman
npm install -g generator-angular
yo
首先用npm下载generator,这里下载的是angular
直接在控制台输入yo便会自动出现提示,根据提示便可以根据你需要的generator生成项目。
文件分析:
- package.json
Yeoman构建的项目是基于node的项目,对于基于node的项目,首先看的是package.json文件,这里包含这个项目最直观的描述。上面已经说过了,这里就不再赘述。
- Gruntfile.js
就是Grunt的配置文件
- bower.json
bower的json文件,告诉bower该下载哪些配置包
- .bowerrc
bower本身的配置文件,比如线上的框架组件拉下来要存放的目录,可以在这个文件里配置
- .gitignore
指忽略不上传到git的文件
- .gitattributes
git的配置文件
- .editorconfig
第三方工具,指定编辑器如tab,代码缩进之类的操作
- test文件
项目的自动化测试
- app文件
存放我们项目的源文件,包括html,css,js,img之类
Bower
什么是Bower
Bower是web包管理器。
Bower的作用
一个web站点可以包括:框架,库以及一些公共部分等,而Bower就是用来跟踪管理这些。例如你有一个项目,他需要jQueryv1.2.1我们一般的做法是去官网下载指定的jquery版本(当然也可以用cdn),但是用了bower可以轻松的根据需要自动下载所需版本库。
使用Bower
利用bower下载jquery
bower instal jquery
首先bower会查找jquery是否在它的注册库里,然后找到对应的github地址,然后下载安装最新稳定版本。
如果组件没有在bower注册,那么可以尝试其他安装方式
- github短写安装 jquery/jquery
- 项目完整的github地址安装 https://github.com/jquery/jquery.git
- 通过url进行安装 http://libs.baidu.com/jquery/1.9.0/jquery.js
bower.json好处:
版本仓库中只需要保存bower.json文件,其他成员把文件check到本地时,输入bower isntall,就会按照bower.json配置项下载包。
不占用公共库空间
保持公共库的最新稳定版本
生成bower.json配置文件
bower.init
根据提示一步步进行即可。
安装包并写入devDependencies
bower install angular --save-dev
不加dev就会写入dependencies
.bowerrc
directory为bower下载包的目录
proxy:代理如:”http//proxy.tencent.com:8080”
timeout:根据网速修改时间
Grunt
什么是Grunt
Gurnt是javascript的任务运行器。其含有庞大的生态圈,可以提供各种你所需要的插件。
Grunt的作用
对于需要重复执行的任务,例如压缩,编译,单元测试等,可以使用自动化工具来减少不必要的时间精力,而Grunt由于庞大的生态圈,可以在其找到各种你所需的自动化插件。
使用Grunt
安装:
npm install -g grunt-cli
gruntcli的作用是调用与gruntfile同一目录的grunt。
npm install grunt --save-dev
npm isntall grunt-contrib-jshint --save-dev
以上为一个简单的grunt以及插件下载
gruntfile结构
wrapper函数
所写代码必须放在此函数内
module.exports = function(grunt){ }
task,target,option,
target为task的目标,,而具体行为有option决定。
task
grunt [taskName]
默认会运行task下所有target。
grunt [taskName]:[targetName]
运行task下指定target
直接输入Grunt会执行default的task
task可以多个组合
一些常用task
<!-- 文件拷贝 -->
npm install grunt-contrib-copy --save-dev <!-- 文件删除 -->
npm install grunt-contrib-clean --save-dev
yeoman-bower-grunt之间的关系的更多相关文章
- 前端自动化学习笔记(一)——Yeoman,bower,Grunt的安装
最近看视频学习了前端自动化的一些知识,确实让我大开眼界.感觉前端越来越神器了.同时跟着视频自己也尝试运用了一些工具去构建前端项目,但是中间遇见了很多坑,磕磕绊绊的才实现了一点功能,所以打算记录一下学习 ...
- yeoman bower grunt等安装
grunt-beginner前端自动化工具:http://www.imooc.com/learn/30 grunt的安装 官方站点:http://gruntjs.com/ 安装指令: sudo npm ...
- node,Yeoman,Bower,Grunt的简介及安装
作为前端,基本的html,css,js已经不太够用了,所以要学习一些前端自动化工具,来提高我们的生产力 1.NodeJS 先安装NodeJS,直接去官网,下载最新的版本,一定要最新的版本,这样会避免很 ...
- windows下前端开发工具遇到的问题总结(yeoman bower grunt)
我用的是windows环境 一毕要环境: 1:nodejs 官网:https://nodejs.org/en/ 2:由于很多国外网站国内都访问不了(如果没有设置会出现很多奇怪的错误),所有必需FQ 我 ...
- Yeoman+Bower+gulp web前端自动化工作流程(初级教程)
Yeoman包括了三个部分yo(脚手架工具).grunt/gulp(构建工具).bower(包管理器).听说gulp更容易上手,所以我就没用grunt而选的gulp 什么是开发流程? 在我看来一个完整 ...
- .NET Core与.NET Framework、Mono之间的关系
随着微软的.NET开源的推进,现在在.NET的实现上有了三个.NET Framework,Mono和.NET Core.经常被问起Mono的稳定性怎么样,后续Mono的前景如何,要回答这个问题就需要搞 ...
- .NET Core 和 .NET Framework 之间的关系
引用一段描述:Understanding the relationship between .NET Core and the .NET Framework. .NET Core and the .N ...
- 实体之间的关系【Entity Relationships】(EF基础系列篇9)
Here, you will learn how entity framework manages the relationships between entities. Entity framewo ...
- php CGI、Fastcgi、PHP-FPM的详细介绍与之间的关系
以下PHP CGI.Fastcgi.PHP-FPM的一些信息归纳和汇总----->详细介绍与之间的关系 一:CGI是干嘛的?CGI是为了保证web server传递过来的数据是标准格式的 web ...
- [转] valuestack,stackContext,ActionContext.之间的关系
三者之间的关系如下图所示: ActionContext 一次Action调用都会创建一个ActionContext 调用:ActionContext context = ActionContext ...
随机推荐
- SDUT OJ 效率至上(线段树)
效率至上 Time Limit: 5000 ms Memory Limit: 65536 KiB Submit Statistic Problem Description 题意很简单,给出一个数目为n ...
- linux负载均衡与性能监控
平均负载是单位时间内, 系统处于可运行状态和不可中断状态的平均进程数( 平均活跃进程数 ) 可运行状体好理解, 就是进程正在运行状态Running和可运行状态Runnable... 这里需要注意的是 ...
- 忘记commit也会造成select查询的性能问题
今天遇到一个很有意思的问题,一个开发人员反馈在测试服务器ORACLE数据库执行的一条简单SQL语句非常缓慢,他写的一个SQL没有返回任何数据,但是耗费了几分钟的时间.让我检查分析一下原因,分析解决过后 ...
- [SCOI2009]windy数 BZOJ1026 数位dp
题目描述 windy定义了一种windy数.不含前导零且相邻两个数字之差至少为2的正整数被称为windy数. windy想知道, 在A和B之间,包括A和B,总共有多少个windy数? 输入输出格式 输 ...
- 添加win10激活工具
其实我们可以随便准备一个win10的激活密钥激活! 以管理员的身份进入到CMD下.. slmgr.vbs /upk 清除掉旧的slmgr /ipk W269N-WFGWX ...
- Android Activity实例应用(选择QQ头像)
1.效果图 点击button,跳转到页面2 选择需要的头像,自动返回 3.XML文件布局 页面1 <?xml version="1.0" encoding="utf ...
- abp + angular 前端使用 hash ,登录界面不跳转问题
abp 项目默认的路由没有使用hash,这会导致手动刷新浏览器时,页面404错误: 解决方法网上很多,就是在路由里添加一个{useHash: true},就行了. #用Hash带来的新问题# abp框 ...
- leetcode 88 Merge Sorted Array 归并排序
归并排序:先将数组一分为二,将左边部分排序(同样将其一分为二),再将右边部分排序,最后逐层归并.(分治策略)(稳定排序). 算法稳定性 -- 假设在数列中存在a[i]=a[j],若在排序之前,a[i] ...
- python-Generalization of Hops
python provides a general purpose HOP,map simple form-a unary function and a collection of suitable ...
- python操作Spark常用命令
1. 获取SparkSession spark = SparkSession.builder.config(conf = SparkConf()).getOrCreate() 2. 获取SparkCo ...