利用gulp打包------解決ES6代碼打包出錯問題

                          利用gulp打包------解決ES6代碼打包出錯問題

在項目中使用gulp對源碼及項目進行壓縮和打包是很常見的做法，但是實際中可能會遇見uglify執行出錯的問題，本文只針對由於項目中使用ES6語法而造成uglify失敗的問題。

解決這個問題主要是藉助於babel。直接上操作流程。

1、全局安裝babel。使用命令 npm install -g babel        和npm install -g babel-cli

2、本地安裝gulp-babel。   npm install --save-dev gulp-babel

3、安裝babel 輔助插件。 npm install --save-dev babel-preset-env

4、安裝babel 輔助插件。 npm install --save-dev babel-core babel-preset-es2015

5、在項目根目錄創建文件。.babelrc文件。文件內容

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

6、修改gulpfile.js.關鍵代碼如下

var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    babel = require('gulp-babel');
    rename = require('gulp-rename');


// 壓縮 js 文件
gulp.task('jscompress', function() {
    return gulp.src('src/script/*.js')
        .pipe(babel())
        .pipe(uglify())
        .pipe(rename({suffix:'.min'}))
        .pipe(gulp.dest('dist/script/'))
        ;
});

gulp.task('default',['jscompress']);

7、這時候運行即可gulp task即可。

 

但是，你有可能執行任務失敗，提示找不到babel-core庫，不管你怎麼安裝都不行。這時候請檢查使用的插件版本是否配套。貼出我的版本，如果版本問題，請 npm  uninstall 庫   重新    npm install 庫@版本即可。

  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "gulp": "^3.9.1",
    "gulp-babel": "^7.0.1",
    "gulp-rename": "^1.4.0",
    "gulp-uglify": "^3.0.1"
  }