使用gulp优化css、js、html
使用ImageMagick优化图片
实现静态资源的优化!
Part 1 Gulp 安装gulp
gulp,建议全局
安装gulp依赖
不建议使用gulp提供的gulp-imagemin插件,压缩图片
1 npm install gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify --save
新建gulpfile.js文件
在根目录下,即public
文件所在目录
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 // 引入需要的模块 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' ); // 压缩public目录下所有html文件, minify-html是任务名, 设置为default,启动gulp压缩的时候可以省去任务名 gulp.task('minify-html' , function () { return gulp.src('./public/**/*.html' ) // 压缩文件所在的目录 .pipe(htmlclean()) .pipe(htmlmin({ removeComments: true , minifyJS: true , minifyCSS: true , minifyURLs: true , })) .pipe(gulp.dest('./public' )) // 输出的目录 }); // 压缩css gulp.task('minify-css' , function () { return gulp.src('./public/**/*.css' ) .pipe(minifycss({ compatibility: 'ie8' })) .pipe(gulp.dest('./public' )); }); // 压缩js gulp.task('minify-js' , function () { return gulp.src(['./public/**/.js' ,'!./public/js/**/*min.js' ]) .pipe(uglify()) .pipe(gulp.dest('./public' )); }); // 默认任务 /* gulp.task('default' , [ 'minify-html' ,'minify-html1' ,'minify-css' ,'minify-js' ]); */ // gulp 4.0 适用的方式 gulp.task('default' , gulp.parallel('minify-html' ,'minify-css' ,'minify-js' //build the website ));
完成,执行
使用gulp命令,即可执行优化
用来批量压缩图片
安装ImageMagick 1 yum install ImageMagick -y
批量压缩
仅供参考,你可以执行添加其它参数和其它im支持的图片格式
1 find ./public/img/ -regex '.*\(jpg\|JPG\|png\|PNG\|jpeg\)' -size +200k -print -exec convert -quality 85 {} {} \;
说明: find命令在 ./public/img/目录下用 正则表达式查找所有jpg…结尾的 大小超过200kb的文件 一一打印(相当于显示输出)然后 exec执行 convert命令(ImageMagick)参数是quality 85,即质量压缩到原来的85%。
更多参数
Part 3 如何一条命令实现优化和部署?
详情请看之前发布的快捷脚本,#脚本2.0版本