安裝nodejs

1. gulp是基於nodejs，需要安裝nodejs

檢視nodejs版本

1. 安裝完nodejs後，在命令列中（window + r 輸入cmd回車）輸入node -v檢視安裝的nodejs版本，出現版本號，說明剛剛已正確安裝nodejs。
2. cd定位到專案目錄，用法：cd + 路徑 ；也可以直接在專案檔案位址列中輸入cmd，回車；如圖
   

npm介紹

1. 在命令列中輸入npm -v檢視npm的版本號，npm用於node外掛管理（安裝、解除安裝、管理依賴等），它是在安裝nodejs時一同安裝的。
2. 在cmd控制檯中：
   安裝外掛：npm insatll ‘外掛名稱’ -g --
   save-dev
   解除安裝外掛：npm uninstall ‘外掛名稱’ -g --save-dev
   刪除全部外掛：藉助rimraf：npm install rimraf -g 用法：rimraf node_modules
   更新外掛：npm update ‘外掛名稱’ -g --save-dev
   更新全部外掛：npm update --save-dev
   檢視已安裝目錄：npm list

安裝淘寶的cnpm

1. 因為npm安裝外掛是從國外伺服器下載，受網路影響大，可能出現異常；所以我們可以選裝淘寶的cnpm。
2. cnpm和npm用法完全一致，只需將命令中npm換為cnpm即可。

新建package.json檔案

在cmd控制檯中

- 安裝gulp和雪碧圖需要的外掛：cnpm install --save-dev gulp.spritesmith

安裝gulp

1. 安裝gulp目的是為了通過她執行gulp任務；
2. 安裝命令 ：命令提示符執行cnpm install gulp -g 全域性安裝；cnpm install gulp --save-dev 本地安裝
3. 檢視版本號：檢視是否正確安裝：命令提示符執行gulp -v，出現版本號即為正確安裝。

新建gulpfile.js

var gulp=require('gulp'),  //gulp基礎庫
 

    spritesmith=require('gulp.spritesmith'),  //製作雪碧圖外掛
    minifycss=require('gulp-minify-css'),   //css壓縮
    concat=require('gulp-concat'),   //合併檔案
    uglify=require('gulp-uglify'),   //js壓縮
    rename=require('gulp-rename'),   //檔案重新命名
    notify=require('gulp-notify');  //提示
//雪碧圖
gulp.task('sprite',function(){  
     gulp.src('image/*.png')  
        .pipe(spritesmith({  
            imgName:'sprite.png',  
            cssName:'css/index.css',  
            padding:5,  
            algorithm:'binary-tree'  
        }))  
        .pipe(gulp.dest('123/')) //輸出目錄
}) 
//css壓縮
gulp.task('minifycss',function(){
    gulp.src('css/*.css')      //設定css
    .pipe(concat('main.css'))      //合併後css檔名，沒有壓縮
    .pipe(gulp.dest('dist/styles'))           //設定輸出路徑
    .pipe(rename({suffix:'.min'}))         //修改檔名
    .pipe(minifycss())                    //壓縮檔案
    .pipe(gulp.dest('dist/styles'))            //輸出檔案目錄
    .pipe(notify({message:'css task ok'}));   //提示成功
});
//JS壓縮
gulp.task('minifyjs',function(){
    gulp.src(['js/*.js'])  //選擇合併的JS
    .pipe(concat('alert.js'))   //合併後js檔名，沒有壓縮
    .pipe(gulp.dest('dist/js'))         //輸出
    .pipe(rename({suffix:'.min'}))     //重新命名
    .pipe(uglify())                    //壓縮
    .pipe(gulp.dest('dist/js'))            //輸出 
    .pipe(notify({message:"js task ok"}));    //提示
});
gulp.task('default',function(){
    gulp.start('minifycss','minifyjs','sprite');
});

引用了gulp和spritesmith這個外掛，接著新建名為sprite的任務，我們需要合成雪碧圖的檔案在src的images資料夾裡，“*”為萬用字元，表示這個資料夾裡所有.png格式的檔案都會被使用。然後，我們把這個任務放到通道（gulp機制）裡，imgName為生成圖的名稱，css為對應生成的css檔案，padding表示合成時兩個圖片的間距。
algorithm有五個可選值，分別為top-down、left-right、diagonal、alt-diagonal、binary-tree，表現形式如下：

top-down	left-right	diagonal	alt-diagonal	binary-tree

在命令列中執行gulp命令

把生成的檔案放到dist資料夾下(生成的圖片sprite.png和css檔案)，效果如下：

[原文1]
[原文2]