Gulp 是用 nodejs 寫的一個前端構建工具，我現在主要拿來自動編譯 coffee、less 以及壓縮圖片、同步檔案、清理多餘檔案等工作。 gulp 使用 stream 方式處理內容，主要使用的幾個辦置方法如下:

npm init命令初始化當前資料夾後，在當前資料夾新建gulpfile.js檔案。當前目錄下的所有操作流都在gulpfile.js檔案中定義

gulp.src: 來源

gulp.dest: 目標

gulp.pipe: 管道

gulp.watch: 監視檔案系統，檔案改動時自動處理

gulp.task: 任務

gulp-uglify （JS壓縮）

gulp-uglify安裝:

npm install --save-dev gulp-uglify

gulp-uglify用來壓縮js檔案，使用的是uglify引擎。

var gulp = require('gulp');  //載入gulp
var uglify = require('gulp-uglify');  //載入js壓縮

// 定義一個任務 compass
gulp.task('compass', function () {
    gulp.src(['js/*.js','!js/*.min.js'])  //獲取檔案，同時過濾掉.min.js檔案
        .pipe(uglify())
        .pipe(gulp.dest('javascript/'
 
));  //輸出檔案
});

小技巧，第二個引數’！js/*.min.js’是用來過濾掉字尾為min.js，！感嘆號為排除模式

gulp-minify-css（CSS壓縮）

gulp-minify-css安裝：

npm install --save-dev gulp-minify-css

可以使用它來壓縮CSS檔案
var gulp = require(‘gulp’);
var minify = require(‘gulp-minify-css’);

gulp.task('cssmini', function () {
    gulp.src(['css/*.css', '!css/*.min.css'])  //要壓縮的css
        .pipe(minify())
        .pipe(gulp.dest('buildcss/'));
});
 

gulp-minify-html（html壓縮）

gulp-minify-html安裝

npm install --save-dev gulp-minify-html

可以使用它來壓縮html檔案.

var gulp = require('gulp');
var htmlmini = require('gulp-minify-html');

gulp.task('htmlmini', function () {
    gulp.src('*.html')
        .pipe(htmlmini())
        .pipe(gulp.dest('minihtml'));
})

gulp-jshint（JS程式碼檢查）

gulp-jshint安裝：

npm install --save-dev gulp-jshint

可以用來檢查JS的程式碼

var gulp = require('gulp');
var jshint = require("gulp-jshint");

gulp.task('jsLint', function () {
    gulp.src('js/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter()); // 輸出檢查結果
});

gulp-concat（檔案合併）

gulp-concat安裝：

npm install --save-dev gulp-concat

合併CSS與JS檔案，減少http請求。

var gulp = require('gulp');
var concat = require("gulp-concat");

gulp.task('concat', function () {
    gulp.src('js/*.js')  //要合併的檔案
    .pipe(concat('all.js'))  // 合併匹配到的js檔案並命名為 "all.js"
    .pipe(gulp.dest('dist/js'));
});

gulp-less（編譯Less）

gulp-less安裝：

npm install --save-dev gulp-less

把less檔案轉換為css。

var gulp = require('gulp'),
    less = require("gulp-less");

gulp.task('compile-less', function () {
    gulp.src('less/*.less')
    .pipe(less())
    .pipe(gulp.dest('dist/css'));
});

gulp-sass（編譯Sass）

gulp-sass安裝：

npm install --save-dev gulp-sass

把scss檔案轉換為sass檔案。

var gulp = require('gulp'),
    sass = require("gulp-sass");

gulp.task('compile-sass', function () {
    gulp.src('sass/*.sass')
    .pipe(sass())
    .pipe(gulp.dest('dist/css'));
});

gulp-imagemin（壓縮圖片）

gulp-imagemin安裝：

npm install --save-dev gulp-imagemin

可以使用gulp-imagemin的外掛來壓縮jpg、png、gif等圖片。（imagemin也是有外掛的，是基於imagemin產生的外掛，所以字首是imagenin開頭）

壓縮png外掛-imagemin-pngquant安裝：

$npminstall--save-devimagemin-pngquant

gulpfile.js:

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant'); //png圖片壓縮外掛

gulp.task('default', function () {
    return gulp.src('src/images/*')
        .pipe(imagemin({
            progressive: true,
            use: [pngquant()] //使用pngquant來壓縮png圖片
        }))
        .pipe(gulp.dest('dist'));
});

gulp-imagemin的使用比較複雜一點，它本身也有很多外掛（更多imagemin外掛），這裡只是簡單介紹一下，要想壓縮不同格式的圖片，必須對應安裝不同的外掛，這裡只安裝了pngquant外掛。按照nodejs的模組化思想，每個require只包含一個功能，這樣就可以達到按需載入的目的。

gulp-livereload（自動重新整理）

gulp-livereload安裝：

npm install --save-dev gulp-livereload

當代碼變化時，它可以幫助我們自動重新整理頁面，該外掛最好配合谷歌瀏覽器，且要安裝livereload chrome extension擴充套件外掛，否則無效。

var gulp = require('gulp'),
    less = require('gulp-less'),
    livereload = require('gulp-livereload');

gulp.task('less', function() {
  gulp.src('less/*.less')
    .pipe(less())
    .pipe(gulp.dest('css'))
    .pipe(livereload());
});

gulp.task('watch', function() {
  livereload.listen(); //要在這裡呼叫listen()方法
  gulp.watch('less/*.less', ['less']);  //監聽目錄下的檔案，若檔案發生變化，則呼叫less任務。
});