Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to conditionally compile (using Grunt) only changed jade files with template includes

Using a version of what grunt-contrib-watch recommends for compiling only changed files in here: https://github.com/gruntjs/grunt-contrib-watch#compiling-files-as-needed

var changedFiles = Object.create(null);

var onChange = grunt.util._.debounce(function() {
grunt.config('jshint.all.src', Object.keys(changedFiles));
   changedFiles = Object.create(null);
}, 200);

grunt.event.on('watch', function(action, filepath) {
   changedFiles[filepath] = action;
   onChange();
});

This works fine (again with a variation I wrote for it here: https://gist.github.com/pgilad/6897875)

The problem is when using include inside Jade templates, meaning you are including other Jade templates in order to build the complete html file.

Using the singular solution for compile doesn't work because if a .jade file you are working on is embeded using include current_working_jade.jade - the including file won't get recompiled.

Are there any workarounds for this besides compiling all of your jade files from scratch? This causes a problem when you have around ~60 large jade files to compile every time.

The only possible solution I can think of is either mapping jade templates dependencies either externally or with directories, but I don't know any tools/plugins which do that...

like image 801
Gilad Peleg Avatar asked Nov 14 '13 14:11

Gilad Peleg


1 Answers

After already starting to work on a scaffold that will generate a sortof jade sourcemap I found this great project, that already solves this issue:

Jade Inheritance

Usage is as follows:

  1. Install package using: npm install jade-inheritance --save-dev
  2. Where you want to get a list of dependent files from a jade:

    var JadeInheritance = require('jade-inheritance');

    var inheritance = new JadeInheritance(file, basedirname, {basedir:basedirname});

  3. Then when you want to get the file:

    depenedentFiles = inheritance.files;

  4. The project also demonstrates how to apply the concept with grunt.watch in order to compile only changed jade files with their dependents, exactly what I needed:

Using jade-inheritance with grunt watch

like image 82
Gilad Peleg Avatar answered Sep 17 '22 13:09

Gilad Peleg