GulpUglifyError：无法缩小JavaScript（Angular 4） [英] GulpUglifyError: unable to minify JavaScript (Angular 4)

问题描述

我对 uglify 主要 bundle.js 文件存在问题。

这是我的 gulp 脚本：

  gulp.task（compile，（）=> {
 let tsResult = gulp.src（app / ** / *。ts）
 .pipe（sourcemaps.init（））
 .pipe（tsProject（））; 
 return tsResult.js 
.pipe（sourcemaps.write（。，{sourceRoot：'/ app'}））
 .pipe（concat（'bundle.js'））
 .pipe（gulp。 dest（'app / _Dist /'））; 
}）; 
 $ b gulp.task（minify，[compile]，function（）{
 return gulp.src（['app / _Dist / bundle.js']）
。pipe（'）'
 .pipe（plumber（））
 .pipe（uglify（））
 .on（'error'，function（ err）{gutil.log（gutil.colors.red（'[Error]'），err.toString（））;}）
 .pipe（plumber.stop（））
 .pipe（gulp .dest（outputLocation））; 
}）; 
  

运行这些脚本后，我发现了下一个异常：

[15:16:20] [Error] GulpUglifyError：无法缩小JavaScript引起的
：SyntaxError：意外的标记：punc（:)文件：
C： \Projects\AngGulpApp\app\_Dist\bundle.min.js行：1

tsconfig。 json

  {
compileOnSave：true，
compilerOptions：{
target：es5，
module：es2015，
moduleResolution：node，
noEmitOnError：false，
 sourceMap：true，
emitDecoratorMetadata：true，
experimentalDecorators：true，
removeComments：false，
noImplicitAny：false，
 lib：[es2015，dom]，
baseUrl：。，
typeRoots：[
node_modules / @ types
] 
}，
exclude：[
gulpfile.ts，
node_modules
] 
} 
  

我不知道如何解决这个问题。
任何想法如何解决这个问题？

解决方案

我发现了如何解决这个问题。基本上 uglify 不适用于 ES6 （现在仅适用于 ES5 ）。为了解决这个问题，我们需要使用TypeScript帮助将 Transpilation 结果转换为 ES5 ，然后运行缩小处理。 例如：

  var ts = require（'gulp-typescript'）; 
 var uglify = require（'gulp-uglifyjs'）; 
 .... 
 .pipe（ts（{
 target：es5，
 allowJs：true，
 module：commonjs，
 moduleResolution：node
）））
 .pipe（uglify（））
  

这部分代码将我当前的捆绑代码转换为ES5，然后运行 uglify（）函数进行缩小。

I have a problem with uglify main bundle.js file.

This is my gulp scripts:

gulp.task("compile", () => {
    let tsResult = gulp.src("app/**/*.ts")
        .pipe(sourcemaps.init())
        .pipe(tsProject());
    return tsResult.js
        .pipe(sourcemaps.write(".", { sourceRoot: '/app' }))
        .pipe(concat('bundle.js'))
        .pipe(gulp.dest('app/_Dist/'));
});

gulp.task("minify", ["compile"], function () {
    return gulp.src(['app/_Dist/bundle.js'])
        .pipe(concat('bundle.min.js'))
        .pipe(plumber())
        .pipe(uglify())
        .on('error', function (err) { gutil.log(gutil.colors.red('[Error]'), err.toString()); })
        .pipe(plumber.stop())
        .pipe(gulp.dest(outputLocation));
});

After running this scripts I catch next exception:

[15:16:20] [Error] GulpUglifyError: unable to minify JavaScript Caused by: SyntaxError: Unexpected token: punc (:) File: C:\Projects\AngGulpApp\app\_Dist\bundle.min.js Line: 1

tsconfig.json

{
    "compileOnSave": true,
    "compilerOptions": {
        "target": "es5",
        "module": "es2015",
        "moduleResolution": "node",
        "noEmitOnError": false,
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false,
        "lib": [ "es2015", "dom" ],
        "baseUrl": ".",
        "typeRoots": [
            "node_modules/@types"
        ]
    },
    "exclude": [
        "gulpfile.ts",
        "node_modules"
    ]
}

I don't know how to resolve this problem. Any ideas how to resolve this problem?

解决方案

I found how to resolve this issue. Basically uglify doesn't work with ES6 (right now just with ES5). For resolving this problem we need to Transpilation result to ES5 with TypeScript help, and then run minification.

For example:

var ts = require('gulp-typescript');
var uglify = require('gulp-uglifyjs');
....
.pipe(ts({
    target: "es5",
    allowJs: true,
    module: "commonjs",
    moduleResolution: "node"
}))
.pipe(uglify())

This part of code transpilation my current bundle code to ES5 and then run uglify() function for minification.

这篇关于GulpUglifyError：无法缩小JavaScript（Angular 4）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！