前端自动化构建

前端集成化解决方案：

写在前面的话：

     创建文件 -mkdir test

     删除文件：  rm -rf test    // 通过递归调用的方式直接删除这个文件

      安装使用 --save-dev 的主要是作用是将你的该安装的插件后者东西依赖到了当前的 npm 包中了

Grunt-Beginner  前端自动化工具
1： 前端集成解决方法：框架 工具 快速 美丽实用
2： 开发团队风格不统一 ，前期开发组件库维护，模块化前端项目 ，服务器部署前必须压缩，流程简化完善 
3： 目前前端主流的几种集成方案： Yeoman  bower  Grunt|Gulp[build tool]

目前已经集成化的：
  CodeKit  --仅仅支持mac
  FIS:  百度前端集成
  Spirit:  腾讯前端集成  

  Grunt（logo:是头野猪）: 是依赖node安装

     npm: 包管理工具 Node Package Manager 

     用途：build tool 自动化。类似压缩变异单元测试，代码校验这种重复且无业务关联的工作。

     安装grunt： npm install grunt -g -cli    // 全局环境下面安装grunt工具

     grunt其他简单配置博客： http://www.haorooms.com/post/qd_grunt_cssjs    

     [今天是2016-11-10 貌似很少有人在用这个了，其实都一样，工具只是完成任务的，吃什么饱才是目的 ]

向已经存在的package.json 文件中添加Grunt和grunt插件的最简单方式是是     过npm install <module> --save-dev命令。此命令不光安装了<module>，还会自动将其添加到devDependencies 配置段中。

 安装模块：  npm install  grunt-contrib-jshint  --save-dev   // 以grunt-contrib-jshint为例自动安装并且更新来package.json文件。

 前途： 生态环境很好。 

 package.json 是用来配置所需要的所有的插件的，在官网的首页有案例可以复制下来进行配置。

 gruntFile.js 是用来配置操作所需要的任务的语法： 

    

tips: 如果在npm后面没有跟任何的参数，npm在当前的根目录下的package.json 的文件，系统自动在这个配置文件中查找安装。

package.json： npm主要查看的 dependencies:这个对象，可以看到依赖的组件 可以使用npm init进行自动的安装配置的参数

   

 Yeoman: (logo:老头，寓意是公民)，自誉为现在前端开发的脚手架 

    用途：在web项目的理想阶段，使用yeoman来生成项目的文件和代码结构，yeoman自动将最佳实践和工具整合进来，大大加速和方便了我们的后续的开发。generator需要单独的进行安装，因为每个项目的generator是不一样的。

  问题： yeoman怎么保证我们需要最佳的工具呢？ --维护了一套生成器一样的生态，例如我们项目需要angualr。我们就是用angular web。

  安装： npm install -g yo

 官网： 在generation中，前面有标志符号的是官方出品的，其余是第三方开发的 

 generator 生成器 并不是跟对yoman安装的，而是我们各取所需，根据自己的需要来安装的，npm安装包是在自己生成器的名字前面加上generator-

    例如： 安装angualr的： npm install -g generator-angular 

                 创建项目在当前的文件下面： yo angular anguarProject [自己定义的项目名称]

  

   

                                               

   Bower( logo:一种鸟,在雄鸟求偶的时候会搭建一个很华丽的凉亭来吸引雌鸟~ 佷污哈 )

   用途：官房给出的是包管理器，web站点一般有很多的框架，库，公共部分等组成，bower则用来跟踪管理这些。

   安装：npm install -g -bower     

   验证： bower -v

   实际项目中的应用：

      eg: bower install bootstrap

             bower install jquery 

安装指定版本的jquery： bower install jquery#1.x --save

    安装完成以后会在自己的项目文件下面生成一个叫做bower_components 的目录文件，里面都是通过 bower 进行安装以后生成的文件。

     如果组件比较小众，没有在bower上面注册，怎么办？
      bower提供了多种安装方式：（可以在线上先搜索存不存在）

            1. 通过github的短语安装,现在github上面找到这个项目名称短语，例如后面的query

                 bower install jquery/jquery

            2. 通过github的地址来选择安装：

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

             3: 如果没有在GitHub上立项，则直接可以使用url地址，例如有些public jquery cdn等。

      bower的两个配置文件：bower.json [记录所有本地安装过的bower,方便其他人进行项目的直接安装，在较少了版本管理中文件的体积]，别人就直接bower install 就会自动下载这些bower文件。

             bower install  会自动根据配置文件进行选择安装   

             生成  bower init     就会生成bower.json文件，默认是没有的，需要手动的生成这个文件。

     一般情况下用不到.bowerrc,但是有时候拉去资源的时候需要设置代理，并且修改默认的网络延时时间的时候，就需要修改这个文件，其中划线部分是默认的一项。

，

 

    案例：

         添加一个angular而且添加到json文件里面：bower install angular --save-dev   

           在生产环境中也使用angualr： bower install angular --save 即可 

应用： 实际生产中的使用

   1:  yoman怎样grunt应用生成项目的： task  target  options

        modernizr  是用来检测用户浏览器是都支持某些html5和css3的新特性的一个js库

   案例：