一天掌握前端三大构建化工具Grunt、Gulp、Webpack（上）

一、概念理解【预计5分钟】：

        为何要讲下这三大工具，Grunt/Gulp/Webpack的做用又是什么？有什么好处吗？

        答：首先说下咱们都了解jquery,可是咱们下载的时候一般在官网会看到两种文件，如图：

    

这个时候有两个文件，jquery-3.0.0.js 和 jquery-3.0.0.min.js 其实这两个文件是如出一辙，里面的功能和方法，主要区别是一个是258kb，另一个是85kb，为何功能同样可是一个是258kb，另一个是85kb呢，请看下面两张图：

    这一张是jquery-3.0.0.js 内部结构图

    下面一张是jquery-3.0.0.min.js

最后看到区别了吗，min表明的是占用最小的空间，为项目提升性能上，因此咱们通常的话项目上线会用到jquery-3.0.0.min.js这样的文件，可是通常开发中咱们也会用到jquery-3.0.0.js 结构清晰的文件，主要是由于咱们可以方便学习看jquery的代码，有助于咱们开发项目，若是jquery已经很熟练了，你就能够在开发项目的时候直接用到打了包的jquery-3.0.0.min.js，由于在响应速度上会提升。

        同理，前端攻城狮在本身写css、js、less等相关文件的时候，项目上线若是测试没有bug，客户比较满意，咱们都会直接把前端攻城狮写的css、js等相关文件打包，这样在速度性能上就会相应的提升很多，而咱们怎么实现这样的功能，就涉及到了今天讲到的三个构建化工具，Grunt、Gulp、Webpack,功能相似，如今最火的是Gulp和Webpack。

    ******固然还要讲一下，html这种文件是不能打包的*********

二、环境准备【大约45分钟】：

2.一、个人出发点是针对java后端开发程序员，因此有些思路都是从java角度来说

2.二、前端开发工具的准备： WebStorm  【预计最长15分钟】

官网下载地址：https://www.jetbrains.com/webstorm/ 而后点击 Download 

安装过程：博客指导==》 http://blog.csdn.net/u011781521/article/details/53558979

2.三、NodeJs 环境 （它自带npm，而咱们须要用到npm，下载最新版本 8以上就能够，若是不是这个版本请更新，由于接下来将的构建化工具也是最新版本的，因此须要nodejs最新版本的支持）【预计最长30分钟】

官网下载地址：http://nodejs.cn/download/windows 就去下载后缀名是 .msi

安装过程：它的和java jdk 安装相似  https://www.cnblogs.com/lsgxeva/p/7754365.html 这篇博客第四步骤就已经安装成功了，第五步是安装cnpm 由于nodejs 安装成功自带npm，由于nodejs是外国人开发，因此服务器在外国，因此npm这个服务器下载的速度可能会慢一些，因此须要下载一个在国内的服务器，也就是镜像cnpm，在速度上更快，不过不下载也没事，绝大多数体现不出来

三、了解工做：npm  【预计15分钟 懂意思就直接进入构建化工具讲解】

3.1 、npm是干什么的？

       nodejs 安装成功自带npm，npm的意思是node package manager node包管理工具，怎么介绍呢？直接上图，在java的工程中，lib下面的全部包 *.jar 一部分jdk自带，一部分maven工具导入

在java中咱们除了jdk自带的，剩下的就是经过maven导入，同理在前端工程中，咱们想要用到一些工具包或者框架包或者插件包，就须要用到npm来导入，npm就至关于maven的功能

3.二、npm的相关命令

（看一下就行，不用直接操做，一会将构建工具再试就能够，有个对命令的预热就好）

npm version  

npm -v  查看版本

npm search 包名

npm install 包名   【在当前目录安装包】

npm init                【初始化，建立package.json文件，至关于maven工具的pom文件】

npm remove 包名   【删除包】

npm install 包名 --save  安装包并添加到package的依赖中  【这行命令用的比较多】

