為了UED前端團(tuán)隊(duì)更好的協(xié)作開發(fā)同時(shí)提高項(xiàng)目編碼質(zhì)量，我們需要將Web前端使用工程化方式構(gòu)建；

創(chuàng)新互聯(lián)公司專注于盂縣網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供盂縣營銷型網(wǎng)站建設(shè)，盂縣網(wǎng)站制作、盂縣網(wǎng)頁設(shè)計(jì)、盂縣網(wǎng)站官網(wǎng)定制、微信小程序定制開發(fā)服務(wù)，打造盂縣網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供盂縣網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

目前需要一些簡單的功能：

   1. 版本控制
    2. 檢查JS
    3. 圖片合并
    4. 壓縮CSS
    5. 壓縮JS
    6. 編譯SASS

這些都是每個(gè)Web項(xiàng)目在構(gòu)建、開發(fā)階段需要做的事情。前端自動(dòng)化構(gòu)建環(huán)境可以把這些重復(fù)工作一次配置，多次重復(fù)執(zhí)行，極大的提高開發(fā)效率。

目前最知名的構(gòu)建工具： Gulp、Grunt、NPM + Webpack；
    grunt是前端工程化的先驅(qū)

   gulp更自然基于流的方式連接任務(wù)

   Webpack最年輕，擅長用于依賴管理，配置稍較復(fù)雜

   推薦使用Gulp，Gulp基于nodejs中stream，效率更好語法更自然,不需要編寫復(fù)雜的配置文件

Use Gulp to automate front-end build tasks

Gulp是基于 Node.js的，需要要安裝 Node.js

1、為了確保依賴環(huán)境正確，我們先執(zhí)行幾個(gè)簡單的命令檢查。
    node -v
    Node是一個(gè)基于Chrome JavaScript V8引擎建立的一個(gè)解釋器
    檢測Node是否已經(jīng)安裝，如果正確安裝的話你會(huì)看到所安裝的Node的版本號

2、接下來看看npm，它是 node 的包管理工具，可以利用它安裝 gulp 所需的包
    npm -v
    這同樣能得到npm的版本號，裝 Node 時(shí)已經(jīng)自動(dòng)安裝了npm

3、開始安裝Gulp

    npm install -g gulp


   全局安裝 gulp

    gulp -v


   得到gulp的版本號，確認(rèn)安裝成功

基礎(chǔ)安裝結(jié)束
-

4、切換到你的在項(xiàng)目根文件夾下，運(yùn)行

    npm install gulp --save-dev//將具體的gulp功能插件局部安裝項(xiàng)目下

5、安裝gulp功能插件依賴包

    npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename--save-dev

gulp功能模塊的文件會(huì)放在項(xiàng)目所在的目錄的./node_modules 下

6、我們目前先使用一些簡單的功能：
    - 檢查Javascript
    - 編譯Sass文件
    - 合并Javascript
    - 壓縮合并并重命名Javascript

新建gulpfile.js 配置文件放在項(xiàng)目根目錄下
 演示項(xiàng)目目錄結(jié)構(gòu)

testProject    (項(xiàng)目名稱)
  |–.git       通過git進(jìn)行版本控制,項(xiàng)目自動(dòng)生成這個(gè)文件
  |–node_modules   組件包目錄
  |–dist       **發(fā)布環(huán)境**（編譯自動(dòng)生成的）
    |–css     樣式文件(style.css style.min.css)
    |–images   圖片文件(壓縮圖片\合并后的圖片)
    |–js     js文件(main.js main.min.js)
    |–index.html 靜態(tài)頁面文件(壓縮html)
  |–src       **開發(fā)環(huán)境**
    |–sass        sass文件
    |–images        圖片文件
    |–js         js文件
    |–index.html     靜態(tài)文件
  |–gulpfile.js       gulp配置文件
  |–package.json       依賴模塊json文件,在項(xiàng)目目錄下npm install會(huì)安裝項(xiàng)目所有的依賴模塊，簡化項(xiàng)目的安裝程序

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)頁題目：nodejs前端自動(dòng)化構(gòu)建環(huán)境的搭建-創(chuàng)新互聯(lián)
文章出自：http://weahome.cn/article/dsdjgh.html