9

When trying to compile my grunt file and build into my dist folder for deployment I get the following error in the console:

Running "rev:dist" (rev) task
dist/public/app/app.js >> 63decaf3.app.js
dist/public/app/vendor.js >> a09756ab.vendor.js
dist/public/app/app.css >> d2017fc8.app.css
Warning: Unable to read "dist/public/bower_components/animate.css" file (Error code: EISDIR).

The reason for this is that I have a bower component I've got installed named animate.css. This library is of course installed in my bower_components folder, but the matching string I have in my Grunt file only looks for files with an extension of .js, .css, et cetera. Here's my matching string:

// Renames files for browser caching purposes
rev: {
  dist: {
    files: {
      src: [
        '<%= yeoman.dist %>/public/{,*/}*.js',
        '<%= yeoman.dist %>/public/{,*/}*.css',  // Offending line
        '<%= yeoman.dist %>/public/assets/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
        '<%= yeoman.dist %>/public/assets/fonts/*'
      ]
    }
  }
}

And here's the directory structure:

bower_components
  -> ...
  -> angular-ui-router
  -> animate.css  // Folder with the error
  ---> animate.css  // File that it should be recognizing
  ---> animate.min.css  // File that it should be recognizing
  -> es5-shim
  -> ...

In this case, how would I tell Grunt that this is a directory which contains files rather than a file itself?