npm install          【下载当前项目全部依赖的包   通常github下载别人的项目，须要导入包，就是这个命令，那些依赖的包在package.json文件中提现】

刚建立项目的package.json:如图

他其实就至关于maven工具的pom文件，添加依赖以后如图，这是我从网上的截图：

但愿你们对 package.json  以及将要用到的npm有一个认识，

若是你想要知道package.json全部标签的含义，看这个网址，不过我认为看懂dependecies里面依赖的包就能够了：

http://javascript.ruanyifeng.com/nodejs/packagejson.html 

四、建立工程【预计5分钟】

    WebStorm：file ->project --html5 建立

项目建立完成以后如图，是一个空的项目：

接下来咱们建立三个文档，分别来说解Grunt、Gulp、Webpack至关于java中的多个模块工程同样

三个空的文档已经建立完成，进入工具详解下一步。

五、Grunt详解

   简介： 基于nodeJs的命令行工具 npm 可对js，css等进行合并和压缩，同时对js文件有检查报错的功能

   首先建立一个简单的应用，在建立的过程当中让你们明白Grunt

    

    在grunt_mjt文档下建立

    |- mjt----------构建生成的文件所在的文件夹
  |- src------------源码文件夹   
      |- js---------------js源文件夹
      |- css--------------css源文件夹
  |- index.html-----页面文件

 而后根目录建立package.json ,文件夹grunt_mjt右键选择建立package.json如图：

看下位置：

在建立Gruntfile.js   只能是这个名字，首字母要大写

最后项目结构图：

 |- mjt----------构建生成的文件所在的文件夹
  |- src------------源码文件夹   
      |- js---------------js源文件夹
      |- css--------------css源文件夹
  |- index.html-----页面文件
  |- Gruntfile.js---grunt配置文件(注意首字母大写)
  |- package.json---项目包配置文件

这些文件也基本都是空的，接下来安装Grunt ，这个时候就用到了 npm 的命令行，在哪里使用这些命令行呢？

看WebStorm工具如图，左下角：

出现这个项目的路径

进入grunt_mjt这个文件夹下

接下来使用npm 命令下载依赖的包

1.首先全局安装

npm install -g grunt-cli 

2.安装grunt

npm install grunt --save-dev  （这个--save会常常用到，频率是最高的一个）下载时间长一些，这个就是我刚刚讲的多是npm在国外的缘由，cnpm可能会快一点。

而后在Gruntfile.js文件中添加内容：

module.exports = function(grunt){
    // 1. 初始化插件配置
    grunt.initConfig({
        //主要编码处
    });
    // 2. 加载插件任务
    // grunt.loadNpmTasks('grunt-contrib-concat');
    // 3. 注册构建任务
    grunt.registerTask('default', []);
};

必须添加，否则配置文件缺乏，grunt不能启动，看是否成功，命令grunt，出现Done表示安装成功

可是这个时候没有安装任何插件，这一点能够再Gruntfile.js中体现，咱们只是单纯的安装了一个工具

接下来咱们安装插件 插件的做用的都有必定的功能，就是java中的类包同样，在java中有的是提供时间的，有的是链接数据库的，一样，Grunt构建化工具的插件也有相似的功能，有的插件是压缩js的，有的是合并js等文件的，接下来介绍几个，并交你们如何使用

 grunt-contrib-clean——清除文件(打包处理生成的)
 grunt-contrib-concat——合并多个文件的代码到一个文件中
 grunt-contrib-uglify——压缩js文件
 grunt-contrib-jshint——javascript语法错误检查；
 grunt-contrib-cssmin——压缩/合并css文件
 grunt-contrib-htmlmin——压缩html文件
 grunt-contrib-imagemin——压缩图片文件(无损)
 grunt-contrib-copy——复制文件、文件夹
 grunt-contrib-requirejs**——合并压缩requirejs管理的全部js模块文件
 grunt-contrib-watch——实时监控文件变化、调用相应的任务从新执行

