gulp 提高页面加载速度

gulp 提高页面加载速度，主要通过html清理、js压缩、css压缩减少html页面的体积来降低页面加载速度。

静态文件压缩

静态文件包括:html、js、css、image，通过压缩可以减少文件体积。
1、安装gulp、gulp-htmlclean、gulp-htmlmin、gulp-minify-css、gulp-imagemin、gulp-gulify。

npm install gulp --save
npm install gulp-htmlclean --save
npm install gulp-htmlmin --save
npm install gulp-minify-css --save
npm install gulp-imagemin --save
npm install gulp-gulify --save

2、创建gulp任务流程文件，gulp默认的文件名为gulpfile.js，也可以使用–gulpfile 手动指定一个 gulpfile 的路径。

var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');

var imagemin = require('gulp-imagemin');

/**
*compress the css file
*/
gulp.task('minify-css', function() {
    return gulp.src('./public/**/*.css')
    .pipe(minifycss())
    .pipe(gulp.dest('./public'));
});

/**
* compress the html file
*/
gulp.task('minify-html', function() {
    return gulp.src('./public/**/*.html')
            .pipe(htmlclean())
            .pipe(htmlmin({
                //removeComments: true,
                //collapseWhitespace: true,
                //removeEmptyAttributes: true,
                removeScriptTypeAttributes: true,
                removeStyleLinkTypeAttributes: true,
                minifyJS: true,
                minifyCSS: true,
                minifyURLs: true
            }))
            .pipe(gulp.dest('./public'));
});

/**
* compress the public js dir
*/
gulp.task('minify-js', function() {
    return gulp.src('./public/**/*.js')
            .pipe(uglify())
            .pipe(gulp.dest('./public'));
});

/**
* compress the image
*/
gulp.task('image', function() {
    gulp.src('./photos/*.*')
    .pipe(imagemin({
        progressive: true
    }))
    .pipe(gulp.dest('dist/images'));
});


gulp.task('default', ['minify-css', 'minify-html', 'minify-js', 'image']);

3、执行gulp即可把任务流程都走一遍，把css、js、image、html压缩、混淆。