cereallarceny
  • 4,696
  • 3
  • 34
  • 72
  • 2
    Why are you using `{,*/}`? If I'm reading the docs right, that matches either an empty string or a directory name (including the trailing slash). Looks to me like you should be using `**/*.css`. (By the way, globs and regexes are not the same thing.) – Alan Moore Sep 02 '14 at 16:23
  • 1
    You're right about the difference between globs and regex, I've edited the tags of my post accordingly. The reason I use `{,*/}` instead is because that will rename only the final concatenated files (since everything is combined into one large `.js` and one large `.css` file. Doing `**/*.css` renames all the css files, not just the few files I need. Does that make sense or should I reexplain? – cereallarceny Sep 02 '14 at 16:39
  • I ran into this issue before - the culprit was that I used a version of grunt-devcode that didn't properly deal with dots in directories - the point at which you're getting the error is after your html has been "simplified" - so maybe another npm package is not dealing with the dots properly. Not sure if you are using grunt-devcode but I would start by talking a look at the packages you use – Birgit Martinelle Sep 12 '14 at 12:52

4 Answers4

7

I have slightly different approach.

bower install animate-css --save

it will grab animate.css but save at:

bower_components/animate-css

Using this method you don't have to play with Gruntfile.js which I personally consider unpleasant to edit and even look at ;)

Tomasz Krzywicki
  • 163
  • 2
  • 7
  • Is this hyphenation of the package name specific to the animate.css library or is that something bower does when people submit packages with dots in the name? – cereallarceny Mar 30 '15 at 14:21
  • There is nothing in bower.json of animate.css project indicating alternative name. I am guessing its Bower's fallback method. If I would be you I would do quick experiment by installing other package - I am guessing you are still seriously intrigued to do so :> – Tomasz Krzywicki Mar 31 '15 at 08:57
  • This does not work with bower packages like fullpage.js. Throws an error " ENOTFOUND Package fullpage-js not found" – nikjohn Jul 30 '15 at 20:15
6

Exclude the animate.css folder, then include everything inside it. I am not sure about the exact glob options see here, for details. Something like this:

rev: {
  dist: {
    files: {
      src: [
        '<%= yeoman.dist %>/public/{,*/}*.js',
        '<%= yeoman.dist %>/public/{,*/}*.css',
        '!<%= yeoman.dist %>/public/bower_components/animate.css',
        '<%= yeoman.dist %>/public/bower_components/animate.css/animate.css',
        '<%= yeoman.dist %>/public/assets/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
        '<%= yeoman.dist %>/public/assets/fonts/*'
      ]
    }
  }
}
Community
  • 1
  • 1
user3995789
  • 3,382
  • 1
  • 15
  • 29
  • I'd love to see someone make this into a more general glob too... I could see issues arising if you had a folder called `awesomeLib.js` which is a common naming scheme of projects. – cereallarceny Sep 12 '14 at 16:26
  • @cereallarceny I think no one should name their folders like that, it's dangerous, you can't workaround for every configuration you have. – user3995789 Sep 12 '14 at 16:27
  • I agree, but it really isn't up to me what other people do. – cereallarceny Sep 14 '14 at 00:27
  • Upvoting because this works and the solution marked as correct above does NOT – nikjohn Jul 30 '15 at 20:24
0

You should be able to use a custom filter function with the fs.Stats method. Also, there is the ext option ( Indicates where the period demarcating the extension is located. )

ext: String 

src: [
     '<%= yeoman.dist %>/public/{,*/}*.js',
     '<%= yeoman.dist %>/public/{,*/}*.css',  // Offending line
     '<%= yeoman.dist %>/public/assets/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
     '<%= yeoman.dist %>/public/assets/fonts/*'
     ],
     filter: 'isDirectory',

You may need to use isFile depending on if you only want to match actual files instead.

l'L'l
  • 40,316
  • 6
  • 77
  • 124
  • 1
    I don't believe this works. It throws an error: /Applications/MAMP/htdocs/octovis/barnacle/Gruntfile.js:218 filter: 'isDirectory', ^ Loading "Gruntfile.js" tasks...ERROR >> SyntaxError: Unexpected token : Warning: Task "default" not found. Used --force, continuing. – cereallarceny Sep 02 '14 at 16:22
  • By the way, changing it to filter: 'isFile' throws the same error. – cereallarceny Sep 02 '14 at 16:23
  • Try it the way I've shown now. I think you'll want to use `isFile` though. – l'L'l Sep 02 '14 at 16:26
  • Weird, I changed it to your latest edit and tried both `isDirectory` and `isFile` and both of them gave me the exact same error as in my OP. – cereallarceny Sep 02 '14 at 16:33
  • Interesting. It maybe an issue where the regex isn't traversing into the directory... the only other thing I can suggest atm is `/public/{,**/}*.css` – l'L'l Sep 02 '14 at 16:43
  • @cereallarceny, Oh one more thing I just thought of `dot: true`. I'll add it to my answer. – l'L'l Sep 02 '14 at 16:51
  • Shame, neither the `/public/{,**/}*.css` string nor adding the `dot: true` with the `isFile` or `isDirectory` filter works. Completely bizarre... – cereallarceny Sep 02 '14 at 16:56
  • Sorry, I was meaning to write `ext`: — although i've never tried it. Apparently you can indicate the period where the actual extension is located, so maybe that could help. – l'L'l Sep 02 '14 at 17:00
  • Really though, the filter should've worked - so I'm a bit baffled. There are quite a few other file options listed on the docs that I linked, maybe browse there for a bit. – l'L'l Sep 02 '14 at 17:06
  • The filter is not responsible for triggering a SyntaxError in your Gruntfile. Is you code Javascript-ok ? Does jshint likes it ? – Maël Nison Sep 12 '14 at 14:55
  • JS hint does indeed like it. – cereallarceny Sep 12 '14 at 16:07
  • `isFile` should work fine: http://stackoverflow.com/questions/24503077/unique-grunt-globbing-issue/24503596#24503596 – steveax Oct 25 '14 at 00:50
0

Example of isFile usage, worked a charm for me.

// Renames files for browser caching purposes
filerev: {
  dist: {
    src: [
      '<%= yeoman.dist %>/**/*.js',
      '!<%= yeoman.dist %>/local.js',
      '!<%= yeoman.dist %>/web.js',
      '<%= yeoman.dist %>/styles/**/*.css',
      '<%= yeoman.dist %>/images/**/*.{png,jpg,jpeg,gif,webp,svg}',
      '<%= yeoman.dist %>/styles/fonts/*'
    ],
    filter: 'isFile'
  }
},
Joan-Diego Rodriguez
  • 2,229
  • 1
  • 22
  • 27