简单看gulp和webpack的安装使用和区别

2017-06-13 本文已影响0人一点代码

一直在使用，也没时间说，今天来介绍下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。