Как скопировать скомпилированные нефритовые файлы в папку назначения с помощью grunt

Для одностраничного приложения, над которым я работаю, у меня есть следующая структура:

  • расстояние
    • CSS
    • JS
    • Lib
    • обертоны
    • index.html
  • ЦСИ
    • CSS
    • JS
    • Lib
    • Просмотры
      • обертоны
      • index.jade

Каталог dist будет использоваться экспресс-сервером для обслуживания проекта. У меня есть тривиальные задачи grunt (использование grunt-contrib-clean, grunt-contrib-copy) для очистки dist и копирования src/css, src/js, src/lib до dist.

Проблема заключается в src/views. Этот каталог содержит файлы jade, которые необходимо скомпилировать в html файлы. После компиляции я хочу, чтобы они были в dist (index.html в корневом каталоге dist, partials как subdir).

В настоящее время я использую задачу grunt-contrib-jade для компиляции и копирования нефритовых файлов. Я хочу скопировать их на dist, так как я не хочу добавлять скомпилированные html файлы в исходный элемент управления. Но теперь это не работает, так как вам нужно указать каждый нефритовый файл (сейчас их немного, но это будет расти):

   jade: {
        compile: {
            options: {
                pretty: true
            },
            files: {
                // TODO make one line
                'dist/index.html': ['src/views/index.jade'],
                'dist/partials/banner.html': ['src/views/partials/banner.jade'],
                'dist/partials/dashboard.html': ['src/views/partials/dashboard.jade'],
                'dist/partials/navbar.html': ['src/views/partials/navbar.jade'],
                'dist/partials/transfer.html': ['src/views/partials/transfer.jade']
            }
        }
    },

Можно ли использовать задачу grunt-contrib-jade (или другую) с фильтром каталогов? Как это:

   jade: {
        compile: {
            options: {
                pretty: true
            },
            dir: {
                'dist': ['src/views']
            }
        }
    }

Ответы

Ответ 1

Я закончил обновление до 0,4 (что вызывает некоторые другие проблемы, но с этим я смогу справиться).

С grunt версии 0.4 можно использовать grunt.file.expandMapping:

    jade: {
        compile: {
            options: {
                pretty: true
            },
            files: grunt.file.expandMapping(['**/*.jade'], 'dist/', {
                cwd: 'src/views',
                rename: function(destBase, destPath) {
                    return destBase + destPath.replace(/\.jade$/, '.html');
                }
            })

        }
    },

Ответ 2

Небольшое пояснение из Grunt wiki - расширение отображения:

grunt.file.expandMapping(patterns, dest [, options])

Обратите внимание, что, хотя этот метод может быть использован для программного создания массива файлов для многозадачной задачи, декларативный синтаксис для этого описан в разделе "Построение динамического файла" раздела Настройка руководства по заданиям.

Предположим, что конфигурация будет выглядеть так:

files: [ { 
  expand: true, 
  src: "**/*.jade", 
  dest: "dist/", 
  cwd: "src/views", 
  ext: '.html'
} ];

Тот же результат с декларативной конфигурацией.

Ответ 3

Если вы хотите изменить только расширение файлов с .jade на .html, другой параметр будет использовать параметры flatten и ext, например:

jade: {
    compile: {
        options: {
            data: { debug: false, title: 'My awesome application' }
        },
        files: grunt.file.expandMapping(['**/*.jade'], '<%= yeoman.dist %>/views', {
            cwd: '<%= yeoman.app %>/views',
            flatten: true,
            ext: '.html'
       })
    }
}

Или даже лучше (как объяснено здесь):

jade: {
    compile: {
        options: {
            data: { debug: false, title: 'My awesome application' },
            pretty: true
        },
        files: [
            {
                expand: true,
                cwd: '<%= yeoman.app %>/views',
                src: ['**/*.jade'],
                dest: '<%= yeoman.dist %>/views',
                ext: '.html'
            }
        ]}
}

Спасибо.