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？通常情况下，在代码中用原始文件名替换minified / revved / ..版本

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

我不知道backstretch但是如果这不起作用，因为你是用户会在某个时候下载图像，一个黑客的方法可能是在你的html中添加{{{{ 1}}允许使用jQuery选择它们并执行class="special-class"。这些图像的源代码会更新，您可以这样做：

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'} ); }); });来解决这个问题，至少应该这样做。

gruntjs - 从javascript访问Rev（ed）图像

1 个答案: