Web前端自动化入门总结

周末失眠，周一无力写代码，只能听着一首：逆流成河，顺便把最近刚入门的前端自动化写一下入门总结。

因为从事的开发重点是java后端，后端这几年随着maven，gradle等构建工具的使用也把以前jar管理解放了，记得刚毕业那会公司的方案是公司自己维护一个libs文件夹，把需要的jar放进去，然后ant写脚本打包。这种方式的缺点要自己记住jar的版本等等，然后更新比较繁琐，还有把jar提交到svn等版本管理工具，大小很大，共享麻烦。

说到前端自动化，现在应该是比较普及了，到github上面搜索一下web组件基本都是用到几个常用的构建组件。不过身处二线城市，一直从事企业系统开发的我，平常的开发，还是按老套路，直接建文件夹像libs，asset等，然后把需要的第三方库，像Jquery，easyui，angular之类的下载复制进去，然后开始写代码。这种方式缺点：同样没有统一管理web库，文件压缩合并等也没有考虑，每次写代码调试一直F5刷新，还时不时缓存没刷掉，上传git文件大小也是非常大。

最近自己空闲想做一个表单设计器，定了框架angularJs，bootstrap3。然后想用上前端自动化构建工具。开始分批介绍这几个工具：nodejs，yeoman，bower，grunt，gulp。

1.NodeJS

NodeJS这个神器就不做介绍，入门nodejs，可以发现一个新的世界，这是最好的诠释。这几个自动化构建工具都是基于nodejs使用。

一、安装

百度一下nodejs，根据系统版本选择下载安装。新版的基本都会自带npm(node的包管理工具)

安装完成:node -v ，npm -v 查看版本

二、配置

配置npm的全局模块的存放路径以及cache的路径(可以不做选择默认地址)

1. npm config set prefix "C:\Program Files\nodejs\node_global" 
2. npm config set cache "C:\Program Files\nodejs\node_cache" 

配置环境变量

1. 系统变量下新建"NODE_PATH"，输入”C:\Program Files\nodejs\node_global\node_modules“ 
2. 用户变量"PATH"修改为“C:\Program Files\nodejs\node_global\” 

由于GWF原因可以选择修改镜像，或者安装cnpm，我建议选择翻墙软件，就不会在后续使用过程出现问题，这里贴一个我用的http://www.herogo.cc/Register/Index/2352499，注册送免费流量，暂时先用一下。

如果选择翻墙这里可以忽略

1. 配置淘宝镜像：npm config set registry "https://registry.npm.taobao.org" 
2. 查看配置：npm config list 
3.  
4. 安装cnpm：npm install -g cnpm –registry=https://registry.npm.taobao.org 

三、package.json

描述npm包的文件，类型maven的pom.xml,bower的bower.json等

1. 属性说明： 
2. dependencies：生产环境需要安装的包 
3. devDependencies：开发环境需要的包 
4.  
5. 版本号： 
6. ^:^0.4.1:发布了0.4.1会更新，1.X.X就不会更新 
7. ~：~0.4.1:发布了0.4.1会更新，0.5.0就不会更新  
8.  
9. npm install：默认使用当前路径下的package.json安装包 
10. npm install chajian：直接安装包到当前目录的node_modules 
11. -g:全局安装 
12. --save-dev:安装同时写入package.json 

2.Yeoman

Yeoman是Google的团队和外部贡献者团队合作开发的，他的目标是通过Grunt，Gulp，Bower的包装为开发者创建一个易用的工作流。

简单点说，在项目初始化的时候用了yeoman，自动帮你构建好基础的文件，还有所需要的bower，gulp，grunt等这些配置。

一、安装

1. 官网：http://yeoman.io 
2. 安装：npm install -g yo 
3. 查看版本：yo --version 

二、使用

以angularJS为例：

1. 安装generator-angular，其他项目可以上官网搜索 
2. npm install -g generator-angular 
3. cd 项目地址 
4. yo angular 项目名 
5. 根据提示选择需要的库 
6. yeoman在使用的时候会提示一些常用库让开发者选择是否需要使用方便使用 

3.Bower

前端库管理器，用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。现在有些开发者直接使用npm做前端库管理器，看需要先暂时使用bower，至于他和npm的利弊可以搜索文章比对一下。

一、安装

1. 官网：https://bower.io 
2. 安装：npm install -g bower 
3. 查看版本：bower -v 

