Javascript Grunt将角度ui路由器模板连接到一个文件中_Javascript_Node.js_Angularjs_Gruntjs

Javascript Grunt将角度ui路由器模板连接到一个文件中

javascript node.js angularjs gruntjs

Javascript Grunt将角度ui路由器模板连接到一个文件中,javascript,node.js,angularjs,gruntjs,Javascript,Node.js,Angularjs,Gruntjs,我有一个angular ui router项目，到处都有150个文件。我想编写一个grunt任务，将所有这些任务组合成一个index.html，如下所示： <script type="text/ng-template" id="path-to-file-1.html"> Content of file-1.html here </script> <script type="text/ng-template" id="path-to-file-2.html"&

我有一个

angular ui router

项目，到处都有150个文件。我想编写一个grunt任务，将所有这些任务组合成一个

index.html

，如下所示：

<script type="text/ng-template" id="path-to-file-1.html">   
Content of file-1.html here </script>

<script type="text/ng-template" id="path-to-file-2.html">   
Content of file-2.html here </script>

<script type="text/ng-template" id="path-to-file-3.html">   
Content of file-3.html here </script>

...


这里是file-1.html的内容
这里是file-2.html的内容
这里是文件-3.html的内容
...

我正在考虑使用，但我希望尽可能干燥

我目前的想法是：

index.html

<body>
  @@path-to-file-1.html

  @@path-to-file-2.html

  @@path-to-file-3.html
</body>


@@path-to-file-1.html
@@path-to-file-2.html
@@path-to-file-3.html

grunfile.js

replace: {
  dist: {
    options: {
      patterns: [
        {
          match: 'path-to-file-1.html',
          replacement: '<%= grunt.file.read("path/to/file-1.html.html") %>'
        },
        {
          match: 'path-to-file-2.html',
          replacement: '<%= grunt.file.read("path/to/file-2.html.html") %>'
        },
        {
          match: 'path-to-file-3.html',
          replacement: '<%= grunt.file.read("path/to/file-3.html.html") %>'
        }
      ]
    },
    files: [
      {expand: true, flatten: true, src: ['src/index.html'], dest: 'build/'}
    ]
  }
}

替换：{
地区：{
选项：{
模式：[
{
匹配：'path-to-file-1.html'，
替换：“”
},
{
匹配：'path-to-file-2.html'，
替换：“”
},
{
匹配：'path-to-file-3.html'，
替换：“”
}
]
},
档案：[
{expand:true，flatten:true，src:['src/index.html']，dest:'build/'}
]
}
}

这不是干的，因为我必须在两个文件中重复

@@path-to-file-1.html

150次。是否有一种方法可以只在index.html中写入它，并让grunt任务自动“暗示”匹配字符串将是文件名（当然，对于路径，将

替换为

）

奖金：如何扫描目录以获取文件名并在index.html中对其进行编码？我认为这是最好的解决方案，因此我不必维护新文件添加。也许这是另一个我不知道的模块？

不要将它们放在html文件中。使用grunt（或更容易的gulp）创建一个templates.js文件，该文件会自动将html放入模板缓存中

例如，在我的项目中，我使用

这将创建一个js文件，其中包含加载时放置在模板缓存中的标记。

我可能会在这方面迟到，但这里有另一个插件，可以帮助您将角度模板合并到单个HTML文件中：以下是一个例子：

grunt.initConfig({
  angularCombine: {
    combine: {
      files : [ {
        cwd : 'app/views',
        src : [ 'module1/foo.html', 'module2/woot.html', 'modules3/*.html' ],
        dest : 'tmp/combined-views.html'
      } ]
    }
  }
})

您应该编写自定义grunt任务。这不是很难。使用

grunt.file.expand

从类似

src:['app/***/.html']

的地方获取文件名数组。然后循环，做你需要做的任何事情。假设我有

模板：grunt.file.expand（{src:'views/***/.html']}）

，我如何访问

模板

数组？我必须使用.html文件concat，因为我不想依赖angular.js的XHR。原因很简单：我们内部有人只想双击index.html查看所有内容。它们在服务器上运行不是技术性的（比如LiveReload或grunt）。我相信你可以将其分叉并修改，使自己的吞咽过程浓缩成html文件。那么你知道我如何使用ui0router文件中一个大模板文件中的模板吗？如何引用它们？要将大模板文件引用到index.html中，可以使用grunt replace的原始技术。这一次，没有干问题，因为只有一个占位符：@@path-to-big-generated-template-file.html。然后，过程应该是：咕噜角联合收割机->咕噜替换。

grunt.initConfig({
  angularCombine: {
    combine: {
      files : [ {
        cwd : 'app/views',
        src : [ 'module1/foo.html', 'module2/woot.html', 'modules3/*.html' ],
        dest : 'tmp/combined-views.html'
      } ]
    }
  }
})