Grunt，在构建时将HTML文件复制到脚本文件夹

Question

我在yeoman中使用angular-generator。在gruntfile.js中，/app/views文件夹中的每个html文件都会被复制到dist/views文件夹。但我希望将指令模板与指令本身保存在同一个文件夹中。

示例：

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

当我构建这个项目时，我希望html文件以与上述相同的文件夹结构结束。

这可能应该在gruntfile.js的复制部分中完成。

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'

没有起作用。有什么想法吗？

- Joe

Answer 1

您可以通过修改gruntfile中的代码将app/scripts/*下所有.tmpl.html文件移动到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/*/。如果您的文件夹结构在scripts中有超过一个级别的深度，请将{，*/}*.html更改为**/*.html

- Anthony Patton

---

但这只适用于脚本/小部件？我想能够在 /scripts 以下的任何文件结构级别中拥有 tmpl.html。 - Joe

我已经进行了更新，应该涵盖了我认为您所要求的内容。 - Anthony Patton

Answer 2

这是正常的行为，所有构建后的文件都会被复制到dist文件夹中，因为这是标准的构建输出文件夹。
你可以像这样更改配置：

 copy: {
        main: {
            files: [{
                src: ['img/**'],
                dest: 'dist/img/',
                filter: 'isFile',
                expand: true,
                flatten: true
            }, {
                src: ['pdf/**'],
                dest: 'dist/pdf/',
                filter: 'isFile',
                expand: true,
                flatten: true
            },{
                src: ['error/**'],
                dest: 'dist/error/',
                filter: 'isFile',
                expand: true,
                flatten: true
            }, {
                src: ['fonts/**'],
                dest: 'dist/fonts/',
                filter: 'isFile',
                expand: true,
                flatten: true
            }
        }
    }

这种方法保留了dist文件夹中的旧结构。但我想知道，为什么你不在构建时使用htmlmin来压缩和打包所有模板...

- Anke Wenz