Question

我正在尝试将我的构建设置（Yeoman / angular-fullstack生成器）分离出一个文件pdf.worker.js，因为pdf.js需要直接调用它。一旦缩小，它最终会查找如下文件：

dbdj4jkwn.vendor.worker.js

这显然不存在。我试图在我的index.html中添加第二个构建语句，因为我通过bower管理pdf.js，但它没有用。构建系统插入了来自其他bower块的所有bower_component脚本，当它生成jdkjfjf34jk.vendor.worker.js时，该文件为空。

<!-- build:js({client}) app/vendor.worker.js -->
    <!-- bower:js -->
        <script src="bower_components/pdfjs-dist/build/pdf.worker.js"></script>
    <!-- endbower -->
<!-- endbuild -->

我哪里错了？我想也许正确的方法是在Gruntfile.js中写一个排除因此pdf.worker.js没有缩小，但我看不出如何a）使它生成第二个文件并确保它被复制，并且b）保持正确的文件名引用。我怀疑我可能只需排除pdf.js和pdf.worker.js，但问题仍然是1）我如何让它做到这一点，并仍然将未压缩的pdf.js~文件复制到dist ？

回复DanEEStar：

太棒了，谢谢！我已添加以下内容，但我仍然发现它转换pdf文件，当我部署和测试网站时，它给了我无法加载的错误：

http://myserver/app/6004c81b.vendor.worker.js

这是我在grunt文件中的内容（以及在任务中包含它）

pdfWorker: {
        src: 'app/bower_components/pdfjs-dist/build/pdf.worker.js',
        dest: '<%= yeoman.dist %>app/bower_components/pdf-dist/build/pdf.worker.js'
    }

我从index.html中取出了worker文件，但是grunt build将它重新放入！没有直接参考，所以我猜我还不知道它是如何构建的。 gruntfile.js中有指令为bower构建目录，我猜它正在发生的地方 - 如果我能确保它不会缩小/ uglify pdf.js那么它就不会寻找6004c81b.vendor.worker。 JS。

最后一件事 - 我已经设置了workerSrc属性，但我不知道它是否忽略它，或者它只是被uglify进程转换。

Answer 1

不幸的是，这并没有奏效，但它让我开始了，所以谢谢你:)对于其他任何人来说，这里是我如何运作的;

我修改了＆＃34; rev＆＃34;我的Gruntfile.js中的任务（由Yeoman / angular-fullstack生成器设置）并将排除模式添加到src以阻止它重命名pdf.js和pdf.worker.js，如下所示：

rev: {
  dist: {
    files: {
      src: [
        '<%= yeoman.dist %>/public/**/*.js',
        '!<%= yeoman.dist %>/public/bower_components/pdfjs-dist/build/pdf.js',
        '!<%= yeoman.dist %>/public/bower_components/pdfjs-dist/build/pdf.worker.js',
        '<%= yeoman.dist %>/public/{,*/}*.css',
        '<%= yeoman.dist %>/public/assets/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
        '<%= yeoman.dist %>/public/assets/fonts/*'
      ]
    }
  }
},

我将pdf.js和pdf.worker.js留在index.html的bower块中，但是在它之后添加了这个：

<script type="application/javascript">
    PDFJS.workerSrc = 'bower_components/pdfjs-dist/build/pdf.worker.js';
</script>

这就是全部！感谢帮助。

Answer 2

这个pdf.worker.js文件的问题是，它只在pdf.js JavaScript文件中引用，解决问题的一种可能方法可能是这个。

我的Gruntfile中有类似的设置，但我没有测试它，所以要小心。

不要将pdf.worder.js文件添加到index.html文件中！您（或Grunt）必须将此文件直接复制到dist文件夹。您可以通过在Gruntfile.js中添加其他复制规则来执行此操作：

copy: { dist: { ... }, styles: { ... }, pdfworker: { src: 'bower_components/pdfjs-dist/build/pdf.worker.js', dest: '<%%= yeoman.dist %>/bower_components/pdf.worker.js' } }

在构建步骤中调用copy：pdfworker：

grunt.registerTask('build', [ ... 'copy:dist', 'copy:pdfworker', 'cdnify', ... ]);

在index.html文件中，您可以指定此pdf.worker.js文件的路径：
PDFJS.workerSrc =＆＃39; bower_components / pdfjs / build / pdf.worker.js＆＃39 ;;

您仍然必须在index.html文件的bower_components中包含初始pdf.js文件。

Answer 3

我发现此问题的最佳解决方案来自我遇到的问题here。

解决方案非常简单！只需包含组合版本。

pdf.combined.js

在使用wiredep的情况下（真的是为什么手动输入deps，我们开发人员很懒！）你只需要覆盖pdf文件夹中bower.json的主文件。

exports.wiredep = {
  directory: 'bower_components',
  overrides: {
    'pdfjs-dist': {
      main: ['build/pdf.combined.js']
    }
  }
};

啤酒时间！

index.html中的二级凉亭/构建块？

3 个答案: