前端構建工具 gulpjs 的介紹


 

gulpjs是一個前端構建工具,gulpjs無需寫一大堆繁雜的配置參數,API也非常簡單,學習起來很容易,而且gulpjs使用的是nodejs中stream來讀取和操作數據,其速度更快。

gulp的安裝

首先確保你已經正確安裝了nodejs環境。然後以全局方式安裝gulp:

npm install -g gulp

全局安裝gulp後,還需要在每個要使用gulp的項目中都單獨安裝一次。把目錄切換到你的項目文件夾中,然後在命令行中執行:

npm install gulp

如果想在安裝的時候把gulp寫進項目package.json文件的依賴中,則可以加上--save-dev:

npm install --save-dev gulp

這樣就完成了gulp的安裝。至於爲什麼在全局安裝gulp後,還需要在項目中本地安裝一次,有興趣的可以看下stackoverflow上有人做出的回答:why-do-we-need-to-install-gulp-globally-and-locallywhat-is-the-point-of-double-install-in-gulp。大體就是爲了版本的靈活性,但如果沒理解那也不必太去糾結這個問題,只需要知道通常我們是要這樣做就行了。

 建立gulpfile.js文件

就像gruntjs需要一個Gruntfile.js文件一樣,gulp也需要一個文件作爲它的主文件,在gulp中這個文件叫做gulpfile.js。新建一個文件名爲gulpfile.js的文件,然後放到你的項目目錄中。之後要做的事情就是在gulpfile.js文件中定義我們的任務了。下面是一個最簡單的gulpfile.js文件內容示例,它定義了一個默認的任務。

var gulp = require('gulp');
gulp.task('default',function(){
    console.log('hello world');
});

此時我們的目錄結構是這樣子的:

├── gulpfile.js
├── node_modules
│ └── gulp
└── package.json

運行gulp任務

要運行gulp任務,只需切換到存放gulpfile.js文件的目錄(windows平臺請使用cmd或者Power Shell等工具),然後在命令行中執行gulp命令就行了,gulp後面可以加上要執行的任務名,例如gulp task1,如果沒有指定任務名,則會執行任務名爲default的默認任務。

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