Grunt,在构建时将html文件复制到脚本文件夹

Question

我在自耕农中使用角度发生器.在gruntfile.js中,每个html文件都/app/views被复制到dist/views.但我喜欢将指令模板保存在与指令本身相同的文件夹中.

例:

/app/scripts/widgets/mywidget.directive.js
/app/scripts/widgets/mywidget.tmpl.html

当我构建项目时,我希望html文件最终处于与上面相同的文件夹结构中.

这应该可以在gruntfile.js的copy部分中完成.

copy: {
  dist: {
    files: [{
      expand: true,
      dot: true,
      cwd: '<%= yeoman.app %>',
      dest: '<%= yeoman.dist %>',
      src: [
        '*.{ico,png,txt}',
        '*.html',
        'images/{,*/}*.{webp}',
        'styles/fonts/{,*/}*.*'
      ]
    }...

我试着在src数组中添加它:

    '<%= yeoman.dist %>/scripts/{,*/}*.tmpl.html'

不工作.有任何想法吗？

Answer 1

您可以使用对 gruntfile 的代码修改将所有 .tmpl.html 从 app/scripts/* 移动到 dist/scripts/* ，如下所示。

files: [{
          expand: true,
          dot: true,
          cwd: '<%= yeoman.app %>',
          dest: '<%= yeoman.dist %>',
          src: [
            '*.{ico,png,txt}',
            '*.html',
            'views/{,*/}*.html'
          ]
        }, {
          // This block handles copying the .tmpl.html from app/scripts to dist/scripts
          expand: true,
          cwd: '<%= yeoman.app %>/scripts',
          dest: '<%= yeoman.dist %>/scripts',
          src: '{,*/}*.tmpl.html'
        }
       ...

您还需要将新目录添加到 usemin 块中，以确保 filerev 更新将其添加到您的模板中

usemin: {
      html: ['<%= yeoman.dist %>/{,*/}*.html', 
             '<%= yeoman.dist %>/scripts/{,*/}*.html'],
      ...

您可能还想将目录添加到 htmlmin 以缩小为 html

htmlmin: {
  dist: {
    ...
    files: [
      {
        expand: true,
        cwd: '<%= yeoman.dist %>',
        src: ['*.html', 'views/{,*/}*.html', 'scripts/{,*/}*.html'],
        dest: '<%= yeoman.dist %>'
      }
    ]
  }

更新 这些脚本现在反映将任何 .tmpl.html 从 移动app/scripts/*/到dist/scripts/*/。如果您的文件夹结构在脚本中的深度超过一层，请更改{,*/}*.html为**/*.html