Question

我是Yeoman和Grunt的新手，在做完＆＃34; grunt serve：dist＆＃34;后，我在样式表上遇到了很多问题。

它改变了字体宽度，在标题中添加了一些填充，几乎完全破坏了一个表，我不知道从哪里开始调试，但我相信它确实找到了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

我也遇到了同样的事情。我正在使用gulp和bower给我Slick Carousel插件。我相信gulp和grunt在很多方面都很相似。不幸的是，它是调用这些文件的插件，它是404，因为它的相对网址不再指向正确的位置，因为编译了gulp / grunt他们把它们注入dist /.

这是我如何解决它。我在slick.scss中复制并粘贴了这些URL，这些URL正在进行调用并生成一个新文件并将其保存在我的src /文件夹中。我将所有这些文件上传到主机。我将这些相对URL更改为绝对URL（指向托管文件），以覆盖进行调用的相对URL。

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

Answer 2

似乎grunt在最终版本中构建任何CSS，即使没有使用。我有一个我从不导入的main.scss文件，但是那个文件样式正在弄乱其余部分。

Answer 3

好的，所以我无法添加评论，因为我的声誉还不够高。所以我打算问你是否使用了angular-fullstack发生器。当我使用这台发电机时，我遇到了类似的错误。我永远无法确定确切的原因......除了它必须处理我花了几个小时研究它。基本上为了快速解决方案，我从默认构建中重新复制了index.html页面，然后我确保永远不会触及Google分析线下面的任何内容。出于某种原因，当我甚至更改标签或间距时，我开始出现此错误。问题是你的脚本文件没有被注入到缩小和缩小的app.js dist文件中。

当然，在你的例子中，它看起来并不是你的js文件是一个问题但是其他一些文件没有被正确复制。我即将发布一个问题与类似的问题，除了它正在处理bower_components，所以我稍后会链接它，以防它对你有所帮助。

Answer 4

我认为您应该检查Grunt文件，其中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包上有组件的副本

为什么＆＃34; grunt发球：dist＆＃34;渲染一个不同的视图而不是＆＃34; grunt serve：dist＆＃34;？

4 个答案: