Question

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

为了实现这一点，我将所有已编译的资产（包括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跳过css文件的concat步骤。这是因为cssmin本身会进行连接，cssmin需要知道css文件的来源，以便对引用的资源进行相对路径修正。

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

您可以检查以验证结果是否正确，方法是转到dist/styles/<cache-buster>.vendor.css并验证图片是否包含相对网址，以/ bower-components /

开头

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

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

（线条包装为易读性添加，实际上已全部化了）。

我希望这会有所帮助。

给予应有的信用，我最初在此发现：https://stackoverflow.com/a/21415649/1017787我已将其调整为您的配置并添加了修订配置。

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

1 个答案: