咕 包含子级（_ *。jade）时编译所有.jade文件

Question

I have next structure:

jade
├── _skeleton.jade
├── _header.jade
├── _footer.jade
|
├── includes
│ └── _include-on-index.jade
│ └── _include-on-page-1.jade
│ └── _include-on-all-pages.jade
|
├── pages
│ └── index.jade
│ └── page-1.jade
│ └── page-2.jade
│ └── page-3.jade

And I need to setup jade compile, like some apps, (for example Prepros).

It means that if I edit page-3.jade I need compile only page-3.jade, if I edit file that start with _ .jade, I don`t need compile exectly this _ .jade file like html, but I need to compile all .jade files that included this _*.jade file

For example when I edit file _header.jade, I need compile all files that included _header.jade, if I edit _include-on-index.jade I need to compile file without _ that included _include-on-index.jade

Can I do this with Grunt?

Answer 1

you can use grunt-contrib-jade and grunt-contrib-watch and insert a watch for this jade files.

so let's say everytime when you change a .jade file the watch will see this change and will compile your file.

assuming i have this tree:

jade/templates with all my .jade files

jade/compiled-templates with all my compiled jade templates for .html

config for jade:

//Jade ===============================
            config.jade = {
                    compile: {
                        options: {
                            client: false,
                            pretty: true
                        },
                        files: [ {
                          cwd: "jade/templates",
                          src: "**/*.jade",
                          dest: "jade/compiled-templates",
                          expand: true,
                          ext: ".html"
                        } ]
                    }
                }

config for watch:

    //Watch ===============================

    config.watch = {
         scripts: {
            files: ["jade/**/*.jade"]
            ,tasks: ["dev"]
         }
    }

I hope this answer your question.