gulp 安裝與入門

gulp是什麼?

Gulp.js 是一個自動化構建工具,開發者可以使用它在項目開發過程中自動執行常見任務。Gulp.js 是基於 Node.js 構建的,利用 Node.js 流的威力,你可以快速構建項目並減少頻繁的 IO 操作。Gulp.js 源文件和你用來定義任務的 Gulp 文件都是通過 JavaScript(或者 CoffeeScript )源碼來實現的。

入門指南

gulp依賴於Node.js運行環境,所以在使用它之前需要先安裝Node.js,另外我們還需要一個命令行工具Git-Bash來進行命令操作,本文的所有案例都假定在這些條件都滿足的情況下進行。

1. 全局安裝 gulp

爲了讓我們的電腦具有(或者說支持)gulp這個命令,我們需要在Git-Bash命令行工具裏輸入以下命令:

$ npm install -g gulp 

檢查是否安裝成功可以輸入以下命令:

$ gulp -v
[13:38:11] CLI version 3.9.1 //如果出現這一個行表明安裝成功

2. 作爲項目的開發依賴(devDependencies)安裝

使用npm安裝:

$ npm init -y //這個命令是初始化包管理文件package.json
$ npm install --save-dev gulp //--save-dev或者—D都表示作爲開發依賴進行安裝

或者使用yarn安裝:

$ yarn init -y  //這個命令是初始化包管理文件package.json
$ yarn add -D gulp //這個目前可能還不支持,但都是早晚的事情

安裝完成後可以通過以下命令查看當前目錄下以及全局安裝的gulp版本:

$ gulp -v
[13:40:38] CLI version 3.9.1 //這個表示全局安裝的gulp的版本信息
[13:40:38] Local version 3.9.1 //這個表示當前目錄下安裝的gulp的版本信息

注意: 全局安裝的gulp只是讓您的系統(電腦)增加了一個叫做gulp的命令,這個命令會調用當前目錄下的 gulpfile.js 文件,並根據該文件的內容來執行相應的任務,而真正起到提供API功能的卻是本地安裝的gulp。

3.在項目根目錄下創建一個名爲 gulpfile.js 的文件

var gulp = require('gulp');

gulp.task('default', function() {
  // 將你的默認的任務代碼放在這
});

4.運行gulp

$ gulp

這個命令僅僅是執行了gulpfile.js中的 “default” 的任務(通常叫做task),如果需要指明執行哪一具體的任務,需要使用如下語法:

$ gulp taskName //taskName表示通過task方法定義的任務名稱

更多信息請參考gulp官網進行學習

謝謝關注,歡迎點贊:)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章