gulp 中對於css文件的壓縮合並出現的unable to minify JavaScript問題

在咱們平常使用gulp進行js文件壓縮合並的時候：

const gulp = require('gulp');
const concat = require('gulp-concat');
const rename = require('gulp-rename');
const uglify = require('gulp-uglify');

 

gulp.task('copy-js',() => {

    gulp.src('./js/**/*')

        .pipe(concat('main.js'))

        .pipe(gulp.dest('dist/js'))

        .pipe(uglify())

        .pipe(rename('main.min.js'))

        .pipe(gulp.dest('dist/js'))

        .pipe(connect.reload())

})

在以上代碼進行的時候，有時候會報出這樣的錯誤：

 

 這裏的話咱們複製

GulpUglifyError: unable to minify JavaScript這個錯誤去查詢的話通常只是給咱們的搜索的回答都是報的錯誤是js代碼錯誤:報了該錯誤主要是由於javascirpt語法問題， 此時你要每一個文件去看是不可能;錯誤二可能它的錯誤實際上是：在es5環境裏使用了es六、es7語法；

解決第一個問題的方法就是：安裝 gulp-util 模塊 用於打印日誌：

npm install --save-dev gulp-util

gulp.task('copy-js', function() {
        gulp.src(['/**/*.js', 'public/lib/**/*.js'])
            .pipe(uglify())
            .on('error', function(err) {
                gutil.log(gutil.colors.red('[Error]'), err.toString());
            })
            .pipe('dist/js')
    })

而後就能夠獲得打印報錯內容：

ADMINs-Mac-pro:frontend admin$ gulp script
[11:45:54] Using gulpfile ~/workspace/frontend/gulpfile.js
[11:45:54] Starting 'script'...
[11:45:54] Finished 'script' after 14 ms
[11:45:55] [Error] GulpUglifyError: unable to minify JavaScript
Caused by: SyntaxError: Unexpected token: punc (,)
File: /Users/admin/workspace/frontend/public/js/basic.js
Line: 247

就能夠去排除錯誤了；

其實若是對於本身的代碼有信心以爲並非本身寫錯了的話，其實就是第二種錯誤了，就是在gulp中它支持的是es5的語法的，而隨着時代的發展，咱們程序猿的更新迭代也是迅速的，漸漸的es6和se7都開始頻繁的使用起來了，因此gulp的報錯也是正常的，那麼咱們就要安裝一些gulp的模塊來幫助咱們將咱們的es6和es7的語法轉換成適合gulp的es5的語法；gulp-babel 、babel-preset-es2015：

npm install babel-core gulp-babel@7 babel-preset-es2015 -D

在gulp命令框中輸出進這行代碼，能夠將咱們書寫的es6語法轉換成gulp的可以解讀的es5的語法；

在這裏咱們要建立一個文件：

 

 

 而後在文件中寫這一段代碼：

 

 

 但其實這個方法只能對es6的語法轉換成es5語法；

可是咱們還有別的方法能夠實現es5以上的語法轉換成es5的語法的模塊：

那就是將es2015改爲env：

 

babel-preset-env es5以上的js語法均可以處理

cnpm i babel-core gulp-babel@7 babel-preset-env -D

相應的咱們也要將.babelrc中的es2015改爲env：

 

 而後再去打包壓縮咱們的js的代碼就不會出現這個報錯了；

OK，此次就分享這麼一個小報錯了，各位看官下次再見，托爾接着碼去嘹。