15

grunt-usemin は私が変身するのを助けます

<link href="/dependencies/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="/dependencies/nanoscroller/bin/css/nanoscroller.css" rel="stylesheet" />
<link href="/dependencies/dropzone/downloads/css/dropzone.css" rel="stylesheet" />

完全に結合され、縮小された js に:

<link href="scripts/8e1991c7.libraries.js" rel="stylesheet" />

concat、cssmin、uglify の後、画像とその場所を除いて、ほぼ完璧なフォルダー構造ができました。

これが私の問題です：

これらすべてのベンダーの css ファイルには、イメージの場所が含まれています。悪い点は、それらすべてが異なる種類の場所を共有していることです. css フォルダー内の画像を使用しているものもあれば、img フォルダー内の画像を使用しているものもあります。

すべての画像の URL を書き換えるように grunt usemin を構成するにはどうすればよいですか?

4

6 に答える 6

15

1) レブ画像。イメージのパスを rev タスクに追加します。

rev: {
    dist: {
        files: {
            src: [
                '<%= yeoman.dist %>/static/scripts/{,*/}*.js',
                '<%= yeoman.dist %>/static/styles/{,*/}*.css',
                '<%= yeoman.dist %>/static/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
            ]
        }
    }
}

2) 画像の場所を含むファイルのパスを usemin タスクに追加します。

usemin: {
    html: ['<%= yeoman.dist %>/{,*/}*.html'],
    css: ['<%= yeoman.dist %>/static/styles/{,*/}*.css'],
    options: {
        assetsDirs: ['<%= yeoman.dist %>','<%= yeoman.dist%>/static/images'],
    }
}

3) うなり声を実行します。

于 2013-12-02T16:41:18.947 に答える
6

CSS の改訂を修正したのbackground-imageは、CSS パターンを に追加することでしたoptions。これにより、CSS 内のすべてのアセット参照が検索され、それらが改訂されたアセットに置き換えられます。

// Performs rewrites based on rev and the useminPrepare configuration
usemin: {
  ...
  ...
  options: {
    ...
    ...
    // This is so we update image references in our ng-templates
    patterns: {
      js: [
        [/(assets\/images\/.*?\.(?:gif|jpeg|jpg|png|webp|svg))/gm, 'Update the JS to reference our revved images']
      ],
      css: [
        [/(assets\/images\/.*?\.(?:gif|jpeg|jpg|png|webp|svg))/gm, 'Update the CSS to reference our revved images']
      ]
    }
  }
},
于 2014-08-27T08:15:54.020 に答える
1

新しいタスクを実装する必要がありました。これは私の予備的な実装です。

grunt.registerMultiTask('rewriteCssUrl', 'rewrite url in css', function () {
  var options = this.options({
     assets: grunt.filerev ? grunt.filerev.summary : {},
     postFilter: function identity(input){ return input}
  });

  var self = this;
  var assets = options.assets;

  self.filesSrc.forEach(function (file) {
     var css = grunt.file.read(file);
     var original = css;

     css = css.replace(/(?:src=|url\(\s*)['"]?([^'"\)]+)['"]?\s*\)?/gm, function (match, src) {
        var key = path.join(path.dirname(file), src);
        var asset = assets[path.normalize(key)];
        var val =  options.postFilter(asset);
        return match.replace(src, val || match);
     });

     if(original !== css) {
        grunt.log.writeln('✔ '.green + file + (' was changed.').grey);
        grunt.file.write(file, css);
     }
  });
});
于 2013-11-01T09:43:00.717 に答える
0

この問題に対する私のアプローチは、基本的にstyles/select2/select2.cssベンダー スタイルごとに個別に作成し、関連するすべての画像をstyles/select2スクリプトの一部として Grunt でコピーできるようにすることでした (相対パスや上書きなどを気にする必要はありません)。あれは：

アプリ/index.html

<!-- build:css(.tmp) styles/select2/select2.css -->
<link rel="stylesheet" href="bower_components/select2/select2.css">
<!-- endbuild -->

Gruntfile.js

copyベンダー スタイルを.tmp最小化する前にディレクトリにコピーする新しいタスクを追加しcssminます。

    copy: {
        // this copies bower_components/*.css into .tmp so they can be compiled
        styles: {
            expand: true,
            cwd: '<%= yeoman.app %>',
            dest: '.tmp/',
            src: [
                'styles/{,*/}*.css',
                'bower_components/**/*.css'
            ]
        },
        dist: ...

そして、それらが最小化されたら、関連するアセットをコピーします (この場合、PNG と GIF 画像だけを想定しています)。

        // and once we have compiled all of our stylesheets, we need to also copy over any necessary image files
        distAssets: {
            expand: true,
            cwd: '<%= yeoman.app %>/bower_components',
            dest: '<%= yeoman.dist %>/styles',
            src: [
                '**/*.png',
                '**/*.gif'
            ]
        }
    },

最後に、新しいタスクをタスクに追加しbuildます。

grunt.registerTask('build', [
    'clean:dist',
    'replace:dist',
    'copy:styles',  // -- added
    'useminPrepare',
    // ... etc ...
    'copy',
    'rev',
    'usemin',
    'copy:distAssets'  // -- added
]);
于 2014-02-18T03:04:22.870 に答える