我在使用Bower上相对较新,我不确定在生产中是否应该链接到bower_components。我应该使用grunt任务将所需文件从bower_components链接或复制到单独的目录中吗?
我问这个问题是因为我从来没有见过一个有名字叫“bower_components”的目录的网站,所以我有点害怕。所有初学者指南都只链接到'bower_components/...',就像Angular教程一样。
你正在使用Yeoman吗?
根据你的Gruntfile.js文件,你应该有不同的任务。其中一个任务是'bower-install':这个任务将读取你的index.html文件,查找以下注释块:
<!-- bower:js -->
<!-- endbower -->
将您在bower.json中指定的所有依赖项注入其中。
这意味着任务将为您编写所有的<script src"/bower_components/..">块。
您从未注意到带有"bower_components"引用的网站,因为您的/app目录是您的“开发”环境,您的源项目。从源代码创建生产应用程序时,您将运行“build”任务:该任务由执行不同工作的不同子任务组成,其中之一是将bower_install任务添加的所有脚本合并为一个单独的js文件。
然后有另一个任务将对此文件进行缩小,另一个任务将运行测试,另一个任务将创建一个“dist”目录,其中包含您的生产站点等等...
如果您使用Yeoman,则所有这些任务都已在Gruntfile.js中配置好了,只需打开它并尝试理解每个任务的作用即可。
乍一看可能很难理解,例如构建任务引用了14或15个子任务,我建议您注册仅运行一个任务的自定义任务,然后查看会发生什么。
干杯
.bowerrc
文件(放在你的 bower.json
文件旁边),并将 directory
属性设置为其他名称,来为你的 bower 安装目录起一个更好的名字。例如,我在我的 .bowerrc
文件中有以下内容:{
"directory": "public/vendor"
}
同时还有一个相关的问题,即你是否应该将此目录的内容检入源代码控制。要了解更深入的讨论,请参见这里。
最后,正如其他人已经提到的,建议您将前端依赖项进行合并和压缩。
我认为直接链接没有问题,但通常情况下,您会希望将所有脚本连接到一个文件中,并将其压缩以减小生产环境中的文件大小。
grunt uglify 任务 可以轻松地处理这两件事情。您只需提供要加入的文件数组即可。
// Project configuration.
grunt.initConfig({
uglify: {
my_target: {
files: {
'dest/output.min.js': ['src/input1.js', 'src/input2.js']
}
}
}
});
很常见的情况是开始只使用bower_components。你可以在angular-seed起始项目的脚本引用中看到这一点。但是,当您需要部署生产应用程序并且加载时间和性能变得关键时,您应该考虑将解决方案转换为合并和压缩依赖项。