使用grunt构建的JS文件上图像的参考名称

Question

我将图像引用到JavaScript文件中，当我用grunt进行构建时，该图像的引用不会更改。

这是Gruntfile的一部分

// Put files not handled in other tasks here
        copy: {
            dist: {
                files: [{
                    expand: true,
                    dot: true,
                    cwd: '<%= yeoman.app %>',
                    dest: '<%= yeoman.dist %>',
                    src: [
                        '*.{ico,png,txt}',
                        '.htaccess',
                        'images/*.*',
                        'styles/fonts/{,*/}*.*',
                        'bower_components/sass-bootstrap/fonts/*.*',
                        'views/*.*'
                    ]
                }]
            },

这就是如何调用图像：

var markerImage = new google.maps.MarkerImage(
            'images/marker.png',
            null,
            new google.maps.Point(0, 0),
            new google.maps.Point(18, 18)
        );
        var marker = new google.maps.Marker({
            position: latLng,
            map: regionMap,
            icon: markerImage, //set the markers icon to the MarkerImage
            draggable: true,
        });

当我进行构建时，JS上图像的URL不会更改，但是图像具有其他名称。 GET 127.0.0.1:3000/images/maker.png 404（未找到）

图片的名称是685952.marker.png

Answer 1

我知道这是一个老问题，但是前一段时间我遇到了同样的问题，并提出了一个相当简单的解决方案。

这个想法是在CSS中使用以下内容：

.map-marker {
    background: url('images/marker.png');
    display: none;
}

并使用map-marker类创建HTML元素。 然后，在JS中引用它们：

var markerUrl = /url\((.+)\)/g.exec(document.querySelector('.map-marker').style.background)[1];
var markerImage = new google.maps.MarkerImage(
        markerUrl,
        null,
        new google.maps.Point(0, 0),
        new google.maps.Point(18, 18)
    );
    var marker = new google.maps.Marker({
        position: latLng,
        map: regionMap,
        icon: markerImage, //set the markers icon to the MarkerImage
        draggable: true,
    });

该网址将被正确修改。