1、gulp重命名及精灵图生成 2、css、js压缩合并

gulpfile-1.js

var gulp = require('gulp');
var concat = require('gulp-concat');
var cleancss = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var autoprefixer = require('gulp-autoprefixer');


gulp.task('css',function(){
	return gulp.src('css/*.css')
		.pipe(concat('style.min.css'))
		.pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
		.pipe(cleancss())
		.pipe(gulp.dest('css/bundle/'));
});
gulp.task('js',function(){
	return gulp.src(['js/jquery.min.js','js/swiper.min.js','js/main.js'])
		.pipe(concat('script.min.js'))
		.pipe(uglify())
		.pipe(gulp.dest('js/bundle/'));
});
gulp.task('listen', function(){
	gulp.watch('./css/*.css',['css']);
	gulp.watch('./js/*.js',['js']);
});

gulp.task('default',['css','js']);

gulpfile-2.js

var gulp = require('gulp');
var buffer = require('vinyl-buffer');
var csso = require('gulp-csso');
var imagemin = require('gulp-imagemin');
var merge = require('merge-stream');
var autoprefixer = require('gulp-autoprefixer');
var spritesmith = require('gulp.spritesmith');
var useref = require('gulp-useref');
var concat = require('gulp-concat');
var concatCss = require('gulp-concat-css');
var cleanCSS = require('gulp-clean-css');

gulp.task('sprite', function() {
    // Generate our spritesheet 
    var spriteData = gulp.src('src/imgs/icon-?*.png').pipe(spritesmith({
        imgName: 'icon_sprite.png',
        cssName: 'icon_sprite.css',
        cssVarMap: function(sprite) {
            sprite.name = sprite.name.replace("icon-", "");
        },
        imgPath: '../imgs/icon_sprite.png'
    }));

    // Pipe image stream through image optimizer and onto disk 
    var imgStream = spriteData.img
        // DEV: We must buffer our stream into a Buffer for `imagemin` 
        .pipe(buffer())
        .pipe(imagemin())
        .pipe(gulp.dest('src/imgs/'));

    // Pipe CSS stream through CSS optimizer and onto disk 
    var cssStream = spriteData.css
        .pipe(gulp.dest('src/css/'));

    // Return a merged stream to handle both `end` events 
    return merge(imgStream, cssStream);
});

gulp.task('html', function(){
	gulp.src('src/*.html')
		.pipe(useref())
		.pipe(gulp.dest('dist'));
});

gulp.task('css', function(){
	gulp.src('src/css/*.css')
		.pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(concatCss("main-bundle.css"))
        .pipe(cleanCSS({compatibility: 'ie8'}))
		.pipe(gulp.dest('dist/css'));
	gulp.src( 'src/vendors/css/*.css')
		.pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(concatCss("vendors-bundle.css"))
        .pipe(cleanCSS({compatibility: 'ie8'}))
		.pipe(gulp.dest('dist/css'));
});

gulp.task('js', function(){
	gulp.src('src/js/*.js')
		.pipe(concat('main-bundle.js'))
		.pipe(gulp.dest('dist/js'));
	gulp.src('src/vendors/js/*.js')
		.pipe(concat('vendors-bundle.js'))
		.pipe(gulp.dest('dist/js'));
});

gulp.task('img', function(){
	gulp.src('src/imgs/*')
		.pipe(imagemin())
		.pipe(gulp.dest('dist/imgs'));
});

gulp.task('default', ['html','css','js', 'img']);

gulpfile-3.js

var gulp = require('gulp');
var buffer = require('vinyl-buffer');
var csso = require('gulp-csso');
var imagemin = require('gulp-imagemin');
var merge = require('merge-stream');
var autoprefixer = require('gulp-autoprefixer');
var spritesmith = require('gulp.spritesmith');
var useref = require('gulp-useref');
var concat = require('gulp-concat');
var concatCss = require('gulp-concat-css');
var cleanCSS = require('gulp-clean-css');

gulp.task('sprite', function() {
    // Generate our spritesheet 
    var spriteData = gulp.src('src/imgs/icon-?*.png').pipe(spritesmith({
        imgName: 'icon_sprite.png',
        cssName: 'icon_sprite.css',
        cssVarMap: function(sprite) {
            sprite.name = sprite.name.replace("icon-", "");
        },
        imgPath: '../imgs/icon_sprite.png'
    }));

    // Pipe image stream through image optimizer and onto disk 
    var imgStream = spriteData.img
        // DEV: We must buffer our stream into a Buffer for `imagemin` 
        .pipe(buffer())
        .pipe(imagemin())
        .pipe(gulp.dest('src/imgs/'));

    // Pipe CSS stream through CSS optimizer and onto disk 
    var cssStream = spriteData.css
        .pipe(gulp.dest('src/css/'));

    // Return a merged stream to handle both `end` events 
    return merge(imgStream, cssStream);
});

