问题

Question

这是我的html文件，当我包含我的css和js文件时，我在控制台中遇到错误，他们没有加载。我无法理解为什么会发生这种情况所以即使我的角度模块也无法加载，因为js文件没有加载。为什么会这样？我的文件夹结构牛 -app --css - 图片 --js app.js config.router.js 的index.html -bower_components -node_modules bower.json 的package.json

  <link rel="stylesheet" href="css/app.css">
  <link rel="stylesheet" href="css/angular-carousel.css" type="text/css" />
  <link rel="stylesheet" href="css/isteven-multi-select.css" type="text/css" />



  <link rel="stylesheet" href="../bower_components/photobox/photobox.css" rel="stylesheet">

  <link rel="stylesheet" href="../bower_components/photobox/photobox.ie.css" rel="stylesheet">

  <link rel="stylesheet" href="../bower_components/bootstrap-material-datetimepicker/css/bootstrap-material-datepicker.css">
  <link rel="stylesheet" href="../bower_components/fullcalendar/dist/fullcalendar.css">

</head>
<body ng-controller="MainController">
  <div class="ng-view" autoscroll="true"></div>


  <!--   <div class="container no-padder">
    <div class="navigation m-t">
      <a href="#/view1">View1</a>
      <a href="#/owlcarousel">owlcarousel</a>
      <a href="#/test">Test</a>
      <a href="#/login">Login</a>
    </div>
  </div> -->
  <nav class="navbar navbar-default" scroll-position="scroll"  ng-class="{ 'nav-shrink': scroll > 0}">
    <div class="black-bar">

      <div class="container">


      </div>

    </div>
    <div class="container">

      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand " href="#/"><img class="brand-img img-circle" ng-class="{ 'nav-brand-shrink': scroll > 0}" src="http://placehold.it/50x50"></a>
      </div>

      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

        <ul class="nav navbar-nav navbar-right">
          <li><a href="#/services">services</a>


        </li>
        <li><a href="#/hamburger">hamburger</a></li>
        <li><a href="#/test">Test</a></li>
        <li><a href="#/entrar">entrar</a></li>

      </ul>
    </div>
  </div>
</nav>
<div class="ui-view-container container m-t">

  <div class="app animated" ui-view></div>
</div>

SRC =“// ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"> - ＆GT;

  <!-- Angular -->
  <script src="../bower_components/angular/angular.js"></script>  
  <script src="../bower_components/angular-animate/angular-animate.js"></script>
  <script src="../bower_components/angular-cookies/angular-cookies.js"></script>
  <script src="../bower_components/angular-resource/angular-resource.js"></script>
  <script src="../bower_components/angular-sanitize/angular-sanitize.js"></script>
  <script src="../bower_components/angular-touch/angular-touch.js"></script>
  <script src="../bower_components/angular-material/angular-material.js"></script>
  <script src="../bower_components/angular-ui-router/release/angular-ui-router.js"></script> 
  <script src="../bower_components/ngstorage/ngStorage.js"></script>
  <script src="../bower_components/angular-ui-utils/ui-utils.js"></script>
  <!-- bootstrap -->
  <script src="../bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
  <!-- lazyload -->
  <script src="../bower_components/oclazyload/dist/ocLazyLoad.js"></script>
  <!-- translate -->
  <script src="../bower_components/angular-translate/angular-translate.js"></script>
  <script src="../bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files.js"></script>
  <script src="../bower_components/angular-translate-storage-cookie/angular-translate-storage-cookie.js"></script>
  <script src="../bower_components/angular-translate-storage-local/angular-translate-storage-local.js"></script>
  <script src="../bower_components/angular-route/angular-route.js"></script>




  <script src="../bower_components/angular-ui-select/dist/select.js"></script>
  <script src="../bower_components/aws-sdk-js/dist/aws-sdk.js"></script>

  <script src="../bower_components/ng-file-upload-shim/angular-file-upload.js"></script>
  <script src="../bower_components/angular-carousel/dist/angular-carousel.js"></script>
  <script src="../bower_components/angular-google-maps/dist/lodash.js"></script>
  <script src="../bower_components/angular-google-maps/dist/angular-google-maps.js"></script>
  <script src="../bower_components/angularjs-dropdown-multiselect/src/angularjs-dropdown-multiselect.js"></script>
  <script src="../bower_components/sweetalert/lib/sweet-alert.js"></script> 

  <script src="../bower_components/angular-filter/dist/angular-filter.min.js"></script>
  <script src="../bower_components/moment/moment.js"></script>
  <script src="../bower_components/angular-timer/dist/angular-timer.js"></script>
  <script src="../bower_components/angular-timer/dist/HumanizeDuration.js"></script>


  <script src="../bower_components/angular-aria/angular-aria.min.js"></script>

  <script src="../bower_components/angular-messages/angular-messages.min.js"></script>
  <script src="../bower_components/angular-ui-calendar/src/calendar.js"></script>
  <script src="../bower_components/bootstrap-material-design/dist/js/material.min.js"></script>
  <script src="../bower_components/bootstrap-material-datetimepicker/js/bootstrap-material-datepicker.js"></script>

  <script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

  <script src="../bower_components/fullcalendar/dist/fullcalendar.js"></script>

<!--
<script src="bower_components/angular-resource/angular-resource.min.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.min.js"></script>
-->
<script src="js/app.js"></script>
<script src="js/config.router.js"></script>
</body>
</html>

Answer 1

问题

您不应该以这种方式包含您的凉亭文件。在开发过程中难以管理并产生大量开销。

解决方案

尝试将gulp-bower-files与gulp-inject一起使用，让这些事情让您的生活更轻松。（或者如果你喜欢咕噜声或其他任务经理，请随意使用它们。）

gulp-bower-files做了什么：它将获取每个bower包的目标文件，您可以轻松地将它们复制到“build”文件夹中。例如：您构建的应用程序所在的位置。

快速洞察

gulp-inject做了什么：它会将您的bower包文件注入您的html文件（例如：在指定的html文件中创建<link src=...>和<script src=...>行。甚至css和js文件都是可注入的文件。超级简单，只需尝试一下。

Gulp凉亭文件： https://www.npmjs.com/package/gulp-bower-files

Gulp注射： https://www.npmjs.com/package/gulp-inject

添加时不包括css和js文件

1 个答案:

问题

解决方案

快速洞察