使用 grunt 管理 bower 包中的图像

Question

我有一个 express 应用程序，我在其中使用 bower 来管理前端依赖项。我还使用 grunt 通过连接、丑化、缩小和修改所有资产来构建前端，包括使用 grunt-usemin 的每个凉亭组件附带的脚本/样式。

为了实现这一点，我将所有已编译的资产（包括凉亭脚本/样式）移动到 dist/public 目录。我最终得到了一个<cache-buster>.vendor.js 和一个<cache-buster>.vendor.css 文件，其中包含所有优化凉亭组件。

问题是，我应该如何管理随各种凉亭包一起提供的图像？我可以手动将它们移动到我的 images 文件夹中，但我更愿意将它们打包在 bower_components 中（在我看来，它们属于那里），并在构建过程中任其发展。

我们将不胜感激。

---

Gruntfile.js（摘录）

    rev: {
      dist: {
        files: [{
          src: [
            'dist/public/css/{,*/}*.css',
            'dist/public/js/{,*/}*.js',
            'dist/public/img/{,*/}*.{gif,jpeg,jpg,png}'
          ]
        }]
      }
    },

    useminPrepare: {
      options: {
        dest: 'dist/public'
      },
      jade: ['dist/views/{,*/}*.jade']
    },

    usemin: {
      jade: ['dist/views/{,*/}*.jade'],
      options: {
        assetsDirs: ['dist/public'],
        patterns: {
          jade: require('usemin-patterns').jade
        }
      }
    },

    concurrent: {
      server: [
        'stylus', 'coffee'
      ],
      dist: [
        'stylus', 'coffee'
      ]
    },

    copy: {
      dist: {
        files: [{
          expand: true,
          cwd: 'views',
          dest: 'dist/views',
          src: '{,*/}*.jade'
        }]
      }
    }
  });

  grunt.registerTask('server', [
    'clean:server',
    'concurrent:server',
    'express:server',
    'watch'
  ]);

  grunt.registerTask('build', [
    'clean:dist',
    'concurrent:dist',
    'copy:dist',
    'useminPrepare',
    'concat',
    'uglify',
    'cssmin',
    'rev',
    'usemin'
  ]);

---

layout.jade（摘录）

//-<!-- build:css(assets) css/vendor.css -->
link(href='/bower_components/nivo-slider/nivo-slider.css')
//-<!-- endbuild -->

//-<!-- build:css(.tmp) css/application.css -->
link(href='/css/one.css')
link(href='/css/two.css')
//-<!-- endbuild -->

//-<!-- build:js(assets) js/vendor.js -->
script(type='text/javascript', src='/bower_components/jquery/jquery.js')
script(type='text/javascript', src='/bower_components/nivo-slider/jquery.nivo.slider.js')
//-<!-- endbuild -->

//-<!-- build:js(.tmp) js/application.js -->
script(type='text/javascript', src='/js/one.js')
script(type='text/javascript', src='/js/two.js')
//-<!-- endbuild -->

Answer 1

这是一个适合您的 Gruntfile 的解决方案：

rev: {
  dist: {
    files: [{
      src: [
        'dist/public/css/{,*/}*.css',
        'dist/public/js/{,*/}*.js',
        'dist/public/img/{,*/}*.{gif,jpeg,jpg,png}',
        'dist/bower_components/**/*.{png,jpg,jpeg,gif,webp,svg,eot,ttf,woff}'
      ]
    }]
  }
},
useminPrepare: {
  options: {
    dest: 'dist/public',
    flow: {
      html: {
        steps: {
          js: ['concat', 'uglifyjs'],
          css: ['cssmin']
        },
        post: {}
      }
    }
  },
  jade: ['dist/views/{,*/}*.jade']
},

cssmin: {
  options: {
    root: 'src'
  }
},

这假设您的 bower_compontents 目录位于名为“src”的源目录中。在我的环境中（使用 Yeoman 引导）它位于“应用程序”中，因此您可能需要调整 cssmin。

这是正在发生的事情：

首先，我们将 rev 校验和添加到 bower_components 目录中的一堆可能的资源文件中。

接下来，flow 配置告诉 usemin 跳过 css 文件的 concat 步骤。这是因为cssmin 自己进行了连接，cssmin 需要知道 css 文件的来源才能对引用的资源进行相对路径校正。

最后，root 配置告诉 cssmin 从哪个路径开始搜索以查找资源。

您可以通过转到dist/styles/<cache-buster>.vendor.css 并验证图像是否具有相对 URL（以 /bower-components/ 开头）来检查结果是否正确

例如，在我的构建中，我将 bootstrap.css 嵌入到我的 vendor.css 中，并且它已被重写如下：

@font-face{
   font-family:'Glyphicons Halflings';
   src:url(/bower_components/bootstrap/dist/fonts/2ad0632b.glyphicons-halflings-regular.eot);

（为了易读性添加了换行，实际上所有的 cssminified）。

我希望这会有所帮助。

感谢应得的，我最初在这里找到了这个：https://stackoverflow.com/a/21415649/1017787我已经根据您的配置对其进行了调整并添加了修订配置。