CODEWITHSUNDEEP
javascriptcompilationpuggruntjsgrunt-contrib-watch
Gilad Peleg
Gilad Peleg

Reputation: 2010

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...

Upvotes: 8

Views: 1508

Answers (2)

Gilad Peleg
Gilad Peleg

Reputation: 2010

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

Upvotes: 4

Martin Hansen
Martin Hansen

Reputation: 5224

I imagine something like checking all jade files and if they include your changed file then recompile that as well. Shouldn't be too hard. Pseudo code:

var allFiles = getAllJadeFileWithIncludesAndProjectPathMap();
//allFiles now contains something like this

{
  'jade/index.jade': ['jade/menu.jade', 'jade/home.jade'],
  'jade/about.jade': ['jade/menu.jade']
}


var rootFiles = [];

_.each(allFiles, function (includes, parent) {
  _.each(includes, function (includePath) {
    var parent;
    while (parent = getParentPath(includePath)) {
      //nothing needed if getParentPath returns null for files that aren't included
    }

    if (rootFiles.indexOf(parent) !== -1) {
      rootFiles.push(parent);
    }
  });
});

Now add these files to the compile task.

Upvotes: 1

Related Questions