为什么"grunt serve:dist"呈现的视图与"grunt serve:dist"不同？

Question

我是Yeoman和Grunt的新手，在做了"Grunt serve:dist"之后，我在样式表方面有了很大的经验。

它改变了字体宽度，在标题中添加了一些填充，实际上完全破坏了一个表，我不知道从哪里开始调试，但我相信它确实找到了CSS，因为字体样式确实改变了，它正在读取JS，我放了一些console.log（）来查看它的工作情况，但也有一些例外，比如（Chrome控制台）：

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:9000/styles/fonts/slick.woff
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:9000/styles/ajax-loader.gif
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:9000/styles/fonts/slick.ttf
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:9000/styles/fonts/slick.svg#slick

知道吗？

Answer 1

我也遇到了完全相同的事情。我用gullow和bower给我Slick Carousel插件。我相信吞咽和咕哝在很多方面是相似的。不幸的是，是插件调用了这些文件，它是404，因为它的相对URL不再指向正确的位置，因为gulp/grumt是如何编译它们并将它们注入dist/的。

以下是我解决问题的方法。我只从进行调用的bower组件中的slick.scs复制并粘贴了这些URLS，并创建了一个新文件并将其保存在我的src/文件夹中。我把所有这些文件都上传到了主机上。我将这些相对URL更改为绝对URL（指向托管文件），以便覆盖进行调用的相对URL。

让我知道这解决了你的问题。我希望这会有所帮助！

Answer 2

似乎grunt在最终版本中构建了任何CSS，即使没有使用。我有一个main.scss文件，我从来没有导入过，但正是这个文件样式扰乱了其他文件。

Answer 3

好的，所以我不能添加评论，因为我的声誉还不够高。所以我想问你是否在使用角度全堆栈生成器。我在使用这个生成器时也遇到了类似的错误。我永远无法确定确切的原因。。。除了它必须处理<!-- injector:js -->之外，我花了几个小时研究它。基本上，为了快速解决方案，我从默认版本重新复制了index.html页面，然后我确保永远不要接触谷歌分析线以下的任何内容。出于某种原因，当我甚至更改制表符或间距时，我开始出现这个错误。问题是您的脚本文件没有被注入到被缩小和ulgified的app.js dist文件中。

当然，在您的示例中，问题似乎并不是您的js文件，而是其他一些文件没有被正确复制。我即将发布一个问题，该问题涉及类似的问题，只是它涉及bower_组件，所以我稍后会将其链接起来，以防对您有任何帮助。

Answer 4

我认为你应该检查Grunt File中的Copy选项，你可以在Grunt serve:dist命令中看到复制的组件参见src:[…

 copy:
        dist:
            files: [
                expand: true
                dot: true
                cwd: "<%= yeoman.app %>"
                dest: "<%= yeoman.dist %>"
                src: [
                    "favicon.ico"
                    # bower components that has image, font dependencies
                    "bower_components/font-awesome/css/*"
                    "bower_components/font-awesome/fonts/*"
                    "bower_components/weather-icons/css/*"
                    "bower_components/weather-icons/fonts/*"
                    "bower_components/weather-icons/font/*"
                    "fonts/**/*"
                    "i18n/**/*"
                    "images/**/*"
                    # "styles/bootstrap/**/*"
                    "styles/fonts/**/*"
                    "styles/img/**/*"
                    "styles/ui/images/*"
                    "views/**/*"
                ]
            ,
                expand: true
                cwd: ".tmp"
                dest: "<%= yeoman.dist %>"
                src: ["styles/**", "assets/**"]
            ,
                expand: true
                cwd: ".tmp/images"
                dest: "<%= yeoman.dist %>/images"
                src: ["generated/*"]
            ]

确保您的dist包上有组件的副本