gulp和yarn打包工具二分鐘包會教程

 

1.什麼是 gulp？

基於node的自動化構建工具

 

擴展：開發的時候分爲2個節點一個是開發階段  另外一個是部署階段

 

     開發階段：源文件不會被壓縮

     

     部署階段：全部文件須要壓縮

2.gulp能幹什麼？

1  自動壓縮JS文件

2  自動壓縮CSS文件

3  自動合併文件

4  自動編譯sass

5  自動壓縮圖片

6  自動刷新瀏覽器

 

3.怎麼安裝gulp？

  由於它基於nodeJS，所以須要先安裝node環境

  安裝完成後，打開你的命令行窗口

  輸入： node -v

  檢測一下node是否安裝好了

 

　　　　二分鐘開始

1.使用npm安裝插件命令
     ：npm install <name> -g  全局安裝  //先全局安裝
     ：npm install <name> --save-dev：局部安裝  //一會使用

《npm install -g cnpm --registry=https://registry.npm.taobao.org》淘寶鏡像>>cnpm安裝

cnpm -v//裝完查看版本，驗證是否安裝正確
<-- cnpm替換npm快不少 -->

　　

 

2.初始化文件夾
　　cnpm init 《npm init -y 若是卡住的話》
 
　　做用：初始化一個gulp環境   建立一個package.json文件

　　

 

3.局部安裝gulp
　　　　cnpm install gulp --save-dev：局部安裝
 
     　　--save：將保存配置信息至package.json
     
    　　 -dev：保存至package.json的devDependencies節點
     
 

　　

4.新建gulpfile文件(重要)
　　gulpfile.js是gulp項目的配置文件，是位於項目根目錄的普通js文件
 
　　gulpfile   package   node_modules 三個文件通常放在一塊兒

gulpfile.js

const gulp = require("gulp")//引入

gulp.task("script",function(){
    gulp.src("src/index.txt")
    .pipe(gulp.dest("dist/js"))
})

　　

　　終端輸入

gulp script

　　

　　項目裏面就OK了

　　

yarn

1.什麼是 Yarn？

這裏引用中文官網的說明： 
Yarn 是一個依賴管理工具。它可以管理你的代碼，並與全世界的開發者分享代碼。Yarn 是高效、安全和可靠的，你徹底能夠安心使用。

Yarn 可以讓你使用其餘開發者開發的代碼，讓你更容易的開發軟件。若是你在使用中發現任何問題，歡迎發 issue 或者貢獻代碼，一旦問題被修復，你就能夠繼續使用 Yarn 戰鬥了。

代碼是經過包（有時也被稱爲模塊）進行共享的。 在每個包中包含了全部須要共享的代碼，另外還定義了一個 package.json 文件，用來描述這個包。

 

一、安裝  cnpm install yarn -g
2.項目裏面 yarn add gulp --dev

　　

 

和gulp對比的命令

一、安裝  cnpm install yarn -g

二、cnpm install gulp --save === yarn add gulp 

三、cnpm install gulp --save-dev === yarn add gulp --dev

四、更新 cnpm update 包名 == yarn update 包名

五、yarn remove 包名 == npm uninstall 包名 刪除包

六、yarn clear 清除緩存

七、yarn install  == cnpm install <別人搞你的項目若是裏面沒有module 直接下載json中的包>

八、 yarn init -y  == cnpm init -y