目錄：

安裝nodejs

安裝完成npm可以選裝cnpm

全局安裝gulp

新建package.json文件

本地安裝gulp插件

新建gulpfile.js文件

使用webstorm運行gulp任務

---

一、安裝nodejs

gulp是基于nodejs，理所當然需要安裝nodejs; 安裝node的話，自行看教程安裝啦。 安裝完成以后查看node安裝情況：

node -v 查看node版本 npm -v 查看npm版本

---

二、安裝完成npm可以選裝cnpm(淘寶的鏡像，反正相比npm很快duo了)

npm install cnpm -g --registry=https://registry.npm.taobao.org

安裝完成以后查看cnpm安裝情況：

cnpm -v 查看cnpm版本

三、全局安裝gulp

cnpm install gulp -g

安裝完成以后查看gulp安裝情況：

gulp -v 查看gulp版本

四、新建package.json文件

cnpm init

五、本地安裝gulp插件

cnpm install gulp-less --save-dev

六、新建gulpfile.js文件

gulpfile.js是gulp項目的配置文件，是位于項目根目錄的普通js文件（其實將gulpfile.js放入其他文件夾下亦可）

它大概是這樣一個js文件（更多插件配置大概是這個樣子的）：

//導入工具包 require('node_modules里對應模塊') var gulp = require('gulp'), //本地安裝gulp所用到的地方less = require('gulp-less');//定義一個testLess任務（自定義任務名稱） gulp.task('testLess', function () {gulp.src('src/less/index.less') //該任務針對的文件.pipe(less()) //該任務調用的模塊.pipe(gulp.dest('src/css')); //將會在src/css下生成index.css });gulp.task('default',['testLess', 'elseTask']); //定義默認任務 elseTask為其他任務，該示例沒有定義elseTask任務//gulp.task(name[, deps], fn) 定義任務 name：任務名稱 deps：依賴任務名稱 fn：回調函數 //gulp.src(globs[, options]) 執行任務處理的文件 globs：處理的文件路徑(字符串或者字符串數組) //gulp.dest(path[, options]) 處理完后文件生成路徑

七、使用webstorm運行gulp任務

將項目導入webstorm，右鍵gulpfile.js 選擇”Show Gulp Tasks”打開Gulp窗口，若出現”No task found”，選擇右鍵”Reload tasks”，雙擊運行即可。

總結

以上是生活随笔為你收集整理的gulp简单使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。