前端工程化工具

一、Node

1. 通过 npm 安装相应的包，可一次性安装多个包
   npm install 参数（可选，--global、--save-dev） 包名（grunt、bower、yo等）
npm install 如果不加包名，则下载安装 package.json 文件中的依赖包

   --global 作用：告诉npm我们安装的包不是项目层面的，而是系统全局层面的。其实，这么做是为了直接在命令行中使用安装的包。
   --save-dev 作用：告诉npm把这个包添加到清单文件package.json中，并将其标记为开发依赖。最好把无需在生产服务器中使用的依赖标记为开发依赖，这是最佳实践。

2. 将项目初始化为node结构
   npm init

二、Grunt

1. 通过 npm 全局安装grunt-cli
   npm install --global grunt-cli
2. 查看 grunt 版本
   grunt --version（或-V）

3. grunt的常用方法
   配置Grunt前，要先创建Gruntfile.js文件。所有构件任务的配置和定义都保存在这个文件中。
   1.grunt.initConfig() 该方法的参数是一个对象，这个参数是所有任务和目标的配置。这个配置对象中的顶层属性代表了针对某个特定任务的配置。
   2.grunt.loadNpmTasks() 该方法告诉Grunt加载指定Grunt插件中的所有任务。
   3.grunt.registerTask() 该方法可以定义任务别名，其参数是一个任务名和一个数组，数组中的元素是要执行的任务。
   4.grunt.registerMultiTask() 该方法定义多个任务。

4. 相关插件 （grunt-contrib-XXX 形式的插件为grunt官方提供的）

   1. load-grunt-tasks 加载所有的grunt task
   2. time-grunt grunt任务执行的时间进度插件
   3. grunt-contrib-copy 拷贝文件
   4. grunt-contrib-clean 删除文件
   5. grunt-contrib-uglify 压缩文件
   6. grunt-contrib-concat 合并文件
   7. grunt-contrib-jshint jshint代码检查
   8. grunt-contrib-less less文件编译
   9. grunt-contrib-imagemin 图像压缩（有损压缩）
   10. grunt-contrib-watch 监视文件的修改，自动启动任务
   11. grunt-spritemith icons生成sprite图
   12. grunt-rev 对文件进行hash命名
   13. grunt-usemin 对文件的引用路径更新
   14. grunt-nodemon 监视整个node应用，自动重启服务
   15. grunt-concurrent 对watch和nodemon同时开启

// Gruntfile.js 示例

module.exports = function (grunt) {
    grunt.initConfig({
        jshint: {
            browser: ['public/js/**/*.js']
        },
        cssmin: {
            all: {
                files: { 'build/css/all.min.css': ['public/css/**/*.css'] }
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.registerTask('default', ['jshint']);
    grunt.registerTask('build', ['cssmin']);
};

三、yoman

1. 安装yoman

   npm install -g yo

2. yoman相关脚手架

   npm install -g 脚手架名

   Angular => generator-angular

3. 通过脚手架生成相关项目

   yo 项目名

四、bower

1. 安装bower

   npm install -g bower

2. bower 安装相关库

   bower install 包名
   // 包名有以下几种形式
   // bower中注册的框架名（jquery）
   // github上的短写形式（jquery/jquery）
   // github上的项目地址（https://github.com/jquery/jquery.git）
   // url安装路径（http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js）

3. bower初始化一个bower项目，生成bower.json文件

   bower init

4. d

五、gulp

六、grunt、gulp、npm三者之间的区别、优缺点

Grunt：这是本书使用的构建工具，由配置驱动。
npm：一种包管理器，也可以当作构建工具。
Gulp：介于Grunt和npm之间的构建工具，由代码驱动。

Grunt的优缺点概览
Grunt有以下优点：
❑ 有成千上万个插件，几乎任何操作都有相应的插件；
❑ 配置易于理解、易于调整；
❑ 只需知道JavaScript基础知识；
❑ 支持跨平台开发，甚至支持Windows；
❑ 适合大多数团队使用。
Grunt有以下缺点：
❑ 基于配置的构建定义方式在构建流程变复杂时显得不灵便；
❑ 如果很多任务中有多个目标，那就很难理解构建过程；
❑ Grunt比其他构建工具速度要慢。

Node的优缺点概览
Node有以下优点：
❑ 不受Grunt插件的限制，可以充分利用npm中成千上万的包。
❑ 除了用来管理依赖的工具npm与列出依赖和设置构建命令的清单文件package.json之外，不需要任何其他的CLI工具和文件。 npm能直接运行CLI工具和Bash命令，所以性能比Grunt好。
Node有以下缺点：
npm最大的缺点或许是， Bash在Windows环境中无法顺畅使用。

Gulp的优缺点概览
Gulp有以下优点：
❑ 插件的质量都很高；
❑ 代码驱动的Gulpfile.js文件比配置驱动的Gruntfile.js文件更易于理解；
❑ 速度比Grunt快，因为Gulp使用流式管道，不会每次都读写硬盘；
❑ 和Grunt一样，支持跨平台开发。
Gulp有以下缺点：
❑ 如果没有使用Node的经验，可能很难学；
❑ 很难开发高质量的插件，原因同上；
❑ 团队的所有成员（现有成员和未来加入的成员）都要认同流和异步代码；
❑ 任务依赖系统还有很多不尽如人意的地方。

Grunt和Gulp的主要区别在于， Gulp异步执行各个任务，而Grunt同步执行各个任务。如果想在Gulp中同步执行任务，要把其他任务声明为这个任务的依赖，然后再定义这个任务。执行这个任务时， Gulp会先执行依赖的任务。