Uglify can't parse "flow.js"

Question

I'm having an annoying issue where uglify (called through grunt-usemin) cannot parse the url for a package named flow.js. This package is installed as a dependency of ng-flow.

The url looks like this:

bower_components/flow.js/dist/flow.js

When I run grunt build, I get the following error:

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

Since I don't know much about usemin and uglify, I can't put my finger on the issue. My guess was that it breaks when it gets at the first "flow.js" of the url. So, I tried to install flow.js as flowjs in my bower.json, but since its a dependency of ng-flow it will still get flow.js when running bower update.

Can anyone tell me more about this error, or suggest me a workaround to rename the dependency package?

Edit: usemin part of the Gruntfile

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']);

For the records, the grunt file is generated using https://github.com/DaftMonk/generator-angular-fullstack

Answer 1

The problem is that Grunt can't distinguish between a directory ending in '.js' and a .js file.

The workaround will be to use a wildcard expression to grab the files in flow.js and to exclude the directory itself.

Edit: You will need to exclude flow.js from both usemin AND rev.

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'
      ]
    }
  }
},