OSX 上 Polymer Start Kit 的 Gulp 错误

Question

已下载 Polymer starter kit 1.3.0 on MAC OSX El Capitan 10.11.4

Node.js V6.0.0

这里遵循的方向：https://github.com/PolymerElements/polymer-starter-kit#getting-started

gulp 命令给出以下错误。请帮忙！

Answer 1

我认为这是在 Node v6.0.0 下运行时 gulp-if（pipes *.js to gulp-uglify）中的一个错误。日志错误显示gulp-uglify 在app/styles/main.css 上窒息，这很奇怪，因为它应该只提供*.js。

{ Error
    at new JS_Parse_Error (eval at <anonymous> (/Users/tony/Downloads/polymer-starter-kit-1.3.0/node_modules/uglify-js/tools/node.js:22:1), <anonymous>:1526:18)
    at js_error (eval at <anonymous> (/Users/tony/Downloads/polymer-starter-kit-1.3.0/node_modules/uglify-js/tools/node.js:22:1), <anonymous>:1534:11)
    at croak (eval at <anonymous> (/Users/tony/Downloads/polymer-starter-kit-1.3.0/node_modules/uglify-js/tools/node.js:22:1), <anonymous>:2026:9)
    at token_error (eval at <anonymous> (/Users/tony/Downloads/polymer-starter-kit-1.3.0/node_modules/uglify-js/tools/node.js:22:1), <anonymous>:2034:9)
    at unexpected (eval at <anonymous> (/Users/tony/Downloads/polymer-starter-kit-1.3.0/node_modules/uglify-js/tools/node.js:22:1), <anonymous>:2040:9)
    at semicolon (eval at <anonymous> (/Users/tony/Downloads/polymer-starter-kit-1.3.0/node_modules/uglify-js/tools/node.js:22:1), <anonymous>:2060:56)
    at simple_statement (eval at <anonymous> (/Users/tony/Downloads/polymer-starter-kit-1.3.0/node_modules/uglify-js/tools/node.js:22:1), <anonymous>:2240:73)
    at eval (eval at <anonymous> (/Users/tony/Downloads/polymer-starter-kit-1.3.0/node_modules/uglify-js/tools/node.js:22:1), <anonymous>:2113:19)
    at eval (eval at <anonymous> (/Users/tony/Downloads/polymer-starter-kit-1.3.0/node_modules/uglify-js/tools/node.js:22:1), <anonymous>:2073:24)
    at eval (eval at <anonymous> (/Users/tony/Downloads/polymer-starter-kit-1.3.0/node_modules/uglify-js/tools/node.js:22:1), <anonymous>:2827:23)
  message: '/Users/tony/Downloads/polymer-starter-kit-1.3.0/app/styles/main.css: Unexpected token: punc ({)',
  fileName: '/Users/tony/Downloads/polymer-starter-kit-1.3.0/app/styles/main.css',
  lineNumber: 10,
  stack: 'Error\n    at new JS_Parse_Error (eval at <anonymous> (/Users/tony/Downloads/polymer-starter-kit-1.3.0/node_modules/uglify-js/tools/node.js:22:1), <anonymous>:1526:18)\n    at js_error (eval at <anonymous> (/Users/tony/Downloads/polymer-starter-kit-1.3.0/node_modules/uglify-js/tools/node.js:22:1), <anonymous>:1534:11)\n    at croak (eval at <anonymous> (/Users/tony/Downloads/polymer-starter-kit-1.3.0/node_modules/uglify-js/tools/node.js:22:1), <anonymous>:2026:9)\n    at token_error (eval at <anonymous> (/Users/tony/Downloads/polymer-starter-kit-1.3.0/node_modules/uglify-js/tools/node.js:22:1), <anonymous>:2034:9)\n    at unexpected (eval at <anonymous> (/Users/tony/Downloads/polymer-starter-kit-1.3.0/node_modules/uglify-js/tools/node.js:22:1), <anonymous>:2040:9)\n    at semicolon (eval at <anonymous> (/Users/tony/Downloads/polymer-starter-kit-1.3.0/node_modules/uglify-js/tools/node.js:22:1), <anonymous>:2060:56)\n    at simple_statement (eval at <anonymous> (/Users/tony/Downloads/polymer-starter-kit-1.3.0/node_modules/uglify-js/tools/node.js:22:1), <anonymous>:2240:73)\n    at eval (eval at <anonymous> (/Users/tony/Downloads/polymer-starter-kit-1.3.0/node_modules/uglify-js/tools/node.js:22:1), <anonymous>:2113:19)\n    at eval (eval at <anonymous> (/Users/tony/Downloads/polymer-starter-kit-1.3.0/node_modules/uglify-js/tools/node.js:22:1), <anonymous>:2073:24)\n    at eval (eval at <anonymous> (/Users/tony/Downloads/polymer-starter-kit-1.3.0/node_modules/uglify-js/tools/node.js:22:1), <anonymous>:2827:23)',
  showStack: false,
  showProperties: true,
  plugin: 'gulp-uglify' }

解决方法是将 Node 降级到 5.11.0（例如，$ brew switch node 5.11.0）。

更新：我将问题追踪到gulp-match，gulp-if 使用它来检查给定的文件名是否与模式匹配。

您可以将此解决方法用于 Node 6.0.0 或更早版本：

1. 在 Polymer Starter Kit 的 gulpfile.js 中，添加以下内容：

   var filter = function(pattern) {
     return function(file) {
       if (typeof pattern === 'string') {
         var newCond = pattern.substring(1).replace(/\./g,'\\.')+'$';
         pattern = new RegExp(newCond);
       }
       return pattern.test(file.relative);
     };
   };
   
   var _if = function(pattern, trueChild, falseChild, minimatchOptions) {
     return $.if(filter(pattern), trueChild, falseChild, minimatchOptions);
   };
   

2. 在optimizeHtmlTask() 中，将$.if 替换为_if。

---

^{参见 Polymer 问题 #880，gulp-match 问题 #12}