gulp.task('html', function(){
	gulp.src('src/*.html')
		.pipe(useref())
		.pipe(gulp.dest('dist'));
});

gulp.task('css', function(){
	gulp.src('src/css/*.css')
		.pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(concatCss("main-bundle.css"))
        .pipe(cleanCSS({compatibility: 'ie8'}))
		.pipe(gulp.dest('dist/css'));
	gulp.src( 'src/vendors/css/*.css')
		.pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(concatCss("vendors-bundle.css"))
        .pipe(cleanCSS({compatibility: 'ie8'}))
		.pipe(gulp.dest('dist/css'));
});

gulp.task('js', function(){
	gulp.src('src/js/*.js')
		.pipe(concat('main-bundle.js'))
		.pipe(gulp.dest('dist/js'));
	gulp.src('src/vendors/js/*.js')
		.pipe(concat('vendors-bundle.js'))
		.pipe(gulp.dest('dist/js'));
});

gulp.task('img', function(){
	gulp.src('src/imgs/*')
		.pipe(imagemin())
		.pipe(gulp.dest('dist/imgs'));
});

gulp.task('default', ['html','css','js', 'img']);

gulpfile-usual.js

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var autoprefixer = require('gulp-autoprefixer');
var useref = require('gulp-useref');

gulp.task('html', function() {
    gulp.src('src/*.html')
        .pipe(useref())
        .pipe(gulp.dest('dist'));
});


gulp.task('css', function() {
    gulp.src('src/css/main.css')
        .pipe(concat('main.css'))
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(gulp.dest('dist/css/'));

    gulp.src('src/vendors/css/*.css')
        .pipe(concat('vendors.min.css'))
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(gulp.dest('dist/vendors/css'));

    return gulp
});

gulp.task('js', function() {
    return gulp.src('src/vendors/js/*.js')
        .pipe(concat('vendors.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist/vendors/js'));
});

gulp.task('img', function() {
    gulp.src('src/imgs/*')
        .pipe(gulp.dest('dist/imgs'));
});

gulp.task('listen', function() {
    gulp.watch('./css/*.css', ['css']);
    gulp.watch('./js/*.js', ['js']);
});

gulp.task('default', ['html', 'css', 'js', 'img']);

gulpfile.js

var fs = require('fs');
var path = require('path');
var gulp = require('gulp');
var merge = require('merge-stream');
var imagemin = require('gulp-imagemin');
var buffer = require('vinyl-buffer');
var spritesmith = require('gulp.spritesmith');


// 重命名文件
gulp.task('rename', function() {
    // 要重命名文件所在文件夹路径
    var dirPath = 'src/images';
    // 要重命名的文件名匹配
    var regExp = new RegExp(/icon-.*/);

    fs.readdir(dirPath, function(err, files) {
        if (err) console.log(err);
        files.forEach(function(file) {
            if (!regExp.test(file)) {
                return;
            }
            // 输出文件名
            var outputFileName = 'icon-' + parseInt(Math.random() * 1000000);
            var extName = path.extname(path.resolve(__dirname, dirPath, file));
            fs.rename(path.resolve(__dirname, dirPath, file), path.resolve(__dirname, dirPath, outputFileName) + extName, function(err) {
                if (err) console.log(err);
            })
        });
        console.log('rename task has done');
    })
})

// 精灵图生成
gulp.task('sprite', function() {
    // 匹配需要处理的图片
    var imgFileReg = 'src/images/icon-?*.png';
    // 输出图片文件夹路径
    var outputImgDir = 'src/images/'
        // 输出精灵图文件名
    var outputImgName = 'icon_sprite.png';
    // 输出CSS文件夹路径
    var outputCssDir = 'src/css/';
    // 输出CSS文件名称
    var outputCssName = 'icon_sprite.css';

    // 定义生成规则
    var spriteData = gulp.src(imgFileReg).pipe(spritesmith({
        imgName: outputImgName,
        cssName: outputCssName,
        cssVarMap: function(sprite) {
            // 默认输出的css类名是icon-[文件名]，由于文件名本身含有icon，所以在此替换掉
            sprite.name = sprite.name.replace("icon-", "");
        }
    }));

    // 输送图片流进入磁盘 
    var imgStream = spriteData.img
        // DEV: 将图片流转换成二进制数据进行压缩
        .pipe(buffer())
        .pipe(imagemin())
        .pipe(gulp.dest(outputImgDir));

    // 输送css流进入磁盘
    var cssStream = spriteData.css
        .pipe(gulp.dest(outputCssDir));

    // 返回“合并流”去处理各自的end事件
    return merge(imgStream, cssStream);
});