Grunt компиляция файлов Jade

Я пытаюсь настроить мой Gruntfile для компиляции всех моих файлов Jade в отдельные файлы HTML. Например, если у меня есть следующая исходная папка:

source
└── templates
    ├── first.jade
    ├── second.jade
    └── third.jade

Тогда я ожидал бы grunt jade для вывода:

build
└── templates
    ├── first.html
    ├── second.html
    └── third.html

Здесь мой Gruntfile с помощью grunt-contrib-jade:

module.exports = function(grunt) {
    grunt.initConfig({

        jade: {
            compile: {
                options: {
                    client: false,
                    pretty: true
                },
                files: [ {
                  src: "*.jade",
                  dest: "build/templates/",
                  ext: "html",
                  cwd: "source/templates/"
                } ]
            }
        },
    });

    grunt.loadNpmTasks("grunt-contrib-jade");
};

Однако, когда я запускаю команду jade, я получаю следующие ошибки:

Running "jade:compile" (jade) task
>> Source file "first.jade" not found.
>> Source file "second.jade" not found.
>> Source file "third.jade" not found.

Что я делаю неправильно?

Ответ 1

Чтобы завершить приведенный выше ответ

    jade: {
        compile: {
            options: {
                client: false,
                pretty: true
            },
            files: [ {
              cwd: "app/views",
              src: "**/*.jade",
              dest: "build/templates",
              expand: true,
              ext: ".html"
            } ]
        }
    }

Итак, если ваш источник структурирован так:

app
└── views
    └── main.jade
    └── user
        └── signup.jade
        └── preferences.jade

grunt jade создаст следующую структуру

build
└── templates
    └── main.html
    └── user
        └── signup.html
        └── preferences.html

EDIT: grunt-contrib-jade устарел. Вы должны использовать grunt-contrib-pug. Это точно то же самое, но им пришлось переименовать нефрит в мопс!

Ответ 2

На всякий случай кому-то это нужно. Ничего выше не работало. Вот как это, наконец, сработало для меня.

Я использую grunt.loadNpmTasks('grunt-contrib-pug'); Я не знаю, если Contrib-jade, поскольку с тех пор устарел, но это решение работает для меня. Мне нужен первый файловый объект для обработки только index.jade, а второй - для обработки шаблонов. Теперь, если я не разделить его и просто укажу на каталог проекта, jade-компилятор потеряется внутри моей папки с пакетом npm, так что это выполняется намного быстрее.

pug: {
        compile: {
            options: {
                client: false,
                pretty: true,
                data: {
                    debug: false
                }
            },
            files: [
            {
                'dist/index.html': ['index.jade']
            },
            {
                src: "templates/*.jade",
                dest: "dist",
                expand: true,
                ext: ".html"
            } ]
        }
    }

Ответ 3

Я знаю, что это старый пост, но я продолжал возвращаться сюда, пытаясь решить подобную проблему. Я хотел вывести несколько html файлов из одного файла шаблона jade, используя for-loop. Поэтому необходим больший контроль над объектом "файлы".

Две проблемы, с которыми я столкнулся, и в конечном итоге решили, устанавливали имя выходного файла (текстовый объект KEY) и убедились, что встроенные функции javascript выполняются немедленно, чтобы переменные цикла были доступны.

Вот мой полный исходный код с комментариями. Надеюсь, это полезно для всех, кто наткнулся на этот пост.

Gruntfile.js:

module.exports = function(grunt) {

  // Create basic grunt config (e.g. watch files)
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    watch: {
      grunt: { files: ['Gruntfile.js'] },
      jade: {
        files: 'src/*.jade',
        tasks: ['jade']
      }
    }
  });

  // Load json to populate jade templates and build loop
  var json = grunt.file.readJSON('test.json');

  for(var i = 0; i < json.length; i++) {
      var obj = json[i];

      // For each json item create a new jade task with a custom 'target' name.
      // Because a custom target is provided don't nest options/data/file parameters 
      // in another target like 'compile' as grunt wont't be able to find them 
      // Make sure that functions are called using immediate invocation or the variables will be lost
      // http://stackoverflow.com/info/939386/immediate-function-invocation-syntax      
      grunt.config(['jade', obj.filename], {
        options: {
            // Pass data to the jade template
            data: (function(dest, src) {
                return {
                  myJadeName: obj.myname,
                  from: src,
                  to: dest
                };
            }()) // <-- n.b. using() for immediate invocation
        },
        // Add files using custom function
        files: (function() {
          var files = {};
          files['build/' + obj.filename + '.html'] = 'src/index.jade';
          return files;
        }()) // <-- n.b. using () for immediate invocation
      });
  }

  grunt.loadNpmTasks('grunt-contrib-jade');
  grunt.loadNpmTasks('grunt-contrib-watch');

  // Register all the jade tasks using top level 'jade' task
  // You can also run subtasks using the target name e.g. 'jade:cats'
  grunt.registerTask('default', ['jade', 'watch']);
};

SRC/index.jade:

doctype html
html(lang="en")
  head
    title= pageTitle
    script(type='text/javascript').
      if (foo) {
         bar(1 + 5)
      }
  body
    h1 #{myJadeName} - node template engine    
    #container.col
      p.
        Jade is a terse and simple
        templating language with a
        strong focus on performance
        and powerful features.

test.json:

[{
    "id" : "1", 
    "filename"   : "cats",
    "tid" : "2016-01-01 23:35",
    "myname": "Cat Lady"
},
{
    "id" : "2", 
    "filename"   : "dogs",
    "tid" : "2016-01-01 23:45",
    "myname": "Dog Man"
}]

После запуска "grunt" вывод должен быть:

build/cats.html
build/dogs.html