此篇文章瀏覽量:
256
Gulp 是一個在前端開發領域中,非常好用的一個任務管理系統,你可以建立多個任務(Tasks),來創造 Build System,像是將 css 的 sass 檔案編譯成 css 檔,就是一個任務(Task);將所有前端檔案做版本化管理也是一個任務(Task)。算是我非常喜歡的一個前端工具。
官網在這:Gulp
這裡列出基本的指令以及一開始在專案中該如何導入:
移除全域的 Gulp
如果之前曾經在全域安裝過的話,想要移除,可以透過以下指令:
$ npm rm --global gulp
安裝全域 Gulp
$ npm install --global gulp-cli
檢查版本
$ gulp -v
建立 package.json 檔案
先建立一個空的測試用專案目錄: test_gulp_proj,再透過 npm init 指令來建立 package.json 檔:
$ mkdir test_gulp_proj
$ cd test_gulp_proj
$ npm init
在專案資料夾中,安裝 gulp
$ npm install --save-dev gulp
在專案資料夾中,檢查版本
$ gulp --version
就會看到下圖:
CLI version 就是全域安裝的 gulp-cli 版本Local version 就是目前專案資料夾中所安裝的 gulp 版本
手動建立 gulpfile.js 檔案
直接在專案資料夾當中,建立 gulpfile.js 檔案,所有的任務管理,都是在這個檔案當中。
建立一個預設的任務
在 gulpfile.js 檔中,放入以下內容,defaultTask() 函式並沒有做任何的動作,只是將它設定成一個預設的任務函式:
function defaultTask(cb) {
// place code for your default task here
cb();
}
exports.default = defaultTask
執行任務
直接在專案資料夾之中,執行 gulp 指令,就會按照 gulpfile.js 當中的設定來執行:
$ gulp