Grunt前端自动化工具
来源:互联网 发布:放逐之城v4.5数据 编辑:程序博客网 时间:2024/05/17 01:18
Grunt前端自动化工具
视频教程:Grunt-beginner前端自动化工具
基本工具
Yeoman
官网http://yeoman.io/
中文站点http://www.yowebapp.com/
Yeoman
的作用是在Web项目的立项阶段,使用yeoman来生成项目的文件和代码结构。Yeoman
自动将最佳实践和工具整合进来,大大加速和方便了我们后续的开发。
Yeoman
工作流包括了三个类型的工具在你构建一个 webapp 的时候为你提供创造力和满意的方案:脚手架工具 (yo
), 构建工具 (Gulp
,Grunt
等) 和包管理工具 (例如npm
和Bower
).
安装Yeoman
npm install -g yo
安装好后使用yo --version
查看版本
Bower
官网https://bower.io/
Bower
是Web的包管理器,一个Web站点由很多部分组成:框架、库、公共部分等。Bower
则用来跟踪管理这些
安装
npm install -g bower
安装后使用bower -v
来查看版本号,有版本号显示,表示安装成功
Grunt
官网介绍快速入门
GRUNT
JavaScript
世界的构建工具
一句话:自动化。对于需要反复重复的任务,例如压缩(minification)、编译、单元测试、linting等,自动化工具可以减轻你的劳动,简化你的工作。当你在 Gruntfile 文件正确配置好了任务,任务运行器就会自动帮你或你的小组完成大部分无聊的工作
安装Grunt CLI
npm install -g grunt-cli
Yeoman实践
generator
是一个基础的插件,它可以使用yo
命令去构建完成一个项目或者其它一些有用的部分
通过官方的 Generators, 我们将推进 “Yeoman 的工作流”。这是一个强大的和稳定的工作流客户端栈,包括工具和框架,它可以帮助开发人员快速构建漂亮的Web应用程序。我们细心的提供一切需要并很头痛的项目起步设置,原先你需要手动设置。
generator
并不是随Yeoman
安装的,需要自行安装
以generator-angular
为例来说明
1.安装generator-angular
npm install -g generator-angular
可能出现的问题http://www.imooc.com/qadetail/69653
2.创建后对应的目录后,使用如下命令生成一个angular
的项目
yo angular learnangular
可能出现的问题Angular generator error, can’t find karma:app generator
Bower实践
例如在项目中要使用jquery
和bootstrap
,以前的做法是先在网上把jquery
和bootstrap
下下来,再放在项目的目录中,现在使用bower来做:
bower install jquery
控制台显示如下:
bower cached https://github.com/jquery/jquery-dist.git#3.2.1bower validate 3.2.1 against https://github.com/jquery/jquery-dist.git#*bower install jquery#3.2.1jquery#3.2.1 bower_components/jquery
首先bower
会去查找jquery
是否在其注册库里,然后找到对应的github的地址,之后下载安装最新的稳定版本
如果组件比较小众,没有在bower注册,如何安装?
bower提供了多种安装方式:
1.通过github的短写安装
2.项目完整的github地址
3.bower提供了直接通过url安装的方式
但是此时的项目目录中,并没有bower
的两个配置文件:bower.json
和bowerrc
,可bower init
来生成
Grunt
Grunt的Task,Target和Options
- 前端自动化工具grunt
- Grunt前端自动化工具
- 前端自动化构建工具Grunt
- grunt-beginner 前端自动化工具
- Grunt-beginner前端自动化工具
- 前端自动化工具grunt介绍
- 【Grunt】前端自动化构建工具
- 前端自动化构建工具Grunt
- grunt 前端自动化构建工具
- javascript前端工具------自动化构建工具Grunt
- 一步一步学习安装Grunt前端自动化工具
- 前端自动化工具Grunt的使用
- Grunt自动化web前端开发环境工具
- 前端自动化工具grunt的使用
- 前端自动化Grunt教程
- Grunt教程-前端自动化
- Grunt教程-前端自动化
- 【WEB】Grunt入门——前端自动化工具
- TensorFlow学习之路:Tensorboard
- TensorFlow安装之windows
- 分治法-基于分之策略的归并排序和快速排序
- 做一个质疑者
- 【JavaScript设计模式】创建型设计模式--建造者模式
- Grunt前端自动化工具
- 网路图片展示案例
- Mydate97 onpicked 调用自己写的函数
- 学习oracle和mysql的见解
- 网路图片查看
- 新数字三角形问题 基础
- Mac下显示和隐藏 隐藏的文件
- 第十一天H5进阶
- 拼接平方数