Sep 13, 2014

Compile preprocessors like Coffeescript / SASS on saving in Komodo Edit

Be able to customise the editor is very convenient.

A normal approach is running a "watcher".
This approach is to call the compiler on saving (check Trigger > After save in Marco properties)
The code can be extends for other usage! : )

Note that Komodo has built-in syntax checking for SASS. I want this be off because it generates ".sass-cache" without giving me result. Check it off in preference window.

If something wrong, the command line output will tell you. That's enough : )
We can further "parse" the output to quick click to show the wrong code.

// Run after file saved
// 
// Install Sass: sudo gem install sass
// Install CoffeeScript: npm install -g coffee-script
komodo.assertMacroVersion(3);
var koDoc = ko.views.manager.currentView.koDoc;
var input = koDoc.file.dirName + '/' + koDoc.file.baseName;
var barename = input.substr(0, input.length - koDoc.file.ext.length);

switch (koDoc.file.ext) {
    case '.sass':
        var output =  barename + '.css';
        ko.run.runEncodedCommand(window, 'sass --no-cache ' + input + ' ' + output);
        break;
    case '.coffee':
        ko.run.runEncodedCommand(window, 'coffee --map --compile ' + input);
        break;
    default:
        break;
}

4 comments:

  1. // Run after file saved
    //
    // Install Sass: sudo gem install sass
    // Install CoffeeScript: npm install -g coffee-script
    // Install TypeScript: npm install -g typescript

    komodo.assertMacroVersion(3);

    var koDoc = ko.views.manager.currentView.koDoc,
    baseName = koDoc.file.baseName,
    ext = koDoc.file.ext,
    input = koDoc.file.dirName + '/' + baseName,
    output = input.substr(0, input.length - ext.length);

    // Sass
    if(['.sass','.scss'].indexOf(ext) > -1 && baseName.charAt(0) != '_') {
    output += '.css';
    ko.run.runEncodedCommand(window, 'sass --no-cache "'+input+'" "'+output+'"');
    }

    // CoffeeScript
    else if(ext == '.coffee') {
    ko.run.runEncodedCommand(window, 'coffee --map --compile "'+input+'"');
    }

    // TypeScript
    else if(ext == '.ts') {
    ko.run.runEncodedCommand(window, 'tsc "'+input+'"');
    }

    ReplyDelete
  2. Thank you very much for your helpfull script! The above is my last modification after testing around a bit.

    ReplyDelete
  3. Optimized version:


    // Run after file saved
    //
    // Install Sass: sudo gem install sass
    // Install CoffeeScript: npm install -g coffee-script
    // Install TypeScript: npm install -g typescript

    komodo.assertMacroVersion(3);

    var view,
    file;

    if (!(view = ko.views.manager.currentView)) {
    alert('No document');
    return false;
    }
    if (!(file = view.koDoc.file)) {
    alert('No file');
    return false;
    }

    var baseName = file.baseName,
    ext = file.ext,
    input = file.dirName + '/' + baseName,
    output = input.substr(0, input.length - ext.length),
    command = ko.run.runEncodedCommand;

    // Sass
    if(['.sass','.scss'].indexOf(ext) > -1 && baseName.charAt(0) != '_') {
    output += '.css';
    command(window, 'sass --no-cache "'+input+'" "'+output+'"');
    }

    // CoffeeScript
    else if(ext == '.coffee') {
    command(window, 'coffee --map --compile "'+input+'"');
    }

    // TypeScript
    else if(ext == '.ts') {
    command(window, 'tsc "'+input+'"');
    }

    ReplyDelete

New comment