javascript - gruntjs - 从 javascript 访问 Rev(ed) 图像

Question

我的 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 任务后访问我的图像文件，并且仍然能够在“grunt 服务器”模式下访问这些文件？

谢谢。

泽维尔

Answer 1

您是否尝试过使用 usemin ？通常，在您的代码中将原始文件名替换为缩小/修订/.. 版本是正常的

usemin 通常只针对 CSS 和 HTML 文件，但我相信编辑配置应该也允许解析 js 文件。

我不知道 backstretch 但如果这不起作用，因为你的用户会在某个时候下载图像，一个 hacky 的方法可能是在你的 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，至少这应该可行。