Grunt, скопировать html файлы в папку сценариев на сборке

Я использую angular -генератор в йомене. В файле gruntfile.js каждый html файл в /app/views скопирован в 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'

Не работает. Любые идеи?

Ответ 1

Вы можете переместить все .tmpl.html из приложения /scripts/ * в dist/scripts/*, используя модификации кода в файл grunt, как показано ниже.

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

Ответ 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 для минимизации и упаковки всех ваших шаблонов вместе при сборке...