Uglify 无法解析“flow.js”答案

【问题标题】：Uglify can't parse "flow.js"Uglify 无法解析“flow.js”
【发布时间】：2015-02-10 21:54:55
【问题描述】：

我遇到了一个烦人的问题，即 uglify（通过 grunt-usemin 调用）无法解析名为 flow.js 的包的 url。这个包是作为 ng-flow 的依赖安装的。

网址如下所示：

bower_components/flow.js/dist/flow.js

当我运行 grunt build 时，我收到以下错误：

Warning: Unable to read "dist/public/bower_components/flow.js" file (Error code: EISDIR). Use --force to continue.

由于我对 usemin 和 uglify 了解不多，所以我无法解决这个问题。我的猜测是当它到达网址的第一个“flow.js”时它会中断。因此，我尝试在我的 bower.json 中将 flow.js 安装为 flowjs，但由于它是 ng-flow 的依赖项，因此在运行 bower update 时仍然会得到 flow.js。

谁能告诉我更多关于这个错误的信息，或者建议我一个解决方法来重命名依赖包？

编辑：使用 Gruntfile 的 min 部分

useminPrepare: {
  html: ['<%= yeoman.client %>/index.html'],
  options: {
    dest: '<%= yeoman.dist %>/public'
  }
},
usemin: {
  html: ['<%= yeoman.dist %>/public/{,*/}*.html'],
  css: ['<%= yeoman.dist %>/public/{,*/}*.css'],
  js: ['<%= yeoman.dist %>/public/**/*.js'],
  options: {
    assetsDirs: [
      '<%= yeoman.dist %>/public',
      '<%= yeoman.dist %>/public/assets/images'
    ],
    // This is so we update image references in our ng-templates
    patterns: {
      js: [
        [/(assets\/images\/.*?\.(?:gif|jpeg|jpg|png|webp|svg))/gm, 'Update the JS to reference our revved images']
      ]
    }
  }
}
grunt.registerTask('build', [
'clean:dist',
'injector:less', 
'concurrent:dist',
'injector',
'wiredep',
'useminPrepare',
'autoprefixer',
'ngtemplates',
'concat',
'ngAnnotate',
'copy:dist',
'cdnify',
'cssmin',
'uglify',
'rev',
'usemin']);

对于记录，使用https://github.com/DaftMonk/generator-angular-fullstack生成grunt文件

【问题讨论】：

Gruntfile 的相关部分是什么样的？

标签： bower grunt-usemin grunt-contrib-uglify angular-fullstack ng-flow

【解决方案1】：

问题在于 Grunt 无法区分以 '.js' 结尾的目录和 .js 文件。

解决方法是使用通配符表达式来获取 flow.js 中的文件并排除目录本身。

编辑：您需要从 usemin 和 rev 中排除 flow.js。

usemin: {
  html: ['<%= yeoman.dist %>/public/{,*/}*.html'],
  css: ['<%= yeoman.dist %>/public/{,*/}*.css'],
  js: {
    src: ['<%= yeoman.dist %>/public/{,*/}*.js', '!<%= yeoman.dist %>/public/bower_components/flow.js'],
  },
  ...

rev: {
  dist: {
    files: {
      src: [
        '<%= yeoman.dist %>/public/{,*/}*.js',
        '<%= yeoman.dist %>/public/{,*/}*.css',
        '<%= yeoman.dist %>/public/assets/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
        '<%= yeoman.dist %>/public/assets/fonts/*',
        '!<%= yeoman.dist %>/public/bower_components/flow.js'
      ]
    }
  }
},

【讨论】：

不幸的是，它仍然尝试包含文件夹并崩溃:(。（我试图更改顺序但没有任何效果）
是的！从今以后，我叫你宗师！

【解决方案2】：

问题在于 Grunt 无法区分以 '.js' 结尾的目录和 .js 文件。

这是一个错误的说法。 Grunt 使用minimatch lib 来配置如何搜索文件，还有一个isFile 过滤器可以设置为true 来只搜索文件。 See grunt.file.expand

在this link 之后，您将找到filter: 'isFile' 的示例。

顺便说一句，您应该升级到 usemin v3，因为您可以在 issue #474 中看到这个问题似乎已经解决了

你可以看到我的补丁 here 我已将项目迁移到 usemin 3 并将 grunt-rev 切换到 grunt-filerev。

【讨论】：

感谢您提供此信息，我向 angular-fullstack 的人指出了这一点！