2

私の Gruntfile.js には、画像の rev タスクが含まれています。魔女は大丈夫です:

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

これが私のアプリの私のjavascriptコードです:

require(['app', 'jquery', 'jqueryBackstretch'], function (app, $) {
    'use strict';
    // use app here
    // console.log(app);
    // console.log('Running jQuery %s', $().jquery);
    $(function() {
        $('.stretch').backstretch(
            [
                'images/interieur.jpg',
                'images/10.jpg',
                'images/11b.jpg',
                'images/axo 02.jpg',
                'images/axo 03.jpg'
            ],
            {duration: 4000, fade: 'slow'}
        );
    });
});

rev タスクが実行された後にイメージ ファイルにアクセスするにはどうすればよいですか?

ありがとう。

ザビエル

4

1 に答える 1

1

使ってみましたuseminか？通常、コード内で元のファイル名を縮小された/revved/..バージョンに置き換えるのが仕事です

usemin通常は CSS と HTML ファイルのみを対象としていますが、構成を編集すると js ファイルも解析できるようになるはずです。

わかりませんbackstretchが、これが機能しない場合、ユーザーはある時点で画像をダウンロードするので、ハックな方法は、html に画像を追加し class="special-class"て、jQuery でそれらを選択できるようにすることです。を実行しdisplay:none;ます。これらの画像はソースが更新され、次のように実行できます。

require(['app', 'jquery', 'jqueryBackstretch'], function (app, $) {
    'use strict';

    $(function() {
        var images = [];
        $('.special-class').each(function() { 
            images.push($(this).attr('src'));
        });
        $('.stretch').backstretch(
            images,
            {duration: 4000, fade: 'slow'}
        );
    });
});

これは完璧にはほど遠いですが、 でうまくいかない場合はusemin、少なくともこれでうまくいくはずです。

于 2013-09-06T09:22:52.160 に答える