一直在使用，也沒時(shí)間說痕届，今天來介紹下gulp 和webpack的安裝使用還有就是區(qū)別
首先先明白gulp和webpack是完全不同的兩個(gè)東西
- gulp ：一個(gè)基于流的自動(dòng)化構(gòu)建工具。
- webpack ：WebPack可以看做是模塊打包機(jī)懊直。
gulp做的事：
gulp做的事:文件合并,文件壓縮,語法檢查,監(jiān)聽文件變化
webpack做的事：
webpack做的事情是岛都，分析你的項(xiàng)目結(jié)構(gòu)凹蜈，找到JavaScript模塊以及其它的一些瀏覽器不能直接運(yùn)行的拓展語言（Scss，TypeScript等）糕伐，并將其打包為合適的格式以供瀏覽器使用砰琢。
gulp的安裝：
安裝gulp之前得安裝node.js，因?yàn)檫@里需要使用到node.js的npm包管理工具，在這里node.js 的安裝就不提了陪汽，不懂的可以自己百度训唱，下來安裝gulp其實(shí)是挺簡單的，分為以下幾個(gè)步奏：
-
** 全局安裝 gulp**：
``` npm install --global gulp``` -
作為項(xiàng)目的開發(fā)依賴（devDependencies）安裝：
```npm install --save-dev gulp``` -
在項(xiàng)目根目錄下創(chuàng)建一個(gè)名為 gulpfile.js 的文件：
``` var gulp = require('gulp'); gulp.task('default', function() { // 將你的默認(rèn)的任務(wù)代碼放在這 });``` ** 運(yùn)行 gulp**：
gulp
webpack的安裝：
安裝webpack也是使用npm命令的挚冤，和gulp是一樣的
-
** 全局安裝 webpack**：
```npm install webpack -g``` ** 創(chuàng)建項(xiàng)目**：
創(chuàng)建一個(gè)app目錄
mkdir app
在app目錄下邊創(chuàng)建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
執(zhí)行以上命令會(huì)編譯 yidiandaima.js 文件并生成output.js 文件在瀏覽器中打開 index.html，輸出結(jié)果如下：
gulp和webpack的區(qū)別：
gulp 是一種基于流構(gòu)建工具训挡，能夠優(yōu)化前端的工程流澳骤，比如自動(dòng)刷新頁面壓縮css和 js, 編譯less等等。簡單來說澜薄，就是使用gulp, 然后配置你需要的插件宴凉，就可以把以前需要手工做的事情讓它幫你做了，這是非常方便的表悬！
webpack以及browserify 弥锄，還有seajs 和requirejs 這四個(gè)其實(shí)都是JS模塊化的方案。其中seajs/ requirejs是一種類型蟆沫， browserify / webpack 是另一種類型籽暇。
-
seajs/ require：
是一種在線“編譯”模塊的方案，相當(dāng)于在頁面上加載一個(gè)CMD/AMD 解釋器饭庞。這樣瀏覽器就認(rèn)識(shí)了 define戒悠、exports、module這些東西舟山。也就實(shí)現(xiàn)了模塊 - ** webpack /broserify：**
是一個(gè)預(yù)編譯模塊的方案绸狐，相比于上面，這個(gè)方案更加智能累盗。以webpack為例：首先它是預(yù)編譯的寒矿，不需要再瀏覽器中加載解釋器。另外若债，你在本地直接寫JS, 不管是AMD / CMD / ES6 風(fēng)格的模塊化符相， 它都能認(rèn)識(shí)。并且編譯成瀏覽器認(rèn)識(shí)的JS蠢琳。
