你应该在生产中链接到bower_components吗？

Question

我使用Bower相对较新,我不知道你是否应该在生产中链接到bower_components.我是否应该使用grunt任务将我需要的文件从bower_components链接或复制到一个单独的目录中？

我问这个是因为我从未见过一个名为"bower_components"的网站,所以我有点害怕.所有初学者指南都链接到'bower_components/...',就像角度教程一样.

Answer 1

你在用Yeoman吗？

根据你的Gruntfile.js你应该有不同的任务,其中一个是'bower-install':这个任务会读你index.html,找到以下注释块

<!-- bower:js -->
<!-- endbower -->

并在其中注入 bower.json中指定的所有依赖项.这意味着该任务将为您的所有<script src"/ bower_components/..">块写入.

你从来没有注意到一个带有"bower_components"引用的网站,因为你的/ app dir是你的'开发'环境,你的源项目.从源代码中,您将创建运行"构建"任务的生产应用程序:此任务由生成不同作业的不同子任务组成,其中一个是将bower_install任务添加的所有脚本连接到一个单独的js文件中.

然后还有另一个任务将缩小此文件,另一个将运行测试,另一个将创建生产站点所在的"dist"目录等等...

如果您使用Yeoman,您已经在Gruntfile.js中配置了所有这些任务,只需打开它并尝试了解每个任务的作用.

乍一看,它很难理解,例如构建任务指的是14或15个子任务,我建议你注册只运行一个任务的自定义任务,看看会发生什么.

干杯

Answer 2

您可以通过创建.bowerrc文件(文件旁边bower.json)并将directory属性设置为其他内容,为您的凉亭安装目录提供更好的名称.例如,我有以下内容.bowerrc:

{
  "directory": "public/vendor"
}

然后还有一个密切相关的问题,即您是否应该检查此目录的内容以获取源代码管理.有关该问题的更深入讨论,请参见此处.

最后,正如其他人已经提到的那样,建议您连接并缩小前端依赖项.

Answer 3

我没有看到直接链接到它的任何问题,但通常你会想要将所有脚本连接到一个文件中并对其进行uglify,以便减少文件大小以进行生产.

grunt uglify任务可以很容易地为您处理这两件事.您只需提供要加入的文件数组.

// Project configuration.
grunt.initConfig({
  uglify: {
    my_target: {
      files: {
        'dest/output.min.js': ['src/input1.js', 'src/input2.js']
      }
    }
  }
});