gulp插件

"devDependencies": {
"gulp": "^3.9.1",
"gulp-clean": "^0.3.2",
"gulp-concat": "^2.6.1",
"gulp-connect": "^5.0.0",
"gulp-cssmin": "^0.1.7",
"gulp-imagemin": "^3.1.1",
"gulp-less": "^3.3.0",
"gulp-load-plugins": "^1.5.0",
"gulp-plumber": "^1.1.0",
"gulp-uglify": "^2.0.1",
"lodash": "^4.17.4",
"open": "^0.0.5"
}

var gulp = require('gulp');
var $ = require('gulp-load-plugins')(); // 用来加载其他的插件
var open = require('open');

var app = {
srcPath: 'src/',   //这是我的源目录
devPath: 'build/', //这是开发目录，便于调试
prdPath: 'dist/', //生产部署目录
}

gulp.task('lib', function(){
gulp.src('bower_components/**/*.js') //使用bower安装的依赖，没配置.bowerrc
.pipe(gulp.dest(app.devPath + 'vendor')) //移动插件位置
.pipe(gulp.dest(app.prdPath + 'vendor'))
.pipe($.connect.reload()) //改变后重新加载页面，以下均是
})

gulp.task('html', function() {
gulp.src(app.srcPath + '**/*.html') //所有的html文件照搬到另外两个目录
.pipe(gulp.dest(app.devPath))
.pipe(gulp.dest(app.prdPath))
.pipe($.connect.reload())
})

gulp.task('json', function() {
gulp.src(app.srcPath + 'data/**/*.json') //所有的json文件照搬到另外两个目录
.pipe(gulp.dest(app.devPath + 'data'))
.pipe(gulp.dest(app.prdPath + 'data'))
.pipe($.connect.reload())
})

gulp.task('less', function() { //使用less编写的css
gulp.src(app.srcPath + 'style/index.less') //index.less导入其他less文件
.pipe($.plumber()) //阻止gulp插件发生错误导致进程退出并输出错误日志。
.pipe($.less()) //less转为css
.pipe($.autoprefixer()) //自动添加浏览器前缀
.pipe(gulp.dest(app.devPath + 'css'))
.pipe($.cssmin()) //压缩css
.pipe(gulp.dest(app.prdPath + 'css'))
.pipe($.connect.reload())
})

gulp.task('js', function() {
gulp.src(app.srcPath + 'script/**/*.js')
.pipe($.plumber()) //阻止gulp插件发生错误导致进程退出并输出错误日志。
.pipe($.concat('index.js')) //全部打包为index.js
.pipe(gulp.dest(app.devPath + 'js'))
.pipe($.uglify())// 混淆（丑化）js
.pipe(gulp.dest(app.prdPath + 'js'))
.pipe($.connect.reload())
})

gulp.task('image', function() {
gulp.src(app.srcPath + 'image/**/*')
.pipe(gulp.dest(app.devPath + 'image'))
.pipe($.imagemin()) // 这个插件可能会出问题，要删掉后使用npm重新安装
.pipe(gulp.dest(app.prdPath + 'image'))
.pipe($.connect.reload())
})

gulp.task('build', ['image', 'js', 'less', 'lib', 'html', 'json']); //任务依赖

gulp.task('clean', function() { //这个任务清除文件夹
gulp.src([app.devPath, app.prdPath])
.pipe($.clean());
});

gulp.task('serve', ['build'], function() {
$.connect.server({ //开一个服务器
root: [app.devPath],
livereload: true,
port: 3000
});

open('http://localhost:3000'); //自动打开浏览器

gulp.watch('bower_components/**/*', ['lib']);
gulp.watch(app.srcPath + '**/*.html', ['html']);
gulp.watch(app.srcPath + 'data/**/*.json', ['json']);
gulp.watch(app.srcPath + 'style/**/*.less', ['less']);
gulp.watch(app.srcPath + 'script/**/*.js', ['js']);
gulp.watch(app.srcPath + 'image/**/*', ['image']);
});

gulp.task('default', ['serve']);

gulp.spritesmith

/引入gulp
var gulp=require("gulp"),
spritesmith=require('gulp.spritesmith');

gulp.task('default', function () {
return gulp.src('images/*.png')//需要合并的图片地址
.pipe(spritesmith({
imgName: 'sprite.png',//保存合并后图片的地址
cssName: 'css/sprite.css',//保存合并后对于css样式的地址
padding:5,//合并时两个图片的间距
algorithm: 'binary-tree',//注释1
cssTemplate:"css/handlebarsStr.css"//注释2
}))
.pipe(gulp.dest('dist/'));
});