gulp压缩js报错，也许你需要用到babel

今天在使用gulp 压缩js时，遇到了这样的错误：

从网上找了找原因，有网友说：

   js不知道哪里用到了es6语法，为了解决压缩js报错抱着试一试的心态，步骤如下：

1.全局安装Babel。
  npm install -g babel-cli  
  npm install -g babel-cli --save-dev  

2.新建配置文件是.babelrc，放在与build目录同级

 

3.安装 babel核心包 和 ES2015转码规则
  npm install --save-dev babel-core  babel-preset-es2015

4.将规则加入到.babelrc文件中    
    {  
        "presets": [  
          "es2015" 
        ],  
        "plugins": []  
      }  
5.  安装gulp-babel
      npm install --save-dev gulp-babel

6.gulp.prod.js中 配置babel

 

const gulp = require('gulp');
const autoprefixer = require('gulp-autoprefixer');
const rename = require('gulp-rename');
const mincss = require('gulp-minify-css');
const minhtml = require('gulp-minify-html');
const minimg = require('gulp-imagemin');
const uglify = require('gulp-uglify');
const babel = require('gulp-babel');
// const jshint = require('gulp-jshint');
const livereload = require('gulp-livereload');
const concat = require('gulp-concat');
const config = require('./gulpfile.config');
// 开发环境下

function prod(){
   //html
    gulp.task('html', function(){
        return gulp.src(config.html.src)
            .pipe(minhtml())
            .pipe(gulp.dest(config.html.dist));
    });
    //assets
    gulp.task('assets',function(){
        return gulp.src(config.assets.src)
            .pipe(gulp.dest(config.assets.dist));
    });
    //js
    gulp.task('scripts',function(){
        return gulp.src(config.js.src)
            // .pipe(gulp.dest(config.js.dist))
            .pipe(babel())
            .pipe(uglify())
            .pipe(gulp.dest(config.js.dist))
    });
    //plugins
    gulp.task('plugins',function(){
        return gulp.src(config.plugins.src)
            .pipe(gulp.dest(config.plugins.dist))
    });
    //utils,全是js
    gulp.task('utils',function(){
        return gulp.src(config.utils.src)
            // .pipe(gulp.dest(config.utils.dist))
            .pipe(babel())
            .pipe(uglify())
            .pipe(gulp.dest(config.utils.dist));
    })
    //入口文件,全是HTML
    gulp.task('entries',function(){
        return gulp.src(config.entries.src)
            .pipe(minhtml())
            .pipe(gulp.dest(config.entries.dist))
    })
    //假数据
    gulp.task('json',function(){
        return gulp.src(config.json.src)
            .pipe(gulp.dest(config.json.dist))

    })
    //
    gulp.task('prod',['json','html','scripts','entries','assets','plugins','utils'],function(){
       
    })
}
module.exports = prod

gulp.config.js内容：

const gulp = require('gulp');
const src_dir = './src/'; //源文件目录
const dist_dir = './dist/';//压缩文件目录
const dist_files = dist_dir + '**';// 目标路径下的所有文件

const config = {
    src: src_dir,
    dist: dist_dir,
    dist_files: dist_files,
    html: {
        src: src_dir + 'pages/**',
        dist: dist_dir +'pages',
    },
    // html: {
    //     src: src_dir + 'pages/property/construction/**',
    //     dist: dist_dir +'pages/property/construction',
    // },
    assets: {
        src: src_dir+ 'assets/**',
        dist: dist_dir+'assets'
    },
    js:{
        src:src_dir +'js/**',
        dist:dist_dir+'js'
    },
    // js:{
    //     src:src_dir +'js/property/construction/**',
    //     dist:dist_dir+'js/property/construction'
    // },
    indexjs:{
        src:src_dir +'js/index/**',
        dist:dist_dir+'js/index'
    },
    img:{
        src:src_dir+ 'assets/images/*',
        dist: dist_dir+'assets/images/*'
    },
    utils:{
        src:src_dir+ 'utils/**',
        dist: dist_dir+'utils'
    },
    plugins:{
        src:src_dir+ 'plugins/**',
        dist: dist_dir+'plugins'
    },
    entries:{
        src:src_dir+ '*.html',
        dist:dist_dir
    },
    json:{
        src:src_dir+ 'mock-data/*',
        dist: dist_dir+'mock-data'
    }

};
//
module.exports = config ;

 

.babelrc内容

{
  "presets": [
    "es2015"
  ],
  "plugins": []
}

package.json内容

{
  "name": "gspark-webclient",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "gulp dev",
    "clean": "rimraf dist",
    "build": "gulp prod"
  },
  "repository": {
    "type": "git",
    "url": "http://192.168.66.75/gspark/gspark-webclient.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "as": "^0.4.1",
    "babel-core": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^4.0.0",
    "gulp-babel": "^7.0.0",
    "gulp-clean-css": "^3.9.0",
    "gulp-concat": "^2.6.1",
    "gulp-imagemin": "^3.4.0",
    "gulp-jshint": "^2.0.4",
    "gulp-livereload": "^3.8.1",
    "gulp-load-plugins": "^1.5.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-minify-html": "^1.0.6",
    "gulp-uglify": "^3.0.0",
    "http-proxy-middleware": "^0.17.4",
    "root": "^3.1.0"
  },
  "dependencies": {
    "browser-sync": "^2.18.13"
  }
}

执行 npm run build

顺利执行了，哒哒~