一直在使用，也没时间说，今天来介绍下gulp 和webpack的安装使用还有就是区别
首先先明白gulp和webpack是完全不同的两个东西
- gulp ：一个基于流的自动化构建工具。
- webpack ：WebPack可以看做是模块打包机。
gulp做的事：
gulp做的事:文件合并,文件压缩,语法检查,监听文件变化
webpack做的事：
webpack做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。
gulp的安装：
安装gulp之前得安装node.js，因为这里需要使用到node.js的npm包管理工具，在这里node.js 的安装就不提了，不懂的可以自己百度，下来安装gulp其实是挺简单的，分为以下几个步奏：
-
** 全局安装 gulp**：
``` npm install --global gulp``` -
作为项目的开发依赖（devDependencies）安装：
```npm install --save-dev gulp``` -
在项目根目录下创建一个名为 gulpfile.js 的文件：
``` var gulp = require('gulp'); gulp.task('default', function() { // 将你的默认的任务代码放在这 });``` -
** 运行 gulp**：
gulp
webpack的安装：
安装webpack也是使用npm命令的，和gulp是一样的
-
** 全局安装 webpack**：
```npm install webpack -g``` -
** 创建项目**：
创建一个app目录
mkdir app
在app目录下边创建yidiandaima.js,代码如下:
document.write("It works.");
在 app 目录下添加 index.html 文件，代码如下:
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="output.js" charset="utf-8"></script>
</body>
</html>
-
接下来我们使用 webpack 命令来打包：：
webpack yidiandaima.js output.js
执行以上命令会编译 yidiandaima.js 文件并生成output.js 文件在浏览器中打开 index.html，输出结果如下：
1.png
gulp和webpack的区别：
gulp 是一种基于流构建工具，能够优化前端的工程流，比如自动刷新页面压缩css和 js, 编译less等等。简单来说，就是使用gulp, 然后配置你需要的插件，就可以把以前需要手工做的事情让它帮你做了，这是非常方便的！
webpack以及browserify ，还有seajs 和requirejs 这四个其实都是JS模块化的方案。其中seajs/ requirejs是一种类型， browserify / webpack 是另一种类型。
-
seajs/ require：
是一种在线“编译”模块的方案，相当于在页面上加载一个CMD/AMD 解释器。这样浏览器就认识了 define、exports、module这些东西。也就实现了模块 - ** webpack /broserify：**
是一个预编译模块的方案，相比于上面，这个方案更加智能。以webpack为例：首先它是预编译的，不需要再浏览器中加载解释器。另外，你在本地直接写JS, 不管是AMD / CMD / ES6 风格的模块化， 它都能认识。并且编译成浏览器认识的JS。
网友评论