前端集成解决方案——Yeoman、Bower和Grunt

概念

前端集成解决方案是一套包含框架和工具，便于开发者快速构建美丽实用的WEB应用程序的工作流。

优点

  • 强制开发规范
  • 组件库维护和使用
  • 模块化前端项目
  • 服务器部署前压缩，检查流程简化和完善

基本介绍

NodeJS

以下三个组件必须基于nodejs环境才能运行，具体安装见官网：https://nodejs.org/en/

Yeoman

脚手架：自动将最佳实践和工具整合进来，相当于生成器，模具

安装：npm install -g yo-g代表全局安装
查看版本：yo -v

Bower

包管理器：跟踪管理公共部分、库等文件

安装：npm install -g bower
查看版本：bower -v

Grunt

构建工具：进行压缩代码等工作自动化操作

安装：npm install -g grunt-cli
查看版本：grunt -version

具体使用

安装yeoman相应的生成器

这里我们以安装angular为例，有两种安装方法

  1. 直接安装：
    npm install -g generator-angular
  2. 输入yo命令选择安装
    yo


    其他的生成器还有
    generator-webapp
    generator-bootstrap
    generator-karma
    …
    具体可见yeoman官网：http://yeoman.io/authoring/

    下载generator-angular安装包

    首先新建一个文件夹
    mkdir my-yo-project
    进入文件夹
    cd my-yo-project
    下载generator-angular安装包
    yo generator-angular

    运行

    启动node服务器运行angular
    sudo grunt server
    如果没有问题将会弹出以下界面

参考