如何创建一个Grunt文件

时间:2014-03-20 13:48:19

标签: gruntjs

我的角应用程序的索引文件如下所示:

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <title>My AngularJS App</title>
  <link rel="stylesheet" href="css/bootstrap.min.css"/>
<!--  <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>-->
  <link rel="stylesheet" href="css/app.css"/>

</head>

<body style="padding:10px;" ng-controller="appCtrl">
  <div class="container-fluid">
  <div ng-include="'toolbar.tpl.html'"></div>

  <div ui-view></div>

<hr>

  <div class="row-fluid">
    <div class="span12"> 

      This is the footer section
    </div>
  </div>

</div> <!-- closing class="container-fluid"

<!-- Included for ui-date -->  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="lib/jquery/jquery.layout-latest.min.js"></script>


<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
<script src="lib/angular/angular-cookies.js"></script>
<script src="lib/angular/angular-ui-router.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<script src="lib/angular/angular-resource.js"></script>


<!-- Main Module here -->
<script src="js/resources/resources.js"></script>
<script src="js/app.js"></script>


<!-- Employee Module here -->
<script src="js/employee/employeeCtrl.js"></script>
<script src="js/employee/employeeEditCtrl.js"></script>

<!-- Machine's Module here -->

<!-- Supplier's Module here -->

<!-- Customers's Module here -->

<!-- Common Modules here -->
<script src="js/globalservices.js"></script>
<script src="js/services.js"></script>


</body>
</html>

这只是它的快照。我从上面的代码中删除了很多模块,使问题清晰可辨。文件夹结构类似于附加的快照。

我认为索引文件已变得无法管理。我接下来要做的是创建一个grunt文件。我不知道从哪里开始。任何建议将不胜感激。

谢谢,enter image description here

1 个答案:

答案 0 :(得分:0)

首先,你需要计划你想要的结果:一个缩小的javascript,只有一个与所有其他连接,单元测试等等。

从连接版本开始,您需要使用grunt-contrib-concat将它们合并到一个您将在index.html中引用的单个文件中。

Grunt入门指南:http://gruntjs.com/getting-started Grunt Concat的链接:https://github.com/gruntjs/grunt-contrib-concat