huandie2012
commented
6 years ago 首先先对两个概念进行一个描述：
gulp是前端开发过程中对代码进行构建的工具，基于node.js的自动任务运行器，它能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。
通俗的说：浏览器只识别并解析html，js，css文件，但是有些时候我们相拥ES6，SCSS，LESS，还有一些新型的框架，这样就需要gulp这样的构建工具来进行处理，将其转换成ES5，CSS，JS，HTML。
webpack是前端资源模块化管理和打包工具，它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。它实现了模块化开发和静态文件处理两大问题。
使用webpack作为项目的大包压缩工具时：
以vue为例，使用构建命令vue -cli之后会自动生成相关文件，如图：
vue的标准模式下，构建命令也会自动生成对ES6做处理转换的文件---.babelrc文件，放在根目录中。（这种在前面加点的文件在linux系统中是不可见的）
base文件中的内容是dev和prod文件中公用的，在module中的rules里写入了一些转换规则。
在用gulp构建项目时需要在根目录新建两个文件--package.js和gulpfile.js；
package.json是基于nodejs项目必不可少的配置文件，它是存放在项目根目录的普通json文件，里面的信息内容包含了项目的相关信息（注意：json文件中不能写注释）；
{
"name": "test", //项目名称（必须）
"version": "1.0.0", //项目版本（必须）
"description": "This is for study gulp project !", //项目描述（必须）
"homepage": "", //项目主页
"repository": { //项目资源库，url是你要讲项目存放于git上的地址
"type": "git",
"url": "https://git.oschina.net/xxxx"
},
"author": { //项目作者信息
"name": "surging",
"email": "surging2@qq.com"
},
"license": "ISC", //项目许可协议
"devDependencies": { //项目依赖的插件
"gulp": "^3.8.11",
"gulp-less": "^3.0.0"
}
}gulpfile.js是gulp项目的配置文件，是位于项目根目录的普通js文件（其实将gulpfile.js放入其他文件夹下亦可）。
//导入工具包 require('node_modules里对应模块')
var gulp = require('gulp'), //本地安装gulp所用到的地方
less = require('gulp-less');
//定义一个testLess任务（自定义任务名称）
gulp.task('testLess', function () {
gulp.src('src/less/index.less') //该任务针对的文件
.pipe(less()) //该任务调用的模块
.pipe(gulp.dest('src/css')); //将会在src/css下生成index.css
});
gulp.task('default',['testLess', 'elseTask']); //定义默认任务 elseTask为其他任务，该示例没有定义elseTask任务
//gulp.task(name[, deps], fn) 定义任务 name：任务名称 deps：依赖任务名称 fn：回调函数
//gulp.src(globs[, options]) 执行任务处理的文件 globs：处理的文件路径(字符串或者字符串数组)
//gulp.dest(path[, options]) 处理完后文件生成路径总结一下命令行输入流程：
全局安装node.js（从官网下载安装包，安装路径随意），也可以使用node -v检测是否已经安装过；
安装npm（npm是安装node.js时一同安装的包管理器，用于node插件管理，包括安装、卸载、管理依赖等），为加快运行npm install的速度，可以安装cnpm，来替代npm，命令：npm install cnpm -g --registry=https://registry.npm.taobao.org（ 注意：安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开，安装完直接使用有可能会出现错误）；
全局安装gulp（目的为了通过它执行gulp任务），命令：cnpm install gulp -g（同样，安装完之后检查版本号）；
新建package.json文件（可以手动创建也可以用命令行创建），命令：cnpm init
查看package.json帮助文档，命令：cnpm help package.json；
本地安装gulp（即在项目根目录下安装gulp，目的为了调用gulp插件的功能），命令：cnpm install gulp --save-dev；
本地安装gulp插件，以gulp-less为例：cnpm install gulp-less --save-dev，该插件将会安装在node_modules的gulp-less目录下，该目录下有一个gulp-less的使用帮助文档README.md；
运行gulp任务，命令：gulp 任务名称，以编译less的任务testLess为例：gulp testLess，当执行gulp default或gulp将会调用default任务里的所有任务。
npm命令：
使用npm安装插件：npm install
从概念上来说webpack 是一个JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 webpack主要有四个核心概念：入口(entry)、输出(output)、loader、插件（plugin） 入口起点指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的，每个依赖项随即被处理，最后输出到称之为 bundles 的文件中。
在项目中一般我们会把main.js作为入口起点。
output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段，来配置这些处理过程，我们通过 output.filename 和 output.path 属性，来告诉 webpack bundle 的名称，以及我们想要 bundle 生成到哪里。 path 模块是一个 Node.js 核心模块，用于操作文件路径。
loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。
本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。
注意，loader 能够 import 导入任何类型的模块（例如 .css 文件），这是 webpack 特有的功能，其他打包程序或任务执行器的可能并不支持。我们认为这种语言扩展是有很必要的，因为这可以使开发人员创建出更准确的依赖关系图。
在更高层面，在 webpack 的配置中 loader 有两个目标：
test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
use 属性，表示进行转换时，应该使用哪个 loader。
loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。
想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。
