Grunt，在构建时将 html 文件复制到脚本文件夹答案

【问题标题】：Grunt, copy html files to scripts folder on buildGrunt，在构建时将 html 文件复制到脚本文件夹
【发布时间】：2015-12-09 12:28:25
【问题描述】：

我在 yeoman 中使用了角度生成器。在 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'

没有用。有什么想法吗？

【问题讨论】：

标签： javascript gruntjs yeoman yeoman-generator-angular

【解决方案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

【讨论】：

但这仅适用于脚本/小部件？我希望能够在 /scripts 下的文件结构中的任何级别拥有 tmpl.html。
我已经做了更新，应该涵盖我认为你所要求的内容

【解决方案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 来缩小和打包你所有的模板在构建...

【讨论】：