1. 安裝全域性gulp環境:

$ npm install --global gulp

2. 安裝gulp外掛，gulp外掛所屬devDependencies下面

$ npm install --save-dev gulp

3. 在專案的根目錄下新建一個gulpfile.js檔案:

var gulp = require('gulp');


gulp.task('default', function() {
  // place code for your default task here
});

4.執行gulp:

$ gulp

以下是常用的外掛:
編譯Sass (gulp-ruby-sass)
Autoprefixer (gulp-autoprefixer)
縮小化(minify)CSS (gulp-minify-css)
JSHint (gulp-jshint)
拼接 (gulp-concat)
醜化(Uglify) (gulp-uglify)
圖片壓縮 (gulp-imagemin)
即時重整(LiveReload) (gulp-livereload)
清理檔案 (gulp-clean)
圖片快取，只有更改過得圖片會進行壓縮 (gulp-cache)
更動通知 (gulp-notify)

對應在gulpfile.js中的配置：

var gulp = require('gulp'),  
    sass = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    rename = require('gulp-rename'),
    clean = require('gulp-clean'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload');
 

如果希望和Grunt一樣載入所有已安裝的外掛可以訪問下面網址：https://github.com/jackfranklin/gulp-load-plugins

載入所有外掛的外掛就是它：gulp-load-plugins。 

載入後的使用方式和grunt有些小區別

PS:在使用gulp的外掛時如果外掛名有如：gulp-minify-css 這樣名字在gulpfile檔案中配置使用的方式是minifyCss，去掉中橫線，後面的第一個字母大寫

配上gulpfile.js檔案：

'use strict';
 
var gulp = require('gulp');

//載入package.json檔案裡的devDependencies中的所有外掛
var plugins = require('gulp-load-plugins')();
 
gulp.task('sass', function () {
  gulp.src('./app/sass/**/*.scss')
    .pipe(plugins.sass({ style: 'expanded' }))
    .pipe(plugins.autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest('dist/assets/css'))
    .pipe(plugins.rename({suffix: '.min'}))
    .pipe(plugins.minifyCss())
    .pipe(gulp.dest('dist/assets/css'))
    .pipe(plugins.notify({ message: 'Styles task complete' }));
});
 
gulp.task('sass:watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});
 

配置package.json檔案：

{
  "name": "gulsp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "gulp": "^3.9.0"
  },
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-autoprefixer": "^3.0.2",
    "gulp-cache": "^0.3.0",
    "gulp-clean": "^0.3.1",
    "gulp-concat": "^2.6.0",
    "gulp-imagemin": "^2.3.0",
    "gulp-jshint": "^1.11.2",
    "gulp-livereload": "^3.8.1",
    "gulp-load-plugins": "^0.10.0",
    "gulp-minify-css": "^1.2.1",
    "gulp-notify": "^2.2.0",
    "gulp-rename": "^1.2.2",
    "gulp-ruby-sass": "^2.0.4",
    "gulp-sass": "^2.0.4",
    "gulp-uglify": "^1.4.2"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "gulp"
  ],
  "author": "bxcn",
  "license": "ISC"
}
 

以上操作只是簡單跑一下gulp流程，浮淺的很，牛人可忽略此文章，呵呵！