1. 安裝nodejs
-
去 https://nodejs.org/en/下載安裝文件安裝即可。
-
安裝完成后，在終端輸入
node -v回車打印出nodejs的版本號，說明nodejs安裝成功。 -
在終端輸入
npm -v
回車打印出npm的版本號，說明npm也安裝成功(node安裝包中已集成了npm,因此在安裝nodejs的同時也安裝了npm)。
2. 設置npm
由於https://www.npmjs.com在國內訪問不穩定，因此建議使用國內鏡向站點https://npm.taobao.org
具體方法如下：
-
通過config命令
npm config set registry https://registry.npm.taobao.org
-
命令行指定
npm --registry https://registry.npm.taobao.org info underscore
-
編輯 npmrc文件，在該文件中加入registry = https://registry.npm.taobao.org
這個在windows下找到了npmrc。 mac下暫時還沒找到。
3. 安裝gulp(全局)
-
在終端輸入
npm install gulp -g -
安裝完成后，同樣輸入
gulp -v輸出相應的版本號，則說明安裝成功。
至此gulp安裝完成
4. 配置項目
下面以一個簡單案例來做演示：創一個gulp文件夾作為項目根目錄，項目結構如下：!
我們以常用的 gulp-uglify、gulp-concat、gulp-minify-css為例。
先是配置package.json文件，有三種方法：
-
可以用記事本之類的創建一個
-
用npm init建
-
也可以復制之前項目的創建好的package.json
我們用npm init 的方法來創建package.json
在終端將當前目錄切換至項目所在目錄，然后輸入npm init，一路回車，最終在項目根目錄下生成package.json:
{
"name": "gulp_test", /*項目名,切記這里命名不要與模塊一樣，如命名為gulp，要地安裝gulp時就會出錯*/ "version": "1.0.0", /*版本號*/ "description": "", /*描述*/ "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", /*作者*/ "license": "ISC" /*項目許可協議*/ }注釋是我自己加的，npm init生成是沒有注釋的，而且json文件也不支持注釋，這點得注意！
5. 本地安裝gulp及gulp插件
本地安裝gulp
npm install gulp --save-dev 安裝完成后，我們再看項目中的變化：
如圖：
-
gulp模塊下載到項目中的node_modules文件夾中。
-
package.json中寫入了devDependencies字段，並在該字段下填充了gulp模塊名
--svae-dev 的作用就是將剛才安裝的模塊寫入package.json中。
大家可能會覺得有些奇怪，剛不是安裝了gulp嗎？對，那是全局安裝，為的是能在端終運行gulp任務的，這里是項目級別的安裝，真正的gulp模塊安裝到項目的node_modules/下了，后面的插件都是依賴gulp模塊的。
本地安裝gulp插件
接下來安裝上面提到的三個插件,在終端中輸入npm install --save-dev gulp-uglify gulp-concat gulp-minify-css
安裝完成，如下圖
6. 創建gulpfile.js文件
在項目根目錄下創建gulpfile.js文件，然后編寫如下代碼，這些代碼沒什么好解釋的，具體可以參考gulp的api
/*引入gulp及相關插件 require('node_modules里對應模塊')*/ var gulp = require('gulp'); var minifyCss = require("gulp-minify-css"); var uglify = require('gulp-uglify'); var concat = require('gulp-concat'); //壓縮 gulp.task('minify-css', function () { gulp.src('css/*.css') .pipe(minifyCss()) .pipe(gulp.dest('dist/css/')); }); // gulp.task('script', function () { gulp.src(['src/a.js',"src/b.js"]) .pipe(concat('all.js')) .pipe(uglify()) .pipe(gulp.dest('dist/js')); }); gulp.task('default',['minify-css','script']); 實際的項目肯定沒這么簡單，想想我們一般不可能對某幾個文件操作，應該是對一批文件操作，那樣的涉及到文件匹配的問題了，暫時不展開了。
7. 運行gulp
可以看到，我們在gulpfile.js創建了3個任務，其實是兩個，最后一個是合並上面兩個任務。
然后我們就可以在終端來運行上面的作務了，在終端輸入
gulp minify-css運行結果如下圖：在dist/css/目錄下生成了我們壓縮后的css文件。
8. 用webStrom運行
到目前為至，大家基本知道gulp在項目中的運用了，只少基本流程是沒問題了。但是，時刻使用終端還是不怎么方便的，下面我們直接在webStrom中運行上面的gulp任務。
在webStrom中打開gulpfile.js文件 》右鍵選擇 Show Gulp Tasks 》Gulp面板上已經列出gulpfile.js創建的任務 》選中任務運行即可。
是不是非常方便!
小結
看似步驟不少，其實沒幾步，我們是從零開如說起的主要是為了演示整個過程理解其中的原理，對於一般用戶來說，nodejs npm應該早裝好了。
其實我們主要需要做的如下：
-
創建package.json，上面我們使用的 npm init方法，實際操作中我們一般是把之前創建好的package.json直接拿過來，放到項目根目錄下，然后 npm install 一下，這樣我們要用到的gulp插件自動就安裝好了。
-
編寫gulpfile.js,gulp就那么些api，我們常用到的可能就那些插件，所以我們完全可以編寫一個gulpfile.js然后在此基礎上修改一下就行了。