- 项目结构
2.压缩打包步骤
- 安装gulp
npm install gulp --save-dev - 在项目根目录下创建一个名为 gulpfile.js 的文件
- 控制台执行命令
npm install gulp-minify-css gulp-jshint gulp-uglify gulp-rename gulp-concat gulp-clean gulp-notify --save-dev - 图片压缩
npm install gulp-imagemin --save-dev - 打包之前,一般需要先清空原来的文件,保证当前文件是最新的
npm install --save-dev gulp-clean - 打包
gulp build
3.gulpfile.js代码
// 引入 gulp及组件 const gulp=require('gulp'); //gulp基础库 const concat=require('gulp-concat'); //合并文件 const fileRename=require('gulp-rename'); //文件重命名 const notify=require('gulp-notify'); //提示 const clean = require('gulp-clean');//清理文件或文件夹 const watch = require('gulp-watch'); const cssUglify=require('gulp-minify-css'); //css压缩 const jsUglify=require('gulp-uglify'); //js压缩 const imageUglify = require('gulp-imagemin');//图片压缩 gulp.task('build', ['clean','copyBQLEditor','copyData','copy','copyHtml','copyFont','copyJson','cssCompress','jsCompress','imageCompress'], function(){console.log("压缩成功");}); // 监听 gulp.task('watch', function () { return w('src/main/webapp/solidbi/BQLEditor/**/*', 'copyBQLEditor'); w('src/main/webapp/solidbi/BQLEditor', 'copyData'); w('src/main/webapp/solidbi/resources/**/*', 'copy'); w('src/main/webapp/solidbi/resources/solidbi/css/*.css', 'cssCompress'); w('src/main/webapp/solidbi/resources/solidbi/js/*.js', 'jsCompress'); w('src/main/webapp/solidbi/resources/solidbi/img/**/*.{png,jpg,gif,ico,jpeg}', 'imageCompress'); w('src/main/webapp/solidbi/*.html', 'copyHtml'); function w(path, task){ watch(path, function () { gulp.start(task); browserSync.reload(); }); } }); //css gulp.task("cssCompress",function () { return gulp.src("src/main/webapp/solidbi/resources/solidbi/css/*.css") //设置css // .pipe(concat("app.css")) //合并css文件 // .pipe(fileRename({ suffix:".min" }))//修改文件名 .pipe(cssUglify())//压缩文件 .pipe(gulp.dest("dist/resources/solidbi/css"))//输出文件目录 .pipe(notify({message:'css task ok'})); //提示成功 }); //js gulp.task("jsCompress",function () { return gulp.src("src/main/webapp/solidbi/resources/solidbi/js/*.js") // .pipe(concat("app.js")) // .pipe(fileRename({ suffix:".min"})) .pipe(jsUglify()) .pipe(gulp.dest("dist/resources/solidbi/js")) .pipe(notify({message:"js task ok"})); //提示 }); //图片 gulp.task("imageCompress",function () { return gulp.src("src/main/webapp/solidbi/resources/solidbi/img/**/*.{png,jpg,gif,ico,jpeg}") .pipe(imageUglify({ optimizationLevel:5,//类型:Number 默认:3 取值范围:0-7(优化等级) progressive:true,//类型:Boolean 默认:false 无损压缩jpg图片 interlaced:true,//类型:Boolean 默认:false 隔行扫描gif进行渲染 multipass:true//类型:Boolean 默认:false 多次优化svg直到完全优化 })) .pipe(gulp.dest("dist/resources/solidbi/img")) }); //font gulp.task("copyFont", function () { return gulp.src('src/main/webapp/solidbi/resources/solidbi/font/**/*') .pipe(gulp.dest('dist/resources/solidbi/font')); }); //json gulp.task("copyJson", function () { return gulp.src('src/main/webapp/solidbi/resources/solidbi/json/*') .pipe(gulp.dest('dist/resources/solidbi/json')); }); // 处理html gulp.task("copyHtml",function () { return gulp.src("src/main/webapp/solidbi/*.html") .pipe(gulp.dest("dist")) }); gulp.task("copy", function () { return gulp.src([ 'src/main/webapp/solidbi/resources/**/*', '!src/main/webapp/solidbi/resources/solidbi/**' ],{nodir: true }).pipe(gulp.dest('dist/resources')); }); gulp.task("copyBQLEditor", function () { return gulp.src("src/main/webapp/solidbi/BQLEditor/**/*") .pipe(gulp.dest("dist/BQLEditor")); }); gulp.task("copyData", function () { return gulp.src("src/main/webapp/solidbi/data/*") .pipe(gulp.dest("dist/data")); }); // //删除Build文件 gulp.task('clean',function(){ gulp.src('dist/',{read: false}) .pipe(clean()); })