Gulp-Uglify

Question

你好，我正在尝试使用 gulp uglify 缩小我的 app.js 文件，我使用泵来获取错误详细信息，它在第 2 行

上给我一个错误

GulpUglifyError: unable to minify JavaScript
Caused by: SyntaxError: Unexpected token: name (app)
File: /Users/Alexander/OneDrive/Alexander/scripts/app.js
Line: 2

我的 app.js 中的第 2 行是 let app = angular.module("app", ["ngRoute"]);

这是我的完整 app.js 文件

let app = angular.module("app", ["ngRoute"]);


app.config(function ($routeProvider) {
   $routeProvider

       .when("/",{
           templateUrl : "templates/home.html"
       })

       .when("/resume",{
           templateUrl: "templates/resume.html"
       })

       .when("/contact",{
           templateUrl: "templates/contact.html"
       });

});

app.controller("MainController",["$scope", function ($scope) {

    $scope.name = "Alexander Personal Website";

}]);

这是我的 gulpfile.js

var gulp = require('gulp');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
var pump = require('pump');
gulp.task('compress', function (cb) {
    pump([
            gulp.src('scripts/*.js'),
            uglify(),
            gulp.dest('app')
        ],
        cb
    );
});

我看到说 uglify 不适用于 es6 但是我得到错误的那一行对于 es5 也是一样的。

我希望有足够的细节。感谢您调查此问题。

Answer 1

What is var and let?

用var定义的变量的范围是函数范围或声明在任何函数之外，全局。

用let定义的变量的范围是块范围。

在ES6中，引入let。一般浏览器都支持ES6语法，但是已经构建在早期版本上的插件会报错。可能主要原因是你的错误。

因为我们的代码可能会被 gulp-uglify 模块 uglify 并且不支持 ES6。如果我们的简单代码运行和 let 在浏览器中，那么它不会抛出错误。

So question what should do?

要使用 ES6 功能，必须将我们的 ES6 代码转换为 ES5，以便它可以运行在我们当前的浏览器上无缝运行。有几种工具可以完成这项任务，对于本教程，我们将使用 Babel。

我们还将使用名为 Webpack 的模块捆绑工具将所有源 javascript 文件捆绑到一个文件中。通过 Webpack 对 Babel 的支持以插件的形式提供，我们将使用它们来自动执行转译任务。这意味着一旦我们配置了这些插件，我们只需要编写 ES6 代码，Webpack 会处理剩下的事情。

Gulp-Uglify - 无法缩小 Javascript Angular 1.6.8

Gulp-Uglify - Unable to minify Javascript Angular 1.6.8

javascript

angularjs

gulp