Grunt将带点的文件夹视为文件

Question

当试图编译我的grunt文件并构建到我的dist文件夹中进行部署时，我在控制台中收到以下错误：

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).

原因是我安装了一个名为animate.css的bower组件。这个库当然安装在我的bower_components文件夹中，但我在Grunt文件中的匹配字符串只查找扩展名为.js、.css等的文件。这是我的匹配字符串：

// 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/*'
      ]
    }
  }
}

这是目录结构：

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
  -> ...

在这种情况下，我如何告诉Grunt这是一个包含文件而不是文件本身的目录？

Answer 1

我的方法略有不同。

bower install animate-css --save

它将抓取animate.css，但保存在：

bower_components/animate-css

使用这种方法，你不必玩Gruntfile.js，我个人认为编辑甚至看它都很不愉快；）

Answer 2

排除animate.css文件夹，然后包括其中的所有内容。我不确定具体的glob选项，请参阅此处，了解详细信息。类似这样的东西：

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/*'
      ]
    }
  }
}

Answer 3

您应该能够使用带有fs的自定义筛选函数。Stats方法。此外，还有ext选项（指示划分扩展的周期所在的位置。）

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

您可能需要使用isFile，具体取决于是否只想匹配实际文件。

Answer 4

isFile的使用示例，对我来说很有魅力。

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