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 ;

View Code

 

.babelrc內容

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

View Code

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"
  }
}

View Code

執行 npm run build

順利執行了，噠噠~