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環境里使用了es6、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，這次就分享這么一個小報錯了，各位看官下次再見，托爾接着碼去嘹。