为什么要讲下这三大工具，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这种文件是不能打包的*********
官网下载地址：https://www.jetbrains.com/webstorm/ 然后点击 Download
安装过程：博客指导==》 http://blog.csdn.net/u011781521/article/details/53558979
官网下载地址：http://nodejs.cn/download/windows 就去下载后缀名是 .msi
安装过程：它的和java jdk 安装类似 https://www.cnblogs.com/lsgxeva/p/7754365.html 这篇博客第四步骤就已经安装成功了，第五步是安装cnpm 因为nodejs 安装成功自带npm，因为nodejs是外国人开发，所以服务器在外国，所以npm这个服务器下载的速度可能会慢一些，所以需要下载一个在国内的服务器，也就是镜像cnpm，在速度上更快，不过不下载也没事，绝大多数体现不出来
nodejs 安装成功自带npm，npm的意思是node package manager node包管理工具，怎么介绍呢？直接上图，在java的工程中，lib下面的所有包 *.jar 一部分jdk自带，一部分maven工具导入
在java中我们除了jdk自带的，剩下的就是通过maven导入，同理在前端工程中，我们想要用到一些工具包或者框架包或者插件包，就需要用到npm来导入，npm就相当于maven的功能
（看一下就行，不用直接操作，一会将构建工具再试就可以，有个对命令的预热就好）
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
WebStorm：file ->project --html5 创建
项目创建完成之后如图，是一个空的项目：
接下来我们创建三个文档，分别来讲解Grunt、Gulp、Webpack相当于java中的多个模块工程一样
三个空的文档已经创建完成，进入工具详解下一步。
简介： 基于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 命令下载依赖的包
npm install -g grunt-cli
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
然后进入该插件的详情页，我们进入他的详情页面主要是因为它给了我们许多提示,如图：
1、npm install grunt-contrib-concat --save-dev
2、在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配置的列子，我直接写命令了，直接看。
1、安装：npm install grunt-contrib-uglify --save-dev
2、配置属性：
uglify: {
my_target: {
files: {
'mjt/mjt.min.js': ['mjt/js/mjt.js']
}
}
}3、加载任务：
grunt.loadNpmTasks('grunt-contrib-uglify');4、注册：
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结果：
https://my.oschina.net/mdxlcj/blog/1802438
1、gulp篇
中文主页: http://www.gulpjs.com.cn/
上面那一篇博客我们已经讲述了如何创建工程以及安装所有的环境和准备，如果没有看到的话，链接在下面
https://my.oschina.net/mdxlcj/blog/1626534
接下来我们的gulp工具，同样也是压缩、合并对他做测试
* 创建一个简单的应用，目录结构
```
|- dist
|- src
|- js
|- css
|- less
|- index.html
|- gulpfile.js-----gulp配置文件
|- package.json
{
"name": "gulp_test",
"version": "1.0.0"
}
如图所示
然后我们编写两个js文件mdx1.js 和mdx2.js
然后右键创建gulpfile.js 这是gulp工具的特别区分标识
然后在Terminal操作脚本行命令
全局安装gulp ： npm install gulp -g
局部安装gulp： npm install gulp --save-dev
配置编码: gulpfile.js
//引入gulp模块
var gulp = require('gulp');
//定义默认任务
gulp.task('任务名', function() {
// 将你的任务的任务代码放在这
});
gulp.task('default', ['任务'])//异步执行
* 使用gulp插件
* 相关插件:
* gulp-concat : 合并文件(js/css)
* gulp-uglify : 压缩js文件
* gulp-rename : 文件重命名
* gulp-less : 编译less
* gulp-clean-css : 压缩css
* gulp-livereload : 实时自动编译刷新
* 重要API
* gulp.src(filePath/pathArr) :
* 指向指定路径的所有文件, 返回文件流对象
* 用于读取文件
* gulp.dest(dirPath/pathArr)
* 指向指定的所有文件夹
* 用于向文件夹中输出文件
* gulp.task(name, [deps], fn)
* 定义一个任务
* gulp.watch()
* 监视文件的变化
刚刚我们创建的两个文件夹，mdx1.js 和mdx2.js
( function () { function add(num1, num2) { return num1 + num2; } console.log(add(10, 20)); } )();两个js差不多
* 下载插件:
npm install gulp-concat gulp-uglify gulp-rename --save-dev
* 配置编码
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
gulp.task('minifyjs', function() {
return gulp.src('src/js/*.js') //操作的源文件
.pipe(concat('built.js')) //合并到临时文件
.pipe(gulp.dest('dist/js')) //生成到目标文件夹
.pipe(rename({suffix: '.min'})) //重命名
.pipe(uglify()) //压缩
.pipe(gulp.dest('dist/js'));
});
gulp.task('default', ['minifyjs']);
大概就这样，可能这一篇讲的很垃圾，看上一篇，你看懂上一篇这一篇应该就差不多
2、Webpack
###1、了解Webpack相关
* 什么是webpack
* Webpack是一个模块打包器(bundler)。
* 在Webpack看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理
* 它将根据模块的依赖关系进行静态分析，生成对应的静态资源
* 理解Loader
* Webpack 本身只能加载JS/JSON模块，如果要加载其他类型的文件(模块)，就需要使用对应的loader 进行转换/加载
* Loader 本身也是运行在 node.js 环境中的 JavaScript 模块
* 它本身是一个函数，接受源文件作为参数，返回转换的结果
* loader 一般以 xxx-loader 的方式命名，xxx 代表了这个 loader 要做的转换功能，比如 json-loader。
* 配置文件(默认)
* webpack.config.js : 是一个node模块，返回一个 json 格式的配置信息对象
* 插件
* 插件件可以完成一些loader不能完成的功能。
* 插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。
* CleanWebpackPlugin: 自动清除指定文件夹资源
* HtmlWebpackPlugin: 自动生成HTML文件并
* UglifyJSPlugin: 压缩js文件
###2、学习文档 :
* webpack官网: http://webpack.github.io/
* webpack2文档(英文): https://webpack.js.org/
* webpack2文档(中文): https://doc.webpack-china.org/
###3、开启项目
* 初始化项目：
* 生成package.json文件
*
```
{
"name": "webpack_test",
"version": "1.0.0"
}
```
* 安装webpack
- npm install webpack -g //全局安装
- npm install webpack --save-dev //局部安装
###4、编译打包应用
* 创建入口src/js/ : entry.js
- document.write("entry.js is work");
* 创建主页面: dist/index.html
-
* 编译js
- webpack src/js/entry.js dist/bundle.js
* 查看页面效果
###5、添加js/json文件
* 创建第二个js: src/js/math.js
```
export function square(x) {
return x * x;
}
export function cube(x) {
return x * x * x;
}
```
* 创建json文件: src/json/data.json
```
{
"name": "Tom",
"age": 12
}
```
* 更新入口js : entry.js
```
import {cube} from './math'
import data from '../json/data.json'
//注意data会自动被转换为原生的js对象或者数组
document.write("entry.js is work
");
document.write(cube(2) + '
');
document.write(JSON.stringify(data) + '
')
```
* 编译js:
```
webpack src/js/entry.js dist/bundle.js
```
* 查看页面效果
###6、使用webpack配置文件
* 创建webpack.config.js
```
const path = require('path'); //path内置的模块，用来设置路径。
module.exports = {
entry: './src/js/entry.js', // 入口文件
output: { // 输出配置
filename: 'bundle.js', // 输出文件名
path: path.resolve(__dirname, 'dist') //输出文件路径配置
}
};
```
* 配置npm命令: package.json
```
"scripts": {
"build": "webpack"
},
```
* 打包应用
```
npm run build
```
###7、打包css和图片文件
* 安装样式的loader
```
npm install css-loader style-loader --save-dev
npm install file-loader url-loader --save-dev
补充：url-loader是对象file-loader的上层封装，使用时需配合file-loader使用。
```
* 配置loader
```
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
]
}
```
* 向应用中添加2张图片:
* 小图: img/logo.png
* 大图: img/big.jpg
* 创建样式文件: src/css/test.css
```
body {
background: url('../img/logo.jpg')
}
```
* 更新入口js : entry.js
- import '../css/test.css'
* 添加css样式
#box1{
width: 300px;
height: 300px;
background-image: url("../image/logo.jpg");
}
#box2{
width: 300px;
height: 300px;
background-image: url("../image/big.jpg");
}
* index.html添加元素
* 执行打包命令：
```
npm run build
```
* 发现问题：
* 大图无法打包到entry.js文件中，index.html不在生成资源目录下。
* 页面加载图片会在所在目录位置查找，导致页面加载图片时候大图路径无法找到
* 解决办法：
* 使用publicPath : 'dist/js/' //设置为index.html提供资源的路径,设置完后找所有的资源都会去当前目录下找。
* 将index.html放在dist/js/也可以解决。
###8、自动编译打包
* 利用webpack开发服务器工具: webpack-dev-server
* 下载
- npm install --save-dev webpack-dev-server
* webpack配置
devServer: {
contentBase: './dist'
},
* package配置
- "start": "webpack-dev-server --open"
* 编译打包应用并运行
- npm start
###9、使用webpack插件
* 常用的插件
* 使用html-webpack-plugin根据模板html生成引入script的页面
* 使用clean-webpack-plugin清除dist文件夹
* 使用uglifyjs-webpack-plugin压缩打包的js文件
* 下载
```
npm install --save-dev html-webpack-plugin clean-webpack-plugin
```
* webpack配置
const HtmlWebpackPlugin = require('html-webpack-plugin'); //自动生成html文件的插件
const CleanWebpackPlugin = require('clean-webpack-plugin'); //清除之前打包的文件
plugins: [
new HtmlWebpackPlugin({template: './index.html'}),
new CleanWebpackPlugin(['dist']),
]
* 创建页面: index.html
* 打包运行项目
```
npm run build
npm start