前端集成解决方案——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
    如果没有问题将会弹出以下界面

参考