參考資料：
一．安裝
前提條件：已安裝nodejs
*所有 綠色帶下劃線均為指令 在命令列下操作
選裝cnpm:
受國內網路影響，設在國外的npm伺服器在國內訪問有可能出現異常，所以可選**團隊構建的cnpm來代替npm指令。
下文所有npm指令用cnpm代替，如果沒有安裝cnpm則把下文cnmp指令換成npm即可。
安裝cnpm指令：npm install cnpm -g --registry=
1.全域性安裝gulp
cnpm install gulp -g
檢視是否正確安裝：gulp -v 出現版本號則正確安裝
2.在開發目錄中新建package.json檔案
使用cd命令進入開發目錄，如沒有特殊說明，以下所有命令都已在開發目錄下執行。
package.json是乙個專案的配置檔案，它是乙個json格式的文字檔案。可以手動建立，也可以使用cnpm init命令自動建立並根據提示填寫資訊。
下面是乙個package.json檔案的例子：
4.建立gulpfile.js檔案
gulpfile.js是gulp專案的配置檔案，負責gulp任務的設定。
下面是乙個gulpfile.js檔案的例子：
//匯入所引用的模組
var gulp = require("gulp"); //基礎庫
var sass = require("gulp-sass"); // sass/css編譯
var uglify = require("gulp-uglify"); //壓縮&重新命名js
var browsersync = require('browser-sync').create(); //自動重新整理
var autoprefixer = require('gulp-autoprefixer');//自動新增css3瀏覽器字首
var changed = require('gulp-changed');//只操作有過修改的檔案 對sass檔案無效
//將所有html檔案整理至dist資料夾下
gulp.task('html',function());
//css預處理附加css3相容字首
gulp.task('sass',function()).on('error',sass.logerror))
.pipe(autoprefixer()
)//編譯後的css排列風格以及報錯輸出
.pipe(gulp.dest('dist/css'))//輸出到開發路徑
.pipe(gulp.dest('src/css'))//輸出到路徑
});//js壓縮&重新命名
gulp.task('script',function()))//使用uglify進行壓縮，並保留部分注釋
.pipe(gulp.dest('dist/js'))//輸出路徑
});//啟動本地測試伺服器並監視檔案改動
gulp.task('serve',function());
gulp.watch("src/js/*.js",['script']).on('change',browsersync.reload);//檢測js改動並壓縮重新整理
gulp.watch("src/sass/*.scss",['sass']).on('change',browsersync.reload);//檢測scss改動並編譯重新整理
gulp.watch("src/*.html",['html']).on('change',browsersync.reload);//檢測html改動並重新整理
});//預設任務
gulp.task('default',['html','script','sass','serve']);
gulpfile.js中的部分語句或函式的解釋：
一．require()
引入上一步已經安裝好的外掛程式，並提供乙個介面去實現外掛程式的命令。
二．gulp.src()
指定該項任務操作的檔案，如gulp.src(『src/**/*.html』)代表該任務操作的檔案為src資料夾及其所有子資料夾下的所有字尾為html的檔案。
三．gulp.task()
建立gulp任務，語法：
gulp.task(『自定義任務名稱』,function(){});
在第二個引數function(){}中寫入該任務需要執行的操作。一般通過pipe()連線多步操作。
四．pipe()
pipe()是需要多個外掛程式協同完成任務的「管道」。
我們從需求說起，例如：
「我想用sass寫css，這就需要gulp-sass外掛程式來編譯scss檔案轉換成css,但我又想在生成css的時候用gulp-autoprefixer外掛程式來補全css3的相容性字首。」
這個時候我們就需要pipe()來連線這兩個任務：
.pipe(sass().on('error',sass.logerror))
.pipe(autoprefixer()
五．gulp.dest()
輸出檔案。
大部分任務的最後一步都是輸出檔案，使用gulp.dest()將已經處理好的檔案輸出到指定目錄。
涉及到具體外掛程式的用法請看開頭的參考資料的鏈結，其中有詳細的使用說明，或者找到node_modules下對應該外掛程式的readme.md說明文件。
5.執行gulp任務
當你完成了gulpfile.js中的任務的建立，就可以執行設定的任務了。
命令格式：
gulp 任務名
如果沒有指定任務名，直接執行gulp 命令，則會執行任務名為default的預設任務。
6.總結
1.安裝nodejs
2.新建package.json檔案
3.全域性和本地安裝gulp
4.安裝gulp外掛程式
5.新建gulpfile.js檔案
6.通過命令列執行gulp任務
ps.以上為個人理解參考資料的總結，如有錯誤，純屬正常，請謹慎參考加實踐。
gulp 入門 使用gulp壓縮css
壓縮 css 可降低 css 檔案大小，提高頁面開啟速度。規律轉換為 gulp 找到css 目錄下的所有 css 檔案，壓縮它們，將壓縮後的檔案存放在dist css 目錄下。一 安裝 gulp minify css 模組 在命令列輸入sudo npm install gulp minify css...
gulp基本入門
gulp是乙個前端自動化構建的乙個工具 1.前置 1.1在使用gulp之前，先安裝node和npm 2.安裝gulp 2.1 npm install gulp 3.打包專案 3.1 新建gulpfile.js 獲取 gulp var gulp require gulp 獲取 uglify 模組 用於...
gulp入門教學
再去安裝 gulp uglify 建立gulpfile.js 建立壓縮後放檔案的位置 a 建立需要壓縮的檔案位置 b 進入gulpfile.js 編輯 var gulp require gulp var uglify require gulp uglify gulp.task script func...