本文章适合对HTML、CSS、JS有一定基础，并且对Nodejs有一定的了解的同学。

学习目标和内容

什么事前端集成解决方案

每一个前端团队都想打造自己的前端开发体系，来帮助团队更高效的工作，目前通常都是东拼西凑，逐渐的整合的过程。

前端集成解决方案个人理解是：

将前端研发领域中各种分散的技术元素集中在一起，并对常见的前端开发问题、不足、缺陷和需求，所提出的一种解决问题的方案。

不同角色理解解对比：
开发者：解决前端工程的根本问题；
专家学者：一套包含框架和工具，便于开发者快速构建美丽实用的Web应用程序的工作流，同时这套工作流必须是稳健强壮的。(其中美丽和实用有时候不能同时并存)

解决哪些前端问题？

• 开发团队代码风格不统一，如何强制开发规范；
• 前期开发的组件库如何维护和使用；
• 如何模块化前端项目；
• 服务器部粉前必须的压缩，检查流程如简化，流程如何完善。

主流的方式有哪几种

推荐几款前端解决方案供大家参考：

• 适用MAC的可视化工具： Codekit
• 百度的FIS3
• 腾讯的Spirit

Grunt的定位

Yeoman,Bower,Grunt其中是怎么样一个定位呢？我们把它定位为—Build Tool

目前Grunt的竞争者

Glup是Grunt强有力的竞争对手，还有Buildy、jasy、Gmake等

准备工作

nodejs简介

安装

• Nodejs官网
• MAC上：HomeBrew，这里推荐一个小工具Cakebrew,可以免去我们级命令行的烦恼。
• Linux：apt-get[ubuntu]、yum 等

nodejs命令行工具：mac和Linux本身就自带强大的控制台，但window虽然有cmd窗口但是它不支持bash脚本，怎么解决这个问题呢？我推荐安装git,git里包含一个git bash shell在一定程度上弥补了这个缺陷。

• NPM-Node Package Manager（Node包管理和分发工具）
  

• Nodejs包括基本模块、框架和库，但是这些很多框架和库管理起来很麻烦，所以才有了NPM,npm能很快的找到特定服务要使用的包，然后进行下载/安装/管理。

命令的使用

#npm常用命令
npm -v          #显示版本，检查npm 是否正确安装。
npm install express   #安装express模块
npm install -g express  #全局安装express模块
npm list         #列出已安装模块
npm show express     #显示模块详情
npm update        #升级当前目录下的项目的所有模块
npm update express    #升级当前目录下的项目的指定模块
npm update -g express  #升级全局安装的express模块
npm uninstall express  #删除指定的模

node项目的基本结构

Yeoman, Bower, Grunt简介及安装

• Yeoman：The web’s scaffolding tool for modern webapps(现代webapp的脚手架工具)

Yeoman的作用：

• 在Web项目立项阶段，使用yeoman来生成项目的文件，代码结构。
• Yeoman自动将最佳实践和工具整合进来，大大加速和方便了后续的开发。

根据项目自行选择Yeoman中的不同生成器，不管怎么变，Yeoman还是统一了现阶段公认的 代码校验、测试、压缩等最基本功能的流程,其余部分就交给 生成器自由发挥

npm install -g yo #全局安装yeoman

• Bower：A package manager for the web(Web的包管理器)

  Web站点组成:框架，库，公共部分等，Bower则用来跟踪管理这些

• Brunt:The JavaScript Task Runner(JavaScript 世界的构建工具)

  为何要用构建工具？
  一句话：自动化。对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等，自动化工具可以减轻你的劳动，简化你的工作。当你在 Gruntfile 文件正确配置好了任务，任务运行器就会自动帮你或你的小组完成大部分无聊的工作。

Yeoman实践

npm install -g generator-angular #全局安装 angular
npm install -g generator-mobile #全局安装 mobile
npm install -g generator-webapp #全局安装 webapp

接下来新建angular项目为例

mkdir yo-action #新建目录
cd yo-action 
mkdir angular-action #新建项目目录
cd angular-aciton
yo angular helloAngular #创建angular项目 helloAngular项目名称
   #选用grunt
   #sass是否包含自行选择（sass基于ruby，要求有ruby环境）和 bootStrap框架等
dir #安装完成之后 查看目录
ls -al# ls列出当前目录下的bash命令 -al表示列出隐藏文件以及一点开头的文件

