[如何在Mac下使用gulp] 1.創建項目及安裝gulp

 

1.創建項目

2.安裝gulp

3.創建gulpfile.js文件

4.運行gulp

 

創建項目

-創建項目文件夾命名為firstGulp，並在firstGulp目錄下運行 npm init 。npm init 會創建packjson文件，用於保存與項目有關的文件信息。創建步驟直接按回車跳過就好。

 

綠色部分需要我們根據項目自身情況手動輸入 ，也可設置為空。紅色部分是最終生成的內容。

 

-當然在最后，需要手動確認信息。確認之后，會在firstGulp項目目錄下生成一個packjson.json文件

 

 -確認之后，在firstGulp目錄下生成的packjson.json文件如下。

{
  "name": "none",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

 

 

2.安裝gulp

在安裝gulp之前，一起來梳理下幾個問題。

 

2.1 什么是全局安裝？

在項目目錄中執行以下命令：

npm install gulp -g  或者 npm install gulp --global

全局環境下安裝gulp，目的在於能夠在命令行中使用gulp命令執行gulp。

 

通過npm  root -g 查看在全局環境下安裝的路徑：

/usr/local/lib/node_modules

 

 

2.2 什么是本地安裝？

在項目目錄中執行以下命令：

npm install gulp 或者 npm install gulp --save-dev 或者 npm install gulp --save

npm install gulp --save     自動把模塊和版本號添加到packjson.json文件中的dependencies部分

npm install gulp --save-dev 自動把模塊和版本號添加到packjson.json文件中的devdependencies部分

2.3 什么要先全局安裝再本地安裝？

  -全局安裝是為了可以通過命令行執行gulp命令。而且如果有多個項目都需要使用gulp，只需要全局安裝一次即可。

  -根據項目情況，我們一般會選取gulp插件通過require()的方式引入到gulpfile.js中，如果只使用全局安裝，需要手動配置路徑來解決模塊引入問題。通過在本地安裝gulp可以很好的解決這個問題。

  -本地安裝可以讓每個項目都有一個獨立的包，並且組織各個包之間的依賴。不受全局包的影響。換句話說，如果只在全局安轉gulp，那么會造成多個項目共用同一個版本的gulp。

  -方便項目的打包，復制等操作。 

 

 

執行后 npm install gulp --save-dev packjson.json內容變換 如下：

{
    "name": "none",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
       "gulp": "^3.9.1"  //自動把模塊和版本號添加到packjson.json文件中的devdependencies部分

    }

}

 

 3.創建gulpfile.js文件

var gulp = require("gulp");//引入本地安裝的 gulp模塊

gulp.task("default",function(){//default 為默認任務名，這種情況只需要在命令行中輸入 gulp即可。 如果有特定的taskName,需要在命令行中實行 gulp taskName
　　console.log("hi, gulp")
})

 -gulpfile.js將作為gulp的主文件負責執行在其中定義的任務。

4.運行gulp

gulp  =>輸出 “hi,gulp”