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

谢谢。

泽维尔

4

1 回答 1

1

你试过使用usemin吗？通常需要在代码中用缩小/revved/.. 版本替换原始文件名

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，至少这应该可行。

于 2013-09-06T09:22:52.160 回答