ruby安装、解决sass未翻墙不能安装等问题。
接下来看看项目下的pageage.json文件

 {
 "name": "helloangular", #项目名
 "version": "0.0.0",#版本号，递增
 "dependencies": {} #项目在生产环境中需要的依赖
 "devDependencies": {
    "grunt": "^0.4.5", # ^表示对版本比较宽松的限制，只限制主版本号，如果有新版本自动更新，直到1.x.x之前的版本都可以
    "grunt-newer": "~1.1.0", # ~只更新1.1.0到1.1.9 
   },
 "scripts": {
    "test": "grunt test"，
    “install”:""  # 执行npm install 会根据package.json文件中的组件来安装
   }
 }

rm -rf node_modules #rm 删除目录命令 -rf递归删除且不需二次确认

• 目录说明

  pakeage.json :这是NodeJS模块的“信息图”
  bower.json :指定我们可以通过bower去拉哪些相应的前端框架和组件
  .yo-rc.json
  .travis.yml :专为开源打造的持续集成环境
  .jshintrc :jshin配置文件
  .gitignore ：指定当前项目要忽略不上传到git的文件
  .gitattributes :git配置项
  .editorconfig :第三方工具
  .bowerrc :bower本身的配置项
  test目录下的文件 ：项目自动化测试
  bower_components ：线上拉下来的前端框架

Bower实践

1. 接下来就bower是如何对web框架和组件进行管理的，利用jQuery和bootstrap为例。

   mkdir bower-action #创建bower测试目录
   cd bower-action
   mkdir jquery-bootstrap-aciton #项目目录
   cd jquery-bootstrap-action
   bower install jquery
   bower intall bootstrap
   ls -al #安装完成后，查看目录下多了一个bower_components目录
   cd bower_components #目录下就有了jquery和bootstrap
   

2. 如果组件比较小，没有在bower上注册，怎么办？

   bower提供多种安装方式:

• 通过github的短语安装

bower install jquery/jquery

• 用过完整的github地址安装

bower install https://github.com/jquery/jquery.git

1. 框架和组件，github上没有怎么办？

   bower提供了直接通过url地址安装
   以上bower生成的文件中并没有包含bower.json和.bowerrc两个配置文件：需要初始化生成

bower init #初始化后根据提示设置

手动生成一个.bowerrc,说说其配置

{
  "directory": "bower_components",
  "proxy":"http://proxy.kyj.com:8080", #为了网络安全，设置一层代理
  "https-proxy":"https://proxy.kyj.com:8080",
  "timeout":60000 #超时 毫秒
}

项目中如果单独使用bower，在项目中引用这些框架和组件非常麻烦，所以一定要配合grunt一起使用，提供开发效率。

Grunt实践

---

mkdir grunt-action
cd grunt-action
mkdir grunt-yo
cd grunt-yo
yo webapp  grunt-yo #注意需要安装：npm install -g yeoman/generator-webpp
#项目出现3个选项
(*)Sass #对css3的扩展，增加了规则、变量、混入、选择器、继承等等特性
(*)BootStrap
(*)Modernizr #用来检测用户浏览器是否支持某些HTML5和CSS3新特性的一个js库

接下来讲解一Gruntfile.js —

'use strict';#遵循ECMAScript（ES5）严格模式，体现js更合理、更安全、更严谨的发展方向
module.exports = function (grunt) {
#所有的gruntpage和逻辑代码都要放入该函数

// 自动加载package.json里声明的 grunt tasks 
// [jit-grunt](https://github.com/shootaroo/jit-grunt)自动加载所需任务 也可以使用load-grunt-tasks插件来加载
  require('jit-grunt')(grunt, {
    useminPrepare: 'grunt-usemin'
  });
 // Configurable paths
 var config = {
    app: 'app',
    dist: 'dist'
 };
 #grunt重要的概念:task（任务）,initConfig里配置的是一个一个的单元task
 grunt.initConfig({
    config: config,
    watch: {
      bower: {  #任务watch的第一个目标
        files: ['bower.json'], #属性是可选的
        tasks: ['wiredep']
      }，
      babel: {  #任务watch的第二个目标
        files: ['<%= config.app %>/scripts/{,*/}*.js'],
        tasks: ['babel:dist']
      }
    }
  }
}

本人在window环境测试，需要注意几个问题：

1.检查是否安装好ruby并安装好sass，sass在3.3.0之后版本提供了sourcemap功能
2.检查phantomjs是否全局安装成功，yo生成webapp会报相关错误。
3.全局安装generator-mocha
4.运行grunt如果有Plugin没有安装报错，安装一下，比如grunt-mocha,grunt-contrib-sass等

Grunt的Task,Target和Options

从无到有构建Grunt项目

初识Grunt Files处理方式

剖析Grunt Tasks - grunt serve

剖析Grunt Tasks - grunt test

剖析Grunt Tasks - grunt build

Grunt - plugins

剖析Grunt - plugins（一）

扩展知识介绍

gulp-in-action（一）

npm-in-action

总结