nodejs+gulp+webpack基礎知識

時間 2019-11-11

標籤 nodejs+gulp+webpack nodejs gulp webpack 基礎知識欄目 JavaScript 简体版

原文原文鏈接

nodejs+gulp+webpack基礎知識

2019年08月22日 11:49:40 天府雲創閱讀數 22

本文連接： https://blog.csdn.net/English0523/article/details/100009783

知識點涉及怎麼結合gulp、webpack、Babel等並結合NodeJS+NPM開發前端。javascript

第一章:開腦與熱身php

第二章:gulp和webpack混合學習css

第三章:前端利器Babel+ES2015體驗學習篇html

第四章:webpack+gulp+sass學習篇前端

第五章:webpack+git+Jenkins學習篇vue

爲何須要前端工程化？

前端工程化的意義在於讓前端這個行業由野蠻時代進化爲正規軍時代，近年來不少相關的工具和概念誕生。好奇心日報在進行前端工程化的過程當中，主要的挑戰在於解決以下問題：
✦ 如何管理多個項目的前端代碼？
✦ 如何同步修改複用代碼？
✦ 如何讓開發體驗更爽？java

項目實在太多

以前寫過一篇博文如何管理被多個項目引用的通用項目？，文中提到過某某的項目偏多（PC/Mobile/App/Pad），要爲這麼多項目開發前端組件並維護是一個繁瑣的工做，而且會有不少冗餘的工做。node

更好的管理前端代碼

前端代碼要適配後臺目錄的規範，原本能夠很美好的前端目錄結構被拆得四分五裂，前端代碼分散不便於管理，而且開發體驗很不友好。
而有了前端工程化的概念，前端項目和後臺項目能夠完全分離，前端按本身想要的目錄結構組織代碼，而後按照必定的方式構建輸出到後臺項目中，簡直完美（是否是有種後宮佳麗三千的感受）。react

技術選型

調研了市場主流的構建工具，其中包括gulp、webpack、fis，最後決定圍繞gulp打造前端工程化方案，同時引入webpack來管理模塊化代碼，大體分工以下：
gulp：處理html壓縮/預處理/條件編譯，圖片壓縮，精靈圖自動合併等任務
webpack：管理模塊化，構建js/css。jquery

至於爲何選擇gulp & webpack，主要緣由在於gulp相對來講更靈活，能夠作更多的定製化任務，而webpack在模塊化方案實在太優秀（不由自主的讚美）。

怎麼設計前端項目目錄結構？

抽離出來的前端項目目錄結構以下

appfe目錄：appfe就是前面提到的前端項目，這個項目主要包含兩部分：前端代碼、構建任務
appfe > gulp目錄：包含了全部的gulp子任務，每一個子任務包含相關任務的全部邏輯。
appfe > src目錄：包含了全部前端代碼，好比頁面、組件、圖片、字體文件等等。
appfe > package.json：這個不用說了吧。
appfe > gulpfile.js：gulp入口文件，引入了全部的gulp子任務。

理想很豐滿，現實卻很骨感，這麼美好的願望，在具體實踐過程當中，註定要花很多心思，要踩很多坑。
好奇心日報此次升級改造即將上線，終於也有時間把以前零零碎碎的博文整合在一塊兒，而且結合本身的體會分享給你們，固然將來可能還會有較大的調整，這兒拋磚引玉，你們能夠參考思路。

gulp 是什麼？

gulp是一個基於流的構建工具，相對其餘構件工具來講，更簡潔更高效。
Tip：以前寫過一篇gulp 入門，能夠參考下，若是對gulp已經有必定的瞭解請直接跳過。

webpack 是什麼？

webpack是模塊化管理的工具，使用webpack可實現模塊按需加載，模塊預處理，模塊打包等功能。
Tip：以前寫過一篇webpack 入門，能夠參考下，若是對webpack已經有必定的瞭解請直接跳過。

如何整合gulp & webpack

如今webpack明顯呈愈來愈受歡迎的趨勢，而gulp在當年的jquery時代的時候也是發揮了重要做用。他們均可以看作是構建工具的一種，構建工具的目的是實現構建過程的自動化。他們都是node工具包，能夠經過npm全局安裝到本地計算機。
Gulp是任務運行工具，好比，經常使用命令有：gulp.task()，Webpack不是任務運行工具， Webpack是一個模塊構建工具。主要目的是幫助程序模塊及其依賴構建靜態資源。因此，gulp在jQuery時代堪稱完美，而對於SPA大型單頁應用來講，webpack的模塊化很好地解決了這個問題。
gulp 走的是流式處理路線，webpack 走的是模塊處理路線，可是二者所要達成的目標倒是同樣的，那就是促進前端領域的自動化和工程化管理。

webpack是衆多gulp子任務中比較複雜的部分，主要對JS/CSS進行相關處理。
包括：模塊分析、按需加載、JS代碼壓縮合並、抽離公共模塊、SourceMap、PostCSS、CSS代碼壓縮等等...

使用node構建環境(webpack,gulp)

關鍵點

其中關鍵點是npm script中運行的代碼是優先本目錄中的模塊，即運行webpack,gulp需要全局安裝的模塊時，如今只用安裝在本項目內即可以運行

代碼

package.json
{
...
scripts: {
"dev": "webpack",
"build": "gulp"
}
...
}

使用（交付後端）

只需要把整個本地項目所有複製給後端人員，並在後端開發機上安裝node.js環境便可以正常運行

運行代碼

npm run dev
npm run build

nodejs，npm，gulp，webpack的介紹和關係

nodejs

Node.js 是一個基於 Chrome V8 引擎的 JavaScript 運行環境。讓JavaScript運行在服務端的開放平臺，它讓JavaScript成爲PHP，Python，Ruby等服務器端語言分庭抗禮的腳本語言。（安裝的時候注意設置環境變量）

npm

npm是nodejs的一個模塊，是nodejs的包管理器。

咱們在Node.js上開發時，會用到不少別人已經寫好的javascript代碼，若是每當咱們須要別人的代碼時，都根據名字搜索一下，下載源碼，解壓，再使用，會很是麻煩。因而就出現了包管理器npm。你們把本身寫好的源碼上傳到npm官網上，若是要用某個或某些個，直接經過npm安裝就能夠了，不用管那個源碼在哪裏。而且若是咱們要使用模塊A，而模塊A又依賴模塊B，模塊B又依賴模塊C和D，此時npm會根據依賴關係，把全部依賴的包都下載下來而且管理起來。試想若是這些工做全靠咱們本身去完成會多麼麻煩！

市場上還有不少經常使用的第三方工具，cnpm，yarn，bower

gulp

Gulp就是爲了規範前端開發流程，實現先後端分離、模塊化開發、版本控制、文件合併與壓縮、mock數據等功能的基於流一個前端自動化構建工具。說的形象點，「Gulp就像是一個產品的流水線，整個產品從無到有，都要受流水線的控制，在流水線上咱們能夠對產品進行管理。」

Gulp是經過task對整個開發過程進行構建。

1.構建工具

2.自動化

3.提升效率用

webpack

Webpack 是當下最熱門的基於配置的前端資源模塊化管理和打包工具。它能夠將許多鬆散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。還能夠將按需加載的模塊進行代碼分隔，等到實際須要的時候再異步加載。經過 loader的轉換，任何形式的資源均可以視做模塊，好比 CommonJs 模塊、AMD 模塊、ES6 模塊、CSS、圖片、JSON、Coffeescript、LESS 等。

1.打包工具

2.模塊化識別

3.編譯模塊代碼方案用

gulp和webpack都是基於node.js的工具

總結

1.jquery依然依靠豐富的dom操做去組合業務邏輯，當業務邏輯複雜的時候，每行代碼都會有不知所云的感受。由於:

第一：業務邏輯和UI更改該混在一塊兒，
第二：UI裏面還參雜這交互邏輯，讓原本混亂的邏輯更加混亂。

固然第二點從另外一方面看也是優勢，由於有的時候UI交互邏輯可以更加靈活地嵌入到業務邏輯，這在其餘MV*框架中都是比較難處理的。
2.vuejs很是小清新，小清新不表明作不了複雜的東西，好比官方的這個demo就不錯：http://vuejs.org/examples/svg.html
3.reactjs代碼量最多，由於它既要管理UI邏輯，又要操心dom的渲染。
4.extjs無感沒用過。
5.angularjs渲染快，就是量大（相對於vue.js）。

前端工程化能夠自動化處理一些繁複的工做，提升開發效率，減小低級錯誤。
更重要的是，仍是文章開頭的說的，前端工程化最大的意義在於給咱們新的視角去看待前端開發，讓前端開發能夠作更復雜、更有挑戰的事情！

【參考文章】

一、前端三大主流框架的對比React、Vue、Angular - 簡書 https://www.jianshu.com/p/c4005414025c

二、node.js+npm+vue+webpack+nginx前端項目打包部署到服務器 - https://blog.csdn.net/qq_35813265/article/details/81872351

三、nodejs與nginx的完美搭配 - https://blog.csdn.net/qq_17475155/article/details/66473855

四、用Nginx作NodeJS應用的負載均衡 - https://blog.csdn.net/chszs/article/details/43203127

五、使用pm2躺着實現負載均衡 - https://blog.csdn.net/qq_17475155/article/details/53823862