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选项see here。像这样：

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

您应该能够custom filter function使用fs.Stats方法。此外，还有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'
  }
},

Grunt用点作为文件来处理文件夹

4 个答案: