munch.js

/**
 * MUNCH.js
 * http://jmrocela.github.com/munchjs
 *
 * munch.js is a utility that rewrites classes and ids in CSS, HTML, and JavaScript files
 * in order to save precious bytes and obfuscate your code.
 *
 * Copyright (c) 2013 John Rocela
 * Licensed under the MIT license.
 * https://github.com/gruntjs/grunt/blob/master/LICENSE-MIT
 */

'use strict';

var path = require('path'),
    glob = require('glob'),
    fs = require('fs'),
    jsdom = require('jsdom').jsdom,
    $ = require('jquery'),
    clc = require('cli-color'),
    parse = require('css-parse'),
    Hashids = require('hashids'),
    hashids = new Hashids("use the force harry", 8),
    serializeDocument = require("jsdom").serializeDocument;;

/**
 * MUNCHER!!!!
 *
 * @param args Object an optimist.args object.
 */
var Muncher = function (args) {
    // tokens from files within views, css and js together
    this.map = {
        "id": {},
        "class": {}
    };

    // files, keep track of sizes
    this.files = {}

    // token counter
    this.mapCounter = 0;

    // ignore classes
    this.ignoreClasses = [];
    this.ignoreIds = [];

    // custom parser collection
    this.parsers = {
        "js": []
    }

    this.writers = {
        "js": []
    }

    this.postfix = '.munched';
    this.prefix = '';

    // pass to the init function
    if (args) {
        this.init(args);
    }
}

Muncher.prototype.init = function (args) {

    // a reference to `this`
    var that = this;

    // set the ignore maps for Ids and Classes
    this.ignore = args['ignore'] || '';
    this.ignore.split(',').forEach(function (ign) {
        ign = ign.replace(/\s/, '');
        if (ign.indexOf('.') === 0) that.ignoreClasses.push(ign.replace('.', ''));
        if (ign.indexOf('#') === 0) that.ignoreIds.push(ign.replace('#', ''));
    });

    // set the default view extension
    this.extensions = {
        "view": args['view-ext'] || '.html',
        "css": args['css-ext'] || '.css',
        "js": args['js-ext'] || '.js'
    }

    // you may want to use another way for compressing CSS and JS
    this.compress = {
        "view": (args['compress-view'] === true),
        "css": (args['compress-css'] === true),
        "js": (args['compress-js'] === true)
    }

    // if we want to nag the CLI
    this.silent = (args['silent'] === true);
    this.showSavings = (args['show-savings'] === true);

    // flag if we only want to map the Ids and Classes for later use
    this.mapFile = args['map'];

    this.readFile = args['read'];

    // paths given from the configuration
    this.paths = {
        "view": args['view'],
        "css": args['css'],
        "js": args['js']
    }

    this.postfix = typeof args['postfix'] != undefined ? args['postfix'] : this.postfix;
    this.prefix = typeof args['prefix'] != undefined ? args['prefix'] : this.prefix;

    // chainable
    return this;
}

/**
 * run
 *
 * sets various options to run the Muncher
 */
Muncher.prototype.run = function () {

    if (!this.readFile) {
        // run through the HTML files
        if (this.paths["view"]) this.parseDir(this.paths["view"], "view");
        if (this.paths['css']) this.parseDir(this.paths["css"], "css");
        if (this.paths['js']) this.parseDir(this.paths["js"], "js");
    } else {
        this.read(this.readFile);
    }

    // map feature
    if (typeof this.mapFile === 'string' && !this.readFile) {

        if (this.mapFile) {
            var map = {id: [], class: []};

            for (var key in this.map["id"]) {
                map["id"].push(key);
            }

            for (var key in this.map["class"]) {
                map["class"].push(key);
            }

            fs.writeFileSync(this.mapFile, JSON.stringify(map, null, '\t'));
        }

        this.echo('-------------------------------');
        this.echo(clc.bold('Wrote ' + this.mapCounter + ' ids and classes in ' + this.mapFile));
        this.echo('-------------------------------\n');
        return;
    } else {
        this.echo('-------------------------------');
        this.echo(clc.bold('Mapped ' + this.mapCounter + ' IDs and Classes'));
        this.echo('-------------------------------\n');
    }

    // we do it again so this we are sure we have everything we need
    if (this.paths["view"]) this.buildDir(this.paths["view"], "view");
    if (this.paths['css']) this.buildDir(this.paths["css"], "css");
    if (this.paths['js']) this.buildDir(this.paths["js"], "js");

}

/**
 * read
 *
 * use a map file to serve as the dictionary
 *
 * @param read String the path to the mapfile
 */
Muncher.prototype.read = function (read) {
    var manifest = JSON.parse(fs.readFileSync(read, 'utf-8').toString()),
        that = this;

    $.each(manifest["id"], function (i, id) {
        that.addId(id);
    });

    $.each(manifest["class"], function (i, cls) {
        that.addClass(cls);
    });

}

/**
 * parseDir
 *
 * parse directories according to context
 *
 * @param path String the path of the directory
 * @param context String either view, js or css
 */
Muncher.prototype.parseDir = function (path, context) {
    var that = this;

    that.echo(clc.bold('Processing ' + context));

    that.paths[context].split(',').forEach(function (path) {
        if (fs.statSync(path).isDirectory()) {
            var files = glob.sync(path.replace(/\/$/, '') + '/**/*' + that.extensions[context]);

            files.forEach(function (file) {
                that.parse(file, context);
            });

        } else if (fs.statSync(path).isFile()) {
            that.parse(path, context);
        }
    });

    that.echo(clc.green.bold('Finished!\n'));

}

/**
 * buildDir
 *
 * build directories according to context
 *
 * @param path String the path of the directory
 * @param context String either view, js or css
 */
Muncher.prototype.buildDir = function (path, context) {
    var that = this;

    that.echo(clc.bold('Rewriting ' + context));

    that.paths[context].split(',').forEach(function (path) {
        if (fs.lstatSync(path).isDirectory()) {
            var files = glob.sync(path.replace(/\/$/, '') + '/**/*' + that.extensions[context]);

            files.forEach(function (file) {
                that.build(file, context);
            });

        } else if (fs.lstatSync(path).isFile()) {
            that.build(path, context);
        }
    });

    that.echo(clc.green.bold('Finished!\n'));
}

/**
 * echo
 *
 * wrap the console.log method
 *
 * @param message String
 */
Muncher.prototype.echo = function (message) {
    if (!this.silent) console.log(message);
}

/**
 * parse
 *
 * parse files according to context
 *
 * @param file String the file name of the document
 * @param context String either view, js or css
 */
Muncher.prototype.parse = function (file, context) {

    if (fs.existsSync(file)) {
        this.echo(file);

        var content = fs.readFileSync(file, 'utf8').toString();

        switch (context) {
            case "view":
                this.parseHtml(content);
                break;
            case "css":
                this.parseCss(content);
                break;
            case "js":
                this.parseJs(content);
                break;
        }

    } else {
        this.echo(clc.red(file + ' doesn\'t exist'));
    }

}

/**
 * build
 *
 * build files according to context
 *
 * @param file String the file name of the document
 * @param context String either view, js or css
 */
Muncher.prototype.build = function (file, context) {

    var content = fs.readFileSync(file, 'utf8').toString();

    switch (context) {
        case "view":
            this.rewriteHtml(content, file);
            break;
        case "css":
            this.rewriteCss(content, file);
            break;
        case "js":
            this.rewriteJs(content, file);
            break;
    }

}

/**
 * addCss
 *
 * adds Classes to the CLASS map
 *
 * @param cl String
 */
Muncher.prototype.addClass = function (cl) {
    var that = this;

    var addClass = function (cls) {
        if (that.ignoreClasses.indexOf(cls) > -1) return true; // shoul be a list of no-nos
        if (!that.map["class"][cls]) {
            that.map["class"][cls] = that.prefix + hashids.encrypt(that.mapCounter);
            that.mapCounter++;
        }
    }

    if (typeof cl == 'object') {
        if (cl) {
            cl.forEach(function (pass) {
                addClass(pass);
            });
        }
    } else {
        addClass(cl);
    }
}

/**
 * addId
 *
 * adds Ids to the ID map
 *
 * @param id String
 */