接下来怎么使用这些插件，安装过程都是同样的，我举例两三个给你们看一看

进入Grunt官网 http://www.gruntjs.net/plugins

点击插件列表

这都是全部的插件，而后点击插件列表中的任何一个，接下来咱们讲

grunt-contrib-concat——合并多个文件的代码到一个文件中

这个插件，而后搜索这个插件，进入这个插件的详情页面，grunt是一个官网名字的前缀，因此咱们通常在搜索插件的时候只搜索后面的关键字就能够了，好比：contrib-concat

而后进入该插件的详情页，咱们进入他的详情页面主要是由于它给了咱们许多提示,如图：

这个Getting Started下面的两行代码分别对应的是安装和在配置文件的任务，一样是安装这个插件

一、npm install grunt-contrib-concat --save-dev

二、在js文件夹下面建立两个js文件，如图：

每一个js文件写了对应的就函数，同时咱们在项目上线过程当中，若是想提升性能的话，固然是要合并咱们本身写的js文件而后将它最大程度的压缩。

因此这就用到了咱们刚刚那个详情页面的那些命令行，第一步已经安装好了，接下来继续看grunt-contrib-concat插件详情页的另一个标题，如图Usage Examples：

它已经默认的给咱们举了列子，该如何在Gruntfile.js文件中配置这个插件，接下来讲一下他们的含义，这是我配置文件中的代码，同时给出项目目录结构，你们就可以很清楚的了解：

concat: {
    options: { //可选项配置
        separator: ';'   //使用;链接合并
    },
    build: { //此名称任意
        src:  ["src/js/*.js"],  //合并哪些js文件
        dest: "mjt/js/mjt.js" //输出的js文件
    }
}

3.配置插件在配置文件的属性后，再继续配置任务对他进行加载，这个任务是什么，就是在咱们执行命令的时候须要一个指示，打个比方吧：咱们上面的合并，刚刚配置的属性文件是这样子的，

那么咱们通常把前面的concat当作这个插件的任务名，而后把对这个任务名就行加载，怎么作，刚刚咱们说了那个插件的详情页的代码，如图：

这行代码就是加载任务，咱们把括号里面的换成 concat就行了，最后对他注册，整个配置文件配置图：

这个就是在咱们合并js文件的插件的整个操做，而后在中断执行grunt操做

就能够对两个文件进行合并了。

接下来说压缩，怎么压缩呢，一样的流程，去查找压缩的插件在官网，而后进入详情页，一样找到他的加载命令，加载任务命令，在Gruntfile.js配置的列子，我直接写命令了，直接看。

一、安装：npm install grunt-contrib-uglify --save-dev

二、配置属性：

uglify: {
    my_target: {
        files: {
            'mjt/mjt.min.js': ['mjt/js/mjt.js']
        }
    }
}

三、加载任务：

grunt.loadNpmTasks('grunt-contrib-uglify');

四、注册：

grunt.registerTask('default', ['concat','uglify']);

最终如图：

module.exports = function(grunt){
    // 1. 初始化插件配置
    grunt.initConfig({
        //主要编码处
        concat: {
            options: { //可选项配置
                separator: ';'   //使用;链接合并
            },
            build: { //此名称任意
                src:  ["src/js/*.js"],  //合并哪些js文件
                dest: "mjt/js/mjt.js" //输出的js文件
            }
        },
        uglify: {
            my_target: {
                files: {
                    'mjt/mjt.min.js': ['mjt/js/mjt.js']
                }
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-uglify');
    // 2. 加载插件任务
    grunt.loadNpmTasks('grunt-contrib-concat');

    // 3. 注册构建任务
    grunt.registerTask('default', ['concat','uglify']);
};

这是合并插件和解压缩插件放到一块儿了

最后在中断执行默认命令 grunt结果：

六、Gulp详解 （看下篇）

七、Webpack详解（看下篇）