Grunt, copy html files to scripts folder on build

Question

I use the angular-generator in yeoman. In gruntfile.js, every html file in /app/views get copied to dist/views. But I like to keep my directive templates in the same folder as the directive itself.

Example:

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

When I build the project, I want the html file to end up in the same folder structure as above.

This should probably be done in the copy section in gruntfile.js.

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

I tried to add this in the src array:

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

Did not work. Any ideas?

Meteorite

Answer 1

You can move all .tmpl.html from app/scripts/* to dist/scripts/* using code modifications to the gruntfile like below.

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'
        }
       ...

You are going to want to add the new directory to the usemin block as well to ensure the filerev updates make it into your templates

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

You also might want to add the directory to htmlmin to minify to html

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

UPDATED These scripts now reflect moving any .tmpl.html from app/scripts/*/ to dist/scripts/*/. If your folder structure is more than one level deep inside scripts, change {,*/}*.html to **/*.html

Northington

But this only works with scripts/widgets? I want to be able to have tmpl.html at any level in file structure below /scripts. – Meteorite

I have made updates that should cover what I think you are asking for – Northington

Answer 2

it's the normal behavior, that all files after build are copied to the dist-folder, because this is the standard build-output-folder.
what you can do, is to change config like this:

 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
            }
        }
    }

this approach preserves the old structure within the dist folder. But I'm wondering, why you don't use htmlmin to minify and pack all your templates together on build...

Penicillium