2018-11-20

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'],
  );