配置gulp 压缩HTML、css、js、图片

1、安装gulp  npm install -g gulp

2、创建一个项目文件夹, 当前项目文件夹下输入命令npm init ，配置package.json文件, 这一部分看情况自己决定是否填, 不想填也可以, 直接按回车 

3、本地安装npm install gulp --save-dev

4、配置gulpfile.js

var gulp = require('gulp'),
    minifycss = require('gulp-minify-css'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    minifyHtml =  require('gulp-minify-html'),
    tingpng = require('gulp-tinypng'),
    del = require('del');
//压缩css
gulp.task('minify_css', function () {
    var cssSrc = ['wap/css/*.css'];
    return gulp.src(cssSrc)      //压缩的文件
        // .pipe(concat('all.css'))    //合并所有css到all.css
        //.pipe(gulp.dest('main/css'))   //输出文件夹
        //.pipe(rename({suffix: '.min'}))
        .pipe(minifycss())
        .pipe(gulp.dest('main/css')); //执行压缩
});
//压缩js
gulp.task('minify_js',function() {
    var jsSrc = ['wap/js/*.js'];
    return gulp.src(jsSrc)
        // .pipe(concat('all.js'))    //合并所有js到all.js
        //.pipe(gulp.dest('main/js'))    //输出all.js到文件夹
        //.pipe(rename({suffix: '.min'}))   //rename压缩后的文件名
        .pipe(uglify())    //压缩
        .pipe(gulp.dest('main/js'));  //输出
});
// //压缩html
gulp.task('minify_html',function() {
    var htmlSrc = ['wap/*.html'];
    return gulp.src(htmlSrc)
        .pipe(minifyHtml())    //压缩
        .pipe(gulp.dest('main'));  //输出
});
//压缩图片
gulp.task('minify_image', function () {
    gulp.src(['wap/images/**/*.*','!wap/images/**/*.svg*','!wap/images/**/*.ico*'])
        .pipe(tingpng('TYfeoLoEqjUql6XB_yH87tL8VaeoWQb8'))
        //.pipe(rename({suffix:"_min"}))
        .pipe(gulp.dest('main/images'));
});
//执行压缩前，先删除以前压缩的文件
gulp.task('clean', function() {
    return del(['main/*.html', 'main/css/*.css', 'main/js/*.js'])
});
//默认任务
gulp.task('default', function(){
    gulp.run('clean','minify_html','minify_css','minify_js');
    //gulp.run('minify_image');
});
//监听变化
gulp.task('watch',function(){
    gulp.watch('wap/*.html',['minify_html']);
    gulp.watch('wap/css/*.css',['minify_css']);
    gulp.watch('wap/js/*.js',['minify_js']);
    gulp.watch(['wap/images/**/*.*','!wap/images/**/*.svg*','!wap/images/**/*.ico*'],['minify_image']);
});

可以压缩HTML、css、js、图片压缩、合并文件