被leaflet和grunt联合刨了个坑

问题描述

最近一直再用leaflet在作地图相关的，leaflet是什么？leaflet是一个轻量级的地图客户端，原本之前用google的javascript库的，后来google被那啥了，才改用这个库的，感受还蛮不错的。grunt是一个很是优秀的构建工具，组成有Yeoman一套工具及，酷爆了。
在项目中引用了不少的js文件。
下面的是grunt编译压缩js代码的标记，我只是照着人家的用而已。

<!--build:js xxxxxx-->
<!--endbuil-->

---

我引用的主要代码以下

<!-- build:js scripts/components.min.js -->
    <!-- bower:js -->
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/angular/angular.min.js"></script>
    <script src="bower_components/leaflet/dist/leaflet.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <!-- endbower -->
  <!-- endbuild -->

    <!-- build:js scripts/lmap.plugin.min.js -->
    <script src="scripts/L.TileLayer.A.js"></script>
    <script src="scripts/Control.MiniMap.js"></script>
    <script src="scripts/Leaflet.draw.js"></script>
    <script src="scripts/leaflet.layerindex.js"></script>
    <script src="scripts/json2.js"></script>
    <script src="scripts/rtree.js"></script>
    <script src="scripts/leaflet.ajax.js"></script>
    <!-- endbuild -->

我在我本身机器上测试彻底没问题，而后我因为当时须要急用，我草草的测试了一下，而后就

grunt build

把生成的那个dist文件夹发布出去了。。。。
次日，我被上司批评了一大顿，由于我昨天发布出去的站点有问题，执行到某个功能的时候就出错了。我一看 出错了都吓傻了，各类猜想问题从哪里出来的。

查错

问题出来了我这是确定跑不掉的。firebug看一下错出来哪里，发现是adfsafa.components.min.js这个脚本抛出异常了Couldn't autodetect L.Icon.Default.imagePath, set it manually.我就想为啥我在开发的时候毛线问题没有，这压缩打包发布以后就给我出了这么大的问题了，既然冤有头，债有主，只能去找问题了。
看了一下leaflet的源代码，
抛出异常的代码段

function(name) {
            var key = name + 'Url';
            if (this.options[key]) {
                return this.options[key];
            }
            if (L.Browser.retina && name === 'icon') {
                name += '-2x';
            }
            var path = L.Icon.Default.imagePath;
            if (!path) {
                throw new Error('Couldn\'t autodetect L.Icon.Default.imagePath, set it manually.');
            }
            return path + '/marker-' + name + '.png';
        }

很明显是path为null才抛出异常，继续找到L.Icon.Default.imagePath

L.Icon.Default.imagePath = (function() {
        var scripts = document.getElementsByTagName('script'),
            leafletRe = /[\/^]leaflet[\-\._]?([\w\-\._]*)\.js\??/;
        var i, len, src, matches, path;
        for (i = 0, len = scripts.length; i < len; i++) {
            src = scripts[i].src;
            matches = src.match(leafletRe);
            if (matches) {
                path = src.split(leafletRe)[0];
                return (path ? path + '/' : '') + 'images';
            }
        }
    }());

看了半天，发现这货竟然是靠正则匹配名字包含leaflet***.js去得到一个文件路径，从而给我返回一个path保守估计这个返回的是个空才引起异常抛出。固然也经过断点调试的方法确认了问题就是这个就是由于没匹配到东西才引起的血案。

grunt打包的时候，会把<!-- build:js scripts/lmap.plugin.min.js --><!--endbuild-->
代码段合并在一块儿并重命名一下。
问题就出在我压缩后发布后，script标签匹配不到leaflet***.js，才引起了这个抛出异常致使个人代码没法继续正常工做的血案。

应急解决

也没时间去思考该怎么完全解决这个问题，临时解决一下了。我把leaflet的代码加了一句

if (matches) {
                path = src.split(leafletRe)[0];
                return (path ? path + '/' : '') + 'images';
            }
    return '我该给他的路径';

教训

首先，解决这样的问题的时候，原则上不该该去修改这个库，而是先试着在个人代码中去修正这个问题的影响，由于我项目依赖管理是依靠bower来作的，我这里只是应急一下。
而后，我发布代码以后测试不够充分，很明显的问题由于仓促发布而没发现，这固然是个人失职。（其实这问题是我如今遭遇的最大的问题，这个项目如今由我开发测试发布，并且没有文档和明确的需求，又扯到伪需求的问题上去了）。
这个问题却是让我重视到了测试的重要性了，grunt彻底是正常使用，leaflet也是正常的使用，我也是按照套路在作开发，可是遇到一块儿了就是给我出这个问题了。写代码的时候遇到坑其实不是咱们不当心引入的，而是上游之间可能出现冲突。