二、文件

.bowerrc:设置bower下载的文件位置，代理，超时时长等

bower.json：需要依赖的web包管理文件，类似package.json

三、使用

1. 在官网搜索需要的web库，根据名称下载 
2. bower install jquery  --单独下载web包 
3. 没在bower注册： 
4.     可以通过github短语安装（用户名/项目名  bower install wengweh/plumdo-word） 
5.     可以通过github地址安装 bower install https://github.com/wengwh/plumdo-word.git 
6.     可以通过URL直接安装 bower install http://www.baidu.com 
7. bower install jquery  --save   --把依赖添加到bower.json 
8. bower install jquery  --save-dev  --把依赖添加到bower.json中的开发依赖 
9. bower install  --直接根据当前目录的bower.json下载 
10. bower init  --生成bower.json文件 

4.Grunt

通过配置一系列的task，定义task处理的事务(例如文件压缩合并、雪碧图、启动server、版本控制等)，然后定义执行顺序，来让grunt执行这些task，从而构建项目的整个前端开发流程。

一、安装

1. npm install -g grunt-cli 

二、指令

1. grunt taskname：运行指定task 
2. grunt taskname：target：运行指定task内部的target  
3. grunt：运行default的task 

三、task

grunt的功能就是执行一系列的task来实现，所以它的task是非常多的，如果有需要了解可以搜索一下，这里介绍几个常用的task

1.copy 顾名思义复制文件、文件夹

1. copy:{ 
2.     dist:{ 
3.           src:'<%= config.app %>/js/index.js',---原地址 
4.           dest:'<%= config.dist %>/js/index.js',--目标地址 
5.     }， 
6.     dist：{ 
7.          files:[  --使用数组 
8.                 { 
9.                          expand:true, 
10.                          cwd: '<%= config.app %>/', 
11.                          src:'*.html', 
12.                          dest:'<%= config.dist %>/', 
13.                          ext:'.min.html', --修改后缀名 
14.                          extDot:'first',--指定修改的后缀名开始位置 
15.                          flatten:false --不会复制到指定目录 
16.                          rename:function( dest,src){ 
17.                                 return dest+'js/'+src; 
18.                          } 
19.  
20.                 }， 
21.                 { 
22.                      src:'<%= config.app %>/js/index.js', 
23.                      dest:'<%= config.dist %>/js/index.js', 
24.                 } 
25.           ] 
26.     }， 
27.     dist_files_object:{ 
28.           files:{ --使用键值对 
29.                  '<%= config.dist %>/index.html':'<%= config.app %>/index.html', 
30.                  '<%= config.dist %>/js/index.js':['<%= config.app %>/js/index.js'] 
31.          } 
32.       } 
33. } 

2.wiredep

给对应文件写入需要引入的js，css文件。当使用bower管理web库的时候，肯定不希望还要一个个在页面中去引入对应的js，css文件，这个插件就是解决这个的问题。

3.autoprefixer

给css文件生成自动根据浏览器生成对应的css内容

4.watch

监听文件，有修改执行相应任务。在开发的过程可以实时做出变化，就无须在手动执行指令

1. watch: { 
2.       bower: { 
3.         files: ['bower.json'], 
4.         tasks: ['wiredep'] 
5.       }, 

5.uglify

js压缩，可以设置是否生成js的对应map

5.Gulp

Gulp和Grunt的功能定位是基本一致的，这两者经常被拿来做比较。现在好像gulp大有代替grunt的意思。不过对于我们使用者来说，他们的变更影响不算太大，基本task也是类似，所欲无需顾虑太多。

安装

1. 官网：gulpjs.com 
2. 安装：npm install -g gulp 
3. 查看版本：gulp -v 

最后结语，最近做的plumdo-form表单设计器使用了yeoman，bower，gulp来构建。基本问题不大，用起来也还算顺手。现在的前端变化非常大，从去年angular，vue，react这3大阵营互相争夺，加上现在构建工具也是一大堆(webpack没介绍)，可能有些人提出了是不是徒增问题，为什么不回归原始方案。其实各种技术的出现都有他的背景和使用情况。所以还是遵从根据实际情况出发，不一定用上什么技术就是好的，没有就是low的。只有根据项目的需要和背景选择适合自己的才是最好的。

作者：迷途的码农

来源：51CTO