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-locally、what-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
的默認任務。