Grunt前端自动化工具

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.1
bower validate      3.2.1 against https://github.com/jquery/jquery-dist.git#*
bower install       jquery#3.2.1

jquery#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