express - 使用 grunt 管理 Bower 包中的图像

Question

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

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

问题是，我应该如何管理随各种 Bower 软件包一起提供的图像？我可以手动将它们移动到我的 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_components 目录位于名为“src”的源目录中。在我的环境中(用 Yeoman 引导)它在“app”中，所以你可能需要调整 cssmin。

这是正在发生的事情:

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

接下来， flow配置告诉 usemin 跳过 concat css文件的步骤。这是因为 cssmin本身进行连接，并且 cssmin需要知道 css 文件的来源，以便对引用的资源进行相对路径校正。

最后， root config 告诉 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我已将其调整为您的配置并添加了修订配置。