javascript - Vue路由器: Gulp uglify/watch node error

Question

刚刚开始使用 Vue 路由器并遵循入门指南，但立即遇到了问题。

使用与示例相同的代码:

const Home = { template: '<div>Home</div>' }

const routes = [
    { path: '/', component: Home }
]

const router = new VueRouter({
    routes // short for routes: routes
})

const app = new Vue({
    router
}).$mount('#app')

我正在运行 Gulp watch ，当保存文件时，它会在我的终端中抛出此错误:

events.js:160
  throw er; // Unhandled 'error' event
  ^
Error
at new JS_Parse_Error (eval at <anonymous> (/Users/dev/Desktop/clients/ms-photography/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:1545:18)
at js_error (eval at <anonymous> (/Users/dev/Desktop/clients/ms-photography/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:1553:11)
at croak (eval at <anonymous> (/Users/dev/Desktop/clients/ms-photography/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2092:9)
at token_error (eval at <anonymous> (/Users/dev/Desktop/clients/ms-photography/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2100:9)
at expect_token (eval at <anonymous> (/Users/dev/Desktop/clients/ms-photography/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2113:9)
at expect (eval at <anonymous> (/Users/dev/Desktop/clients/ms-photography/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2116:36)
at eval (eval at <anonymous> (/Users/dev/Desktop/clients/ms-photography/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2689:13)
at eval (eval at <anonymous> (/Users/dev/Desktop/clients/ms-photography/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2139:24)
at expr_atom (eval at <anonymous> (/Users/dev/Desktop/clients/ms-photography/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2619:35)
at maybe_unary (eval at <anonymous> (/Users/dev/Desktop/clients/ms-photography/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2795:19)

这是我在 gulpfile 中的 watch 代码:

gulp.task('scripts', function() {
   return gulp.src('wp-content/themes/ms-photography/src/js/*.js')
    .pipe(minify())
    .pipe(gulp.dest('wp-content/themes/ms-photography/dist/js/'))
    .pipe(livereload());
});

如果我不编译脚本，它可以正常工作......有什么想法吗？

Answer 1

我想你需要将 gulp-babel 添加到你的管道中，即

npm install --save-dev gulp-babel babel-preset-es2015

然后:

gulp.task('scripts', function() {
  return gulp.src('wp-content/themes/ms-photography/src/js/*.js')
    .pipe(babel({
        presets: ['es2015']
    }))
    .pipe(minify())
    .pipe(gulp.dest('wp-content/themes/ms-photography/dist/js/'))
    .pipe(livereload());
});