1

也许我遗漏了一些东西，但这是我的问题：在运行gulp dist“生产模式”后，所有javascript文件都捆绑好，但在 index.html 中仍然引用jspm_packages文件夹以及一些 JavaScript 文件，如下所示：

   <head>
       <link rel="stylesheet" href="jspm_packages/github/twbs/bootstrap@3.3.4/css/bootstrap.css"/>
       <link rel="stylesheet" href="build/css/main.css"/>
    </head>
    <body>
        <script src="jspm_packages/system.js"></script>
        <script src="config.js"></script> 
        <script>
             System.import('build/js/main.js!jsx');
        </script>
    </body>

所有这些引用都不再存在于gulp dist任务中创建的 dist 文件夹中。

这是来自 GitHub 上的 React+JSPM 项目之一的用例示例：https ://github.com/tinkertrain/jspm-react

这种行为在我遇到的许多项目中都很常见，所以我可能遗漏了一些东西......我应该配置一些东西来进行一些调整吗？也许调用另一个任务来创建我自己的“生产模式”html？

干杯

4

1 回答 1

1

您必须处理您的 html 并将所有这些替换<link>为<script>生产的。可以说有很多方法和工具可以做到这一点，但是当您说您正在使用 Gulp 时，您可能需要检查Gulp-html-replace。

基本上，这个想法是添加一些 html 注释，指示您选择的工具将这些标签替换为生产标签。在你的情况下

   <head>
    <!-- build:css -->
     <link rel="stylesheet" href="jspm_packages/github/twbs/bootstrap@3.3.4/css/bootstrap.css"/>
     <link rel="stylesheet" href="build/css/main.css"/>
   <!-- endbuild -->
   </head>

    <!-- build:js -->
    <script src="jspm_packages/system.js"></script>
    <script src="config.js"></script> 
    <script>
         System.import('build/js/main.js!jsx');
    </script>
    <!-- endbuild -->

将产生：

  <head>
   <link rel="stylesheet" href="styles.min.css">
  </head>
  <body>
   <script src="js/bundle.min.js"></script> 
  </body>
于 2015-08-26T14:14:07.413 回答