Webpack,npm,yarn 等 經常使用工具簡介

yarn 運行
npm run dev 或 yarn run dev

Webpack 運行 webpack -w 編譯 npm run build 或npm install /gulp

Grunt運行 grunt watch

 

現安裝版本信息

node -v 8.9.3

npm -v 5.5.1

webpack -v 3.10.0

yarn --version 1.5.1

concurrently --version 3.5.1

gulp --version 3.9.1

//--------------------------------------------------------------------------------

Webpack https://www.runoob.com/w3cnote/webpack-tutorial.html

webpack 是一個前端資源加載/打包工具，它根據模塊的依賴關係進行靜態分析，
而後將這些模塊按照指定的規則生成對應的靜態資源。

modules with dependencies → webpack module bundler → static assets
模塊依賴關係 webpack模塊打包機 靜態資源

//--------------------------------------------------------------------------------------

NPM http://www.runoob.com/nodejs/nodejs-npm.html

npm 是隨同NodeJS一塊兒安裝的包管理工具，能解決NodeJS代碼部署上的不少問題，常見的使用場景有如下幾種：

1. 容許用戶從NPM服務器下載別人編寫的第三方包到本地使用。

2. 容許用戶從NPM服務器下載並安裝別人編寫的命令行程序到本地使用。

3. 容許用戶將本身編寫的包或命令行程序上傳到NPM服務器供別人使用。

//---------------------------------------------------------------------------------------------

Yarn https://yarn.bootcss.com/

https://blog.csdn.net/peakchen_90/article/details/53360398

yarn 快速，可靠，安全的依賴管理工具。

//------------------------------------------------------------------------

bower 包管理工具

//-----------------------------------------------------------------------------

concurrently

做用 ： window能夠同時運行多個命令 eg: gulp & webpack

//--------------------------------------------------------------------------

Gulp https://www.gulpjs.com.cn/

https://www.gulpjs.com.cn/docs/getting-started/

gulp 自動化構建工具

優勢：

(1)易於使用

經過代碼優於配置的策略，Gulp 讓簡單的任務簡單，複雜的任務可管理。

(2)構建快速

利用 Node.js 流的威力，你能夠快速構建項目並減小頻繁的 IO 操做。

(3)插件高質

Gulp 嚴格的插件指南確保插件如你指望的那樣簡潔高質得工做。

(4) 易於學習

經過最少的 API，掌握 Gulp 絕不費力，構建工做盡在掌握：如同一系列流管道。

 

//--------------------------------------------------------------------------

Grunt http://www.gruntjs.net/

.Grunt是一個基於任務的Javascipt 工程命令行構建工具

首先做爲一個 JavaScript 開發者，我決定使用 Node.js 和 npm 是由於我關心的依賴組件（JSHint 和 UglifyJS） 已經有 npm 模塊了。也就是說，當 Node.js 被設計用來處理高併發異步 IO 驅動的網絡服務時， 它就註定不是設計用來當命令行構建工具的。可是不要緊，由於 grunt 可以在 OS X，Linux 與 Windows 下良好工做。