前端集成化解决方案:
写在前面的话:
创建文件 -mkdir test
删除文件: rm -rf test // 通过递归调用的方式直接删除这个文件
安装使用
--save-dev 的主要是作用是将你的该安装的插件后者东西依赖到了当前的 npm 包中了
Grunt-Beginner 前端自动化工具
1: 前端集成解决方法:框架 工具 快速 美丽实用
2: 开发团队风格不统一 ,前期开发组件库维护,模块化前端项目 ,服务器部署前必须压缩,流程简化完善
3: 目前前端主流的几种集成方案: Yeoman bower Grunt|Gulp[build tool]
目前已经集成化的:
CodeKit --仅仅支持mac
FIS: 百度前端集成
Spirit: 腾讯前端集成
Grunt(logo:是头野猪): 是依赖node安装
npm: 包管理工具 Node Package Manager
用途:build tool 自动化。类似压缩变异单元测试,代码校验这种重复且无业务关联的工作。
安装grunt: npm install grunt
-g -cli
// 全局环境下面安装grunt工具
[今天是2016-11-10 貌似很少有人在用这个了,其实都一样,工具只是完成任务的,吃什么饱才是目的 ]
向已经存在的
package.json
文件中添加Grunt和grunt插件的最简单方式是
是 过
npm install <module> --save-dev
命令。此命令不光安装了
<module>
,还会自动将其添加到
devDependencies
配置段中。
安装模块:
npm install grunt-contrib-jshint
--save-dev // 以
grunt-contrib-jshint为例自动安装并且更新来package.json文件。
前途: 生态环境很好。
package.json 是用来配置所需要的所有的插件的,在官网的首页有案例可以复制下来进行配置。
gruntFile.js 是用来配置操作所需要的任务的语法:
tips: 如果在npm后面没有跟任何的参数,npm在当前的根目录下的package.json 的文件,系统自动在这个配置文件中查找安装。
package.json: npm主要查看的 dependencies:这个对象,可以看到依赖的组件 可以使用
npm init进行自动的安装配置的参数
Yeoman: (logo:老头,寓意是公民),自誉为现在前端开发的脚手架
用途:在web项目的理想阶段,使用yeoman来生成项目的文件和代码结构,yeoman自动将最佳实践和工具整合进来,大大加速和方便了我们的后续的开发。
generator需要单独的进行安装,因为每个项目的generator是不一样的。
问题: yeoman怎么保证我们需要最佳的工具呢? --维护了一套生成器一样的生态,例如我们项目需要angualr。我们就是用angular web。
安装:
npm install -g yo
官网: 在generation中,前面有标志符号的是官方出品的,其余是第三方开发的
generator 生成器 并不是跟对yoman安装的,而是我们各取所需,根据自己的需要来安装的,npm安装包是在自己生成器的名字前面加上generator-
例如: 安装angualr的: npm install -g generator-angular
创建项目在当前的文件下面: yo angular anguarProject [自己定义的项目名称]
Bower( logo:一种鸟,在雄鸟求偶的时候会搭建一个很华丽的凉亭来吸引雌鸟~ 佷污哈 )
用途:官房给出的是包管理器,web站点一般有很多的框架,库,公共部分等组成,bower则用来跟踪管理这些。
安装:npm install -g -bower
验证: bower -v
实际项目中的应用:
eg: bower install bootstrap
bower install jquery
安装指定版本的jquery: bower install jquery#1.x --save
安装完成以后会在自己的项目文件下面生成一个叫做
bower_components 的目录文件,里面都是通过 bower 进行安装以后生成的文件。
如果组件比较小众,没有在bower上面注册,怎么办?
bower提供了多种安装方式:(可以在线上先搜索存不存在)
bower提供了多种安装方式:(可以在线上先搜索存不存在)
1. 通过github的短语安装,现在github上面找到这个项目名称短语,例如后面的query
bower install jquery/jquery
![前端自动化构建 - 眷恋天空的驴 - 眷恋天空的驴 前端自动化构建 - 眷恋天空的驴 - 眷恋天空的驴](http://img1.ph.126.net/_rjZ5ZoKv9k-iCiRknmDsg==/6631513067908310599.png)
2. 通过github的地址来选择安装:
bower install https://github.com/jquery/jquery.git
3: 如果没有在GitHub上立项,则直接可以使用url地址,例如有些public jquery cdn等。
bower的两个配置文件:bower.json [记录所有本地安装过的bower,方便其他人进行项目的直接安装,在较少了版本管理中文件的体积],别人就直接bower install 就会自动下载这些bower文件。
bower install 会自动根据配置文件进行选择安装
生成 bower init 就会生成bower.json文件,默认是没有的,需要手动的生成这个文件。
一般情况下用不到.bowerrc,但是有时候拉去资源的时候需要设置代理,并且修改默认的网络延时时间的时候,就需要修改这个文件,其中划线部分是默认的一项。
,
![前端自动化构建 - Anikin - 眷恋天空的驴 前端自动化构建 - Anikin - 眷恋天空的驴](http://img2.ph.126.net/rirtqcGy1SHvEN4qx-cEyg==/6632304716279881619.png)
案例:
添加一个angular而且添加到json文件里面:bower install angular --save-dev
在生产环境中也使用angualr: bower install angular --save 即可
应用: 实际生产中的使用
1: yoman怎样grunt应用生成项目的: task target options
modernizr
是用来检测用户浏览器是都支持某些html5和css3的新特性的一个js库
案例: