gulp代码压缩和制作雪碧图

安装nodejs

1. gulp是基于nodejs，需要安装nodejs
2. 在 [ 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. 安装命令：npm install cnpm -g --registry=https://registry.npm.taobao.org
3. 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]