网站优化

图片优化##

这是UI同学给到的图，哈哈，厉害吧，一个banner就1.15M，把他写到网站去，用户得等到睡着，才能打开网页

建议使用 tinypng 压缩力度比较大，视觉效果改变不大,国外网站，打开比较慢

css，js文件合并，压缩##

默认您已经配置好了node环境，并且已经安装好了gulp

npm install gulp gulp-concat gulp-minify-css gulp-rev gulp-rev-collector --save-dev

var gulp = require('gulp');
var concat = require('gulp-concat');                            //- 多个文件合并为一个；
var minifyCss = require('gulp-minify-css');                     //- 压缩CSS为一行；
var rev = require('gulp-rev');                                  //- 对文件名加MD5后缀
var revCollector = require('gulp-rev-collector');               //- 路径替换

gulp.task('concat', function() {                                //- 创建一个名为 concat 的 task
    gulp.src(['pageCss/*.css','css/*.css'])                     //- 需要处理的css文件，放到一个字符串数组里
        .pipe(concat('pageOnline.css'))                         //- 合并后的文件名
        .pipe(minifyCss())                                      //- 压缩处理成一行
        .pipe(rev())                                            //- 文件名加MD5后缀
        .pipe(gulp.dest('./online'))                            //- 输出文件本地
        .pipe(rev.manifest())                                   //- 生成一个rev-manifest.json
        .pipe(gulp.dest('./rev'));                              //- 将 rev-manifest.json 保存到 rev 目录内
});

gulp.task('rev', function() {
    gulp.src(['./rev/*.json', './page/*.html'])                  //- 读取 rev-manifest.json 文件以及需要进行css名替换的文件
        .pipe(revCollector())                                    //- 执行文件内css名的替换
        .pipe(gulp.dest('./application/'));                      //- 替换后的文件输出的目录

});

gulp.task('default', ['concat', 'rev']);