安裝nodejs

gulp是基於nodejs，需要安裝nodejs
在 [ nodejs官網 ]下載並安裝nodejs

查看nodejs版本

安裝完nodejs後，在命令行中（window + r 輸入cmd回車）輸入node -v查看安裝的nodejs版本，出現版本號，說明剛剛已正確安裝nodejs。
cd定位到項目目錄，用法：cd + 路徑；也可以直接在項目文件地址欄中輸入cmd，回車；如圖

npm介紹

在命令行中輸入npm -v查看npm的版本號，npm用於node插件管理（安裝、卸載、管理依賴等），它是在安裝nodejs時一同安裝的。
在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

因爲npm安裝插件是從國外服務器下載，受網絡影響大，可能出現異常；所以我們可以選裝淘寶的cnpm。
安裝命令：npm install cnpm -g --registry=https://registry.npm.taobao.org
cnpm和npm用法完全一致，只需將命令中npm換爲cnpm即可。

新建package.json文件

在cmd控制檯中

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

安裝gulp

安裝gulp目的是爲了通過她執行gulp任務；
安裝命令：命令提示符執行cnpm install gulp -g 全局安裝；cnpm install gulp --save-dev 本地安裝
查看版本號：查看是否正確安裝：命令提示符執行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，表現形式如下：