前端开发工作流与构建工具

---

1. Bower

Web的包管理器

(1) 安装    npm install -g bower(2) 搜索包    bower search <packageName>    例如： bower search angular    将会列出通过 Bower 可以获取的AngularJs版本库和与angular有关的库，以及它们在Github上的仓库地址。(3) 查询包    bower <packageName> info    例如： bower angular info    将会列出通过 Bower 可以获取的所有Angular版本库。(3) 安装包    bower install <packageName>    例如： bower install angular    将会安装通过 Bower 可以获取的AngularJs最新的版本库    如果需要指定版本号：        bower install angular#1.5.9(4) 修改Bower安装包的位置    在项目下创建 .bowerrc 文件(如果已经存在就跳过这一步)，并指定其中'directory'属性的值，即安装包的路径。

2. Grunt

Grunt是一个任务运行器，它将帮助自动完成重复的工作，例如linting、编译、压缩、测试、文档和部署。

(1) 安装    npm install -g grunt-cli(2) Gruntfile 文件    基本结构如下：    // 封装器函数    module.exports = function(grunt) {        //项目和任务配置        grunt.initConfig({            pkg: grunt.file.readJSON('package.json')        });        // 自动加载所有插件任务，避免手动加载        require('load-grunt-tasks')(grunt);        // 默认任务 default        grunt.registerTask('default', []);    }(3) 常见的配置任务    1) Connect        grunt-contrib-connect    2) Less        grunt-contrib-less    3) JSHint        grunt-contrib-jshint    4) Watch        grunt-contrib-watch

3. Gulp

Gulp是另一个流行的工作流自动化工具，支持‘代码由于配置’的原则。

···
(1) 安装
npm install -g gulp

(2) Gulpfile 文件
基本结构如下：

// 加载gulpvar gulp = require('gulp');// 加载插件 避免手动加载var $ = require('gulp-load-plugins')();// 使用‘gulp’ 运行的默认任务gulp.task('default', [], function(){    // ...});

···

4. Yeoman

Yeoman 工作流由一个搭建工具(yo)、构建工具(grunt和gulp)，以及包管理器(bower和npm)组成。

5.浏览插件和任务

load-grunt-tasks

   负责加载本工作流所需的、由各种不同的插件公开的所有Grunt任务，   这些任务都被添加到了package.json文件的devDependencies对象中。

time-grunt

将在命令行中使用一种清晰的格式输出所有Grunt任务已使用的执行时间，在调试配置不假或者尝试优化构建系统时较为有用。

grunt-contrib-watch

该任务将在运行目标任务之前监视指定的文件是否发生过改动。

grunt-contrib-connect

启动一个超文本传输协议(HTTP)服务器

grunt-contrib-jshint

用于通过JShint linting工具运行JavaScript文件

grunt-contrib-clean

移除不需要的文件和目录，Yoman默认使用它来移除.tmp和/dist/目录

grunt-contrib-clean

移除不需要的文件和目录，Yoman默认使用它来移除.tmp和/dist/目录

grunt-autoprefixer

将使用 [Can T User](http://caniuse.com/) 数据库解析CSS并添加以供应商作为前缀的CSS属性。默认情况下，Yeoman讲吧任务级别options对象的browers属性设置为last 1 version

grunt-wiredep

将把项目的依赖连接到源代码中，方便打包，该任务允许我们在源代码中直接注入Bower包，Yeoman已经配置了该任务来查看主index.html文件，wiredep将解析注释，注释高速它注入依赖的位置。对于Javascript依赖，使用的是 <!-- bower:js --> 而CSS依赖则使用 <!-- bower:css --> 注入。

grunt-contrib-compass

将Sass文件编译成CSS，要求已经安装 Ruby、Sass 和 Compass 环境。Yeoman已经默认创建了compass任务。

grunt-filerev

用于支持通过文件内容哈希的方式继承静态文件修订，当新的版本生成时，优化后的应用文件将使用不同的哈希作为后缀，从而使缓存清除策略生效。默认情况下，Yeoman配置了这个任务，用于修订所有的脚本、样式、图片和字体。

grunt-contrib-imagemin

压缩 GIF、JPEG、PNG、SVG格式的图片。默认情况下，Yeoman配置了这个任务。

grunt-contrib-htmlmin

压缩 HTML 文件。默认情况下，Yeoman配置了这个任务。

grunt-ng-annotate

可以添加、删除和重建AngularJS依赖注入注解，是的AngularJS代码在经过压缩后也是安全的。例如：    angular.module('myapp').controller('MyCtrl', function($scope, $timeout){    })将在处理后变成：    angular.module('myapp').controller('MyCtrl', ["$scope", "$timeout", function($scope, $timeout){    }])

grunt-concurrent

主要被用于优化构建过程，并行的运行像 Coffee 和 Sass这样缓慢的任务，明显地缩短构建时间。