gulp 压缩es6
因为项目没有让使用webpack,没办法只能使用gulp压缩打包,相信大家已经看过很多gulp打包es6,但是按照网上的总是报错
第一个
GulpUglifyError: unable to minify JavaScript
第二个
Error: Cannot find module '@babel/core'
先说第一个,是因为没有gulp-babel,
第二个,是因为没有按照官网把babel升级到7以上
npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill
这样写就可以了
const gulp = require('gulp'),
htmlmin = require('gulp-htmlmin'),
uglify = require('gulp-uglify'),
cssmin = require('gulp-clean-css'),
clean = require('gulp-clean'),
babel = require('gulp-babel'),
imagemin = require('gulp-imagemin'),
runSequence = require('run-sequence');
gulp.task('clean',function(){
return gulp.src('es6/**',{read:false})
.pipe(clean());
});
// html压缩
gulp.task('htmlmin',()=>{
gulp.src('./webapp/html/**/*.html')
.pipe(htmlmin({
collapseWhitespace: true,
removeComments: true
}))
.pipe(gulp.dest('dist/html'))
});
// 压缩js
gulp.task('uglify',() =>{
gulp.src('./webapp/js/**/*.js')
.pipe(babel({
presets: ["env"]
// minified: true
}))
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
});
// 压缩css
gulp.task('cssmin',() =>{
gulp.src('./webapp/css/**/*.css')
.pipe(cssmin({
advanced:false,
compatibility: 'ie7',
keepBreaks: false,
}))
.pipe(gulp.dest('dist/css'))
})
// 压缩image
gulp.task('imagemin',() =>{
gulp.src('./webapp/img/*.{png,jpg,gif,ico}')
.pipe(imagemin())
.pipe(gulp.dest('dist/img'))
})
gulp.task("default",['htmlmin','uglify','cssmin','imagemin'],
);