使用grunt管理凉亭包中的图像

Question

我有一个快速的应用程序,我正在使用bower来管理前端依赖项.我还使用grunt通过连接,uglifying,缩小和修改所有资产来构建前端,包括每个bower组件使用的脚本/样式grunt-usemin.

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

问题是,我应该如何管理各种凉亭套餐附带的图像？我可以手动将它们移动到我的images文件夹中,但我更愿意将它们打包bower_components(在我看来它们属于它们的位置)并在构建过程中将其留给grunt.

任何输入将不胜感激.

---

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 引导）它位于“app”中，因此您可能需要调整 cssmin。

这是正在发生的事情：

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

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

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

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

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

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

（为了易读性而添加了换行，实际上所有 CSS 都被缩小了）。

我希望这有帮助。

给予应有的信任，我最初在这里找到了这个： https: //stackoverflow.com/a/21415649/1017787我已将其调整为您的配置并添加了修订配置。