Muncher.prototype.addId = function (id) {
    if (!this.map["id"][id]) {
        if (!this.ignoreIds.indexOf(id)) return true; // shoul be a list of no-nos
        this.map["id"][id] = this.prefix + hashids.encrypt(this.mapCounter);
        this.mapCounter++;
    }
}

/**
 * parseCssSelector
 *
 * parse CSS strings to get their classes and ids
 *
 * @param css String the css string
 */
Muncher.prototype.parseCssSelector = function (selector) {
    var that = this,
        match = null,
        tid = selector.match(/#[\w\-]+/gi),
        tcl = selector.match(/\.[\w\-]+/gi);

    if (tid) {
        tid.forEach(function (match) {
            var id = match.replace('#', '');
            that.addId(id);
        });
    }
    if (tcl) {
        tcl.forEach(function (match) {
            var cl = match.replace('.', '');
            that.addClass(cl);
        });
    }
}

/**
 * parseHtml
 *
 * parse HTML documents to get their classes and ids
 *
 * @param html String the html document
 */
Muncher.prototype.parseHtml = function (html) {

    var document = jsdom(html);
    var that = this,
        html = $(document.defaultView)(document);

    html.find('*').each(function (i, elem) {
        var target = html.find(elem),
            id = target.attr('id'),
            classes = target.attr('class');

        if (id) {
            that.addId(id);
        }

        if (classes) {
            var newClass = [];

            classes.split(' ').forEach(function (cl) {
                that.addClass(cl);
            });

        }

        if (target.is('style')) {
            var style = target.text();
            that.parseCss(style);
        }

    });

    // parse JS
    var script = '';
    html.filter('script').each(function (i, tag) {
        script += this.text || this.textContent || this.innerHTML || '';
    });
    if (script != '') {
        that.parseJs(script);
    }

}

/**
 * parseCss
 *
 * parse CSS documents to get their classes and ids
 *
 * @param css String the css document
 */
Muncher.prototype.parseCss = function (css) {

    var document = jsdom('');
    var that = this,
        css = parse(css),
        styles = [];

    $(document.defaultView)(css.stylesheet.rules).each(function (i, style) {
        if (style.media) {
            styles = styles.concat(style.rules);
        }

        if (!style.selectors) return true;

        styles.push(css.stylesheet.rules[i]);
    });

    $(document.defaultView)(styles).each(function (o, style) {
        style.selectors.forEach(function (selector) {
            that.parseCssSelector(selector);
        });
    });
}

/**
 * parseJs
 *
 * parse JS documents to get their classes and ids
 *
 * @param js String the js document
 */
Muncher.prototype.parseJs = function (js) {
    var that = this,
        match;

    // custom parsers
    if (this.parsers.js.length > 0) {
        this.parsers.js.forEach(function (cb) {
            cb.call(that, js);
        });
    }

    // id and class
    var pass4 = /getElementsByClassName\([\'"](.*?)[\'"]/gi;
    while ((match = pass4.exec(js)) !== null) {
        this.addClass(match[1].split(' '));
    }

    var pass5 = /getElementById\([\'"](.*?)[\'"]/gi;
    while ((match = pass5.exec(js)) !== null) {
        this.addId(match[1]);
    }

    // attr
    var pass7 = /setAttribute\([\'"](id|class)[\'"],\s[\'"](.+?)[\'"]/gi;
    while ((match = pass7.exec(js)) !== null) {
        if (match[1] == 'class') this.addClass(match[2].split(' '));
        if (match[1] == 'id') this.addId(match[2]);
    }

}

/**
 * rewriteHtml
 *
 * replaces the ids and classes in the files specified
 *
 * @param html String the html document
 * @param to String the file name
 */
Muncher.prototype.rewriteHtml = function (html, to) {
    var document = jsdom(html);
    var that = this,
        html = $(document.defaultView)(document);

    that.files[to] = fs.statSync(to).size;

    html.find('*').each(function (i, elem) {
        var target = html.find(elem),
            id = target.attr('id'),
            classes = target.attr('class');

        if (id) {
            if (!that.ignoreIds.indexOf(id)) return true;
            target.attr('id', that.map["id"][id]);
        }

        if (classes) {
            var newClass = [];
            classes.split(' ').forEach(function (cl) {
                if (!that.ignoreClasses.indexOf(cl)) return true;
                if (that.map["class"][cl]) {
                    target.removeClass(cl).addClass(that.map["class"][cl]);
                }
            });
        }

    });

    // write
    html = serializeDocument(html.find('body > *'));
    //html = this.rewriteJsBlock(html);
    //html = this.rewriteCssBlock(html, this.compress['view']);

    fs.writeFileSync(to + this.postfix, (this.compress['view']) ? this.compressHtml(html) : html);

    var percent = 100 - ((fs.statSync(to + this.postfix).size / this.files[to]) * 100);
    var savings = (that.showSavings) ? clc.blue.bold(percent.toFixed(2) + '%') + ' Saved for ' : '';
    that.echo(savings + to + this.postfix);
}

/**
 * rewriteCssString
 *
 * rewrite a CSS String
 *
 * @param css String the css document
 */
Muncher.prototype.rewriteCssString = function (css) {

    var document = jsdom('');
    var that = this,
        text = css,
        css = parse(text),
        styles = [];

    $(document.defaultView)(css.stylesheet.rules).each(function (i, style) {
        if (style.media) {
            styles = styles.concat(style.rules);
        }

        if (!style.selectors) return true;

        styles.push(css.stylesheet.rules[i]);
    });

    $(document.defaultView)(styles).each(function (u, style) {
        style.selectors.forEach(function (selector) {
            var original = selector,
                tid = selector.match(/#[\w\-]+/gi),
                tcl = selector.match(/\.[\w\-]+/gi);

            if (tid) {
                $.each(tid, function (i, match) {
                    match = match.replace('#', '');
                    if (that.ignoreIds.indexOf(match) > -1) return true;
                    selector = selector.replace(new RegExp("#" + match.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&"), "gi"), '#' + that.map["id"][match]);
                });
            }
            if (tcl) {
                $(document.defaultView)(tcl).each(function (o, match) {
                    match = match.replace('.', '');
                    if (that.ignoreClasses.indexOf(match) > -1) return true;
                    selector = selector.replace(new RegExp("\\." + match.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&"), "gi"), '.' + that.map["class"][match]);
                });
            }

            text = text.replace(original, selector);
        });
    });

    return text;
}

/**
 * rewriteCssBlock
 *
 * rewrite a CSS block in an html document
 *
 * @param html String the html document
 * @param compress Boolean flag whether to compress the CSS block
 */
Muncher.prototype.rewriteCssBlock = function (html, compress) {
    var document = jsdom(html);
    var that = this,
        html = $(document.defaultView)(document);

    html.find('*').each(function (i, elem) {
        var target = html.find(elem);

        if (target.is('style')) {
            var text = that.rewriteCssString(target.text());
            target.text(compress ? that.compressCss(text) : text);
        }

    });

    return serializeDocument(html.find('body *'));
}

/**
 * rewriteCss
 *
 * rewrite a CSS file
 *
 * @param css String the css document
 * @param to String the file name
 */
Muncher.prototype.rewriteCss = function (css, to) {
    var that = this,
        text = that.rewriteCssString(css);

    that.files[to] = fs.statSync(to).size;

    fs.writeFileSync(to + this.postfix, (this.compress['css']) ? this.compressCss(text) : text);

    var percent = 100 - ((fs.statSync(to + this.postfix).size / this.files[to]) * 100);
    var savings = (that.showSavings) ? clc.blue.bold(percent.toFixed(2) + '%') + ' Saved for ' : '';
    that.echo(savings + to + this.postfix);
}

/**
 * rewriteJsString
 *
 * rewrite a JS String
 *
 * @param js String the js document
 */
Muncher.prototype.rewriteJsString = function (js) {
    var that = this,
        match = null;

    // id and class
    var pass4 = /getElementsByClassName\([\'"](.*?)[\'"]/gi;
    while ((match = pass4.exec(js)) !== null) {
        if (that.ignoreClasses.indexOf(match[1]) > -1) continue;
        var passed = match[0].replace(new RegExp(match[1], "gi"), that.map["class"][match[1]]);
        js = js.replace(match[0], passed);
    }

    var pass5 = /getElementById\([\'"](.*?)[\'"]/gi;
    while ((match = pass5.exec(js)) !== null) {
        if (that.ignoreIds.indexOf(match[1]) > -1) continue;
        var passed = match[0].replace(new RegExp(match[1], "gi"), that.map["id"][match[1]]);
        js = js.replace(match[0], passed);
    }

    // attr
    var pass7 = /setAttribute\([\'"](id|class)[\'"],\s[\'"](.+?)[\'"]/gi;
    while ((match = pass7.exec(js)) !== null) {
        var key = (match[1] == 'id') ? 'id' : 'class';
        if (key == 'class') {
            var passed = match[0],
                splitd = match[2].split(' ');
            $.each(splitd, function (i, cls) {
                if (that.ignoreClasses.indexOf(cls) > -1) return true;
                passed = passed.replace(new RegExp(cls, "gi"), that.map[key][cls]);
            });
        } else {
            if (that.ignoreIds.indexOf(match[2]) > -1) continue;
            var passed = match[0].replace(new RegExp(match[2], "gi"), that.map[key][match[2]]);
        }
        js = js.replace(match[0], passed);
    }

    // custom parsers
    if (this.writers.js.length > 0) {
        this.writers.js.forEach(function (cb) {
            js = cb.call(that, js);
        });
    }

    return js;
}

/**
 * rewriteJsBlock
 *
 * rewrite a JS block in an html document
 *
 * @param html String the html document
 * @param compress Boolean flag whether to compress the JS block
 */
Muncher.prototype.rewriteJsBlock = function (html, compress) {
    var document = jsdom(html);
    var that = this,
        html = $(document.defaultView)(document);

    var match;

    html.find('script').each(function (i, elem) {
        var target = html.find(elem),
            js = that.rewriteJsString(target.text());

        target.text(js);
    });

    var block = (compress) ? this.compressJs(serializeDocument(html.find('body *'))) : serializeDocument(html.find('body *'));

    return block;
}

/**
 * rewriteJs
 *
 * rewrite a JS file
 *
 * @param js String the js document
 * @param to String the file name
 */
Muncher.prototype.rewriteJs = function (js, to) {
    var that = this;

    that.files[to] = fs.statSync(to).size;

    js = that.rewriteJsString(js);

    fs.writeFileSync(to + this.postfix, (this.compress['js']) ? this.compressJs(js) : js);

    var percent = 100 - ((fs.statSync(to + this.postfix).size / this.files[to]) * 100);
    var savings = (that.showSavings) ? clc.blue.bold(percent.toFixed(2) + '%') + ' Saved for ' : '';
    that.echo(savings + to + this.postfix);
}

/**
 * compressHtml
 *
 * Compress HTML Files to save a couple of bytes. Someone tell me where I got this. I need to
 * credit them. I forgot :(
 *
 * @param html String The HTML string to be minified
 * @param compressHead Boolean Option whether the <head> tag should be compressed as well
 */
Muncher.prototype.compressHtml = function (html, compressHead) {
    var allHTML = html,
        headHTML = '',
        removeThis = '',
        headstatus = compressHead || true;

    if (headstatus != true) {
        //Compress all the things!
        allHTML = allHTML.replace(/(\r\n|\n|\r|\t)/gm, '');
        allHTML = allHTML.replace(/\s+/g, ' ');
    } else {
        //Don't compress the head
        allHTML = allHTML.replace(new RegExp('</HEAD', 'gi'), '</head');
        allHTML = allHTML.replace(new RegExp('</head ', 'gi'), '</head');

        var bodySplit = '</head>';
        var i = allHTML.indexOf(bodySplit) != -1;

        if (i == true) {
            var bodySplit = '</head>';
            var tempo = allHTML.split(new RegExp(bodySplit, 'i'));
            headHTML = tempo[0];
            allHTML = tempo[1];
        } else {
            bodySplit = '';
        }

        allHTML = allHTML.replace(/(\r\n|\n|\r|\t)/gm, '');
        allHTML = allHTML.replace(/\s+/g, ' ');
        allHTML = headHTML + bodySplit + '\n' + allHTML.replace(/<!--(.*?)-->/gm, '');
    }

    return allHTML;
}

/**
 * compressCss
 *
 * A simple CSS minifier. removes all newlines, tabs and spaces. also strips out comments.
 *
 * @param css String The CSS string to be minified
 */
Muncher.prototype.compressCss = function (css) {
    css = css.replace(/(\r\n|\n|\r|\t)/gm, "");
    css = css.replace(/\s+/g, " ");
    return css.replace(/\/\*(.*?)\*\//gm, "");
}

/**
 * compressJs
 *
 * A placeholder for future use perhaps?
 *
 * @param js String The JS string to be minified
 */
Muncher.prototype.compressJs = function (js) {
    return js;
}

/**
 * addJsParser
 *
 * plug different JS parsers here. Parsers are loaded dynamically from the `parsers` folder
 *
 * @param cb Function the callback for parsing JS Strings
 */
Muncher.prototype.addJsParser = function (cb) {
    if (typeof cb == 'function') {
        this.parsers.js.push(cb);
    }
}

/**
 * addJsWriter
 *
 * plug different JS writers here. Writers are loaded dynamically from the `parsers` folder
 *
 * @param cb Function the callback for writing JS Strings
 */
Muncher.prototype.addJsWriter = function (cb) {
    if (typeof cb == 'function') {
        this.writers.js.push(cb);
    }
}

/**
 * module_exists
 *
 * Check if a module exists
 *
 * @param module_exists String the module name
 */
function module_exists(name) {
    try {
        return require.resolve(name);
    } catch (e) {
        return false
    }
}

/**
 * allow to run with args
 */

exports.runWithArgs = function (args) {
    var munch = new Muncher(args);
    munch.run();
};

/**
 * let's not forget to expose this
 */
exports.run = function () {
    // fetch the script options from CLI
    var args = require('optimist')
        .usage(fs.readFileSync(__dirname + '/usage').toString())
        .demand(['view'])
        .argv;

    // we have a settings file specifically specified or args is empty
    if (args['manifest']) {
        args['manifest'] = (typeof args['manifest'] == 'string') ? args['manifest'] : '.muncher';

        // see if the file exists and get it
        if (fs.existsSync(args['manifest'])) {
            args = JSON.parse(fs.readFileSync(args['manifest']));

            // normalize everything
            if (typeof args.view == 'object') args.view = args.view.join(',');
            if (typeof args.css == 'object') args.css = args.css.join(',');
            if (typeof args.js == 'object') args.js = args.js.join(',');
            if (typeof args.ignore == 'object') args.ignore = args.ignore.join(',');
            if (typeof args.parsers == 'object') args.parsers = args.parsers.join(',');
        }
    }

    // check if args is usable.
    if (!args) {
        console.log('There are no options specified. Aborting');
        return;
    } else if (!args['silent']) {
        // echo a pretty name if we are allowed to
        console.log(clc.red('\n   __  ___              __     _   '));
        console.log(clc.red('  /  |/  /_ _____  ____/ /    (_)__'));
        console.log(clc.red(' / /|_/ / // / _ \\/ __/ _ \\  / (_-<'));
        console.log(clc.red('/_/  /_/\\_,_/_//_/\\__/_//_/_/ /___/'));
        console.log(clc.red('                         |___/     \n'));
        console.log(clc.white('Copyright (c) 2013 John Rocela <me@iamjamoy.com>\n\n'));
    }

    if (args['manifest']) {
        console.log('Reading Manifest file to get configuration...\n');
    }

    // let's start munching
    var munch = new Muncher(args);

    // add custom JS parsers
    if (args['parsers']) {
        var parsers = args['parsers'].split(',');
        parsers.forEach(function (parser) {
            if (module_exists(parser)) {
                var lib = require(parser);
                if (lib.parser) munch.addJsParser(lib.parser);
                if (lib.writer) munch.addJsWriter(lib.writer);
            }
        });
    }

    // bon appetit`
    munch.run();
}

// expose for testing
exports.Muncher = Muncher;

// have fun <3