1、安裝node

2、安裝npm

以上測試安裝是否成功輸入（node -v或者npm -v）

3,安裝gulp  執行npm install gulp -g

測試安裝是否成功輸入（gulp -v）

4、新建package.json檔案到專案檔案根目錄

因為package.json是基於node.js專案必不可少的配置檔案，用於存放專案根目錄的普通json檔案重點內容

方法是進入專案檔案中執行npm init來新建package.json檔案

5.本地安裝gulp

全域性安裝gulp是為了執行gulp任務，本地安裝gulp是為了呼叫gulp外掛的功能進入你的專案檔案路徑中，執行npm install gulp --save-dev

6.安裝gulp-sass外掛

在專案檔案路徑後 ，執行npm install gulp-sass --save-dev

7.新建gulpfile.js

gulpfile.js是gulp的配置檔案，放於根目錄中。

示例內容：匯入你需要的工具包 require('node_module裡對應的模組')

var gulp =require('gulp'),

      sass=require('gulp-sass');

//sass任務

gulp.task('sass',function(){

    return gulp.src('src/css/test.scss')             //獲取該任務需要的檔案

    .pipe(sass())                                                //該任務呼叫的模組

    .pipe(gulp.dest('src/css'));                          //將在src/css資料夾中生產test.css

})

//預設任務

gulp.task('default',['sass','watchl']);

//監聽檔案

gulp.task('watchl',function(){

return gulp.watch('src/css/test.scss',['sass']);

//監聽src/css/test.scss檔案，修改時自動執行sass任務

})

註釋：我們要告訴他要執行那些任務首先要知道自己專案需要那些任務

例：

1.檢查js

2.編譯sass(less)檔案

3.合併js

4.壓縮並重命名合併後的js

5.自動重新整理頁面

npm install gulp-jshint --save-dev jshint 安裝失敗問題:解決方案: npm install --save-dev jshint 

gulp-jshint npm install gulp-sass --save-dev 編譯sass檔案

 npm install gulp-concat --save-dev 合併js 

npm install gulp-uglify --save-dev 通過UglifyJS來壓縮JS檔案

. npm install gulp-rename --save-dev 重新命名檔案的外掛，當要把一個檔案儲存為不同版本時可以使用。比如在需要一個style.css同時你有需要一個style.min.css 

npm install gulp-autoprefixer --save-dev 使用Autoprefixer來補全瀏覽器相容的css。

 gulp-minify-css 壓縮css,最終是呼叫clean-css 參考：http://www.ydcss.com/archives/41

gulp-gzip 壓縮zip 

gulp-imagemin 壓縮png/jpg/git/svg 格式圖片檔案

gulp-util gulp常用的工具庫在安裝gulp時預設已經安裝，可以直接使用

gulp-clean 清理檔案

3.2 gulp只有五個方法:task run watch src dest

檔案配置如下也就是gulpfile.js

//引入gulp，專案檔案中安裝的gulp的引入方式var gulp =require('gulp');//引入元件var jshint =require("gulp-jshint");var gutil =require("gulp-util");var sass=require("gulp-sass");var concat =require("gulp-concat");var uglify =require("gulp-uglify");var rename =require("gulp-rename");var path =require("path");//var webpack = require("webpack");//var WebpackDevServer = require("webpack-dev-server");//var webpackConfig = require("./webpack.config.js");//也可以是某個特定目錄下(比如:config)的檔案、vardel=require("del");//你也許會想要在編譯檔案之前刪除一些檔案 gulp.task('clean',function(cb){returndel(['build/**/*'], cb);});//檢查指令碼 gulp.task('lint',function(){ gulp.src('./src/javascript/**/*.js').pipe(jshint()).pipe(jshint.reporter('default'));});//編譯sass//sass 任務會編譯scss/目錄下的scss檔案，並把編譯完成的css檔案儲存到/css目錄中 gulp.task('sass',function(){ gulp.src("./src/scss/**/*.scss").pipe(sass({outputStyle:'compact'})).pipe(gulp.dest("./build/css"));});//合併，壓縮檔案//scipts 任務會合並js 目錄下的所有js檔案並輸出到dist目錄中，然後gulp會重新命名。壓縮合並的檔案，也輸出到dist/目錄 gulp.task('scripts',function(){ gulp.src('./src/javascript/**/*.js').pipe(concat('all.js')).pipe(gulp.dest('./dest')).pipe(rename("all.min.js")).pipe(uglify()).pipe(gulp.dest("./build"))});//這時，我們建立了一個基於其他任務的default任務。//使用.run()方法關聯和執行我們上面定義的任務，使用.watch() 方法去堅挺制定目錄的檔案變化,當有檔案變化時，會執行回撥定義的其他任務。 gulp.