Gulp壓縮報錯處理

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'],
  );
複製程式碼

Gulp壓縮報錯處理

相關文章