tasks/inlineImg.js
function(htmlFile, config, cb) {
        var html = fs.readFileSync(htmlFile, 'utf-8'),
            processedImages = 0,
            $ = cheerio.load(html);

        // grab all <img/> elements from the document
        $('img').each(function (idx, elm) {
            var src = $(elm).attr('src'),
                imgPath = null,
                img = null,
                mimetype = null,
                inlineImgPath = null;

            // check if the image src is already a data attribute
            if (src.substr(0, 5) !== 'data:') {
                // figure out the image path and load it
                inlineImgPath = imgPath = path.join(path.dirname(htmlFile), src);
                img = fs.readFileSync(imgPath, 'base64');

                mimetype = mime.lookup(inlineImgPath);

                // check file size and ie8 compat mode
                if (img.length > 32768 && config.ie8 === true) {
                    // i hate to write this, but can´t wrap my head around
                    // how to do this better: DO NOTHING
                } else {
                    $(elm).attr('src', 'data:' + mimetype + ';base64,' + img);
                    processedImages++;
                }
            }

        });
        html = $.html();

        // check if a callback is given
        if (_.isFunction(cb)) {
            grunt.log.ok('Inlined: ' + processedImages + ' Images in file: ' + htmlFile);
            cb(htmlFile, html);
        }
    }
function(htmlFile, config, cb) {
        var html = fs.readFileSync(htmlFile, 'utf-8'),
            processedImages = 0,
            $ = cheerio.load(html);

        // grab all <img/> elements from the document
        $('img').each(function (idx, elm) {
            var src = $(elm).attr('src'),
                imgPath = null,
                img = null,
                mimetype = null,
                inlineImgPath = null;

            // check if the image src is already a data attribute
            if (src.substr(0, 5) !== 'data:') {
                // figure out the image path and load it
                inlineImgPath = imgPath = path.join(path.dirname(htmlFile), src);
                img = fs.readFileSync(imgPath, 'base64');

                mimetype = mime.lookup(inlineImgPath);

                // check file size and ie8 compat mode
                if (img.length > 32768 && config.ie8 === true) {
                    // i hate to write this, but can´t wrap my head around
                    // how to do this better: DO NOTHING
                } else {
                    $(elm).attr('src', 'data:' + mimetype + ';base64,' + img);
                    processedImages++;
                }
            }

        });
        html = $.html();

        // check if a callback is given
        if (_.isFunction(cb)) {
            grunt.log.ok('Inlined: ' + processedImages + ' Images in file: ' + htmlFile);
            cb(htmlFile, html);
        }
    }
function ( htmlFile , config , cb ) { var html = fs . readFileSync ( htmlFile , 'utf-8' ) , processedImages = 0 , $ = cheerio . load ( html ) ; // grab all <img/> elements from the document $ ( 'img' ) . each ( function ( idx , elm ) { var src = $ ( elm ) . attr ( 'src' ) , imgPath = null , img = null , mimetype = null , inlineImgPath = null ; // check if the image src is already a data attribute if ( src . substr ( 0 , 5 ) !== 'data:' ) { // figure out the image path and load it inlineImgPath = imgPath = path . join ( path . dirname ( htmlFile ) , src ) ; img = fs . readFileSync ( imgPath , 'base64' ) ; mimetype = mime . lookup ( inlineImgPath ) ; // check file size and ie8 compat mode if ( img . length > 32768 && config . ie8 === true ) { // i hate to write this, but can´t wrap my head around // how to do this better: DO NOTHING } else { $ ( elm ) . attr ( 'src' , 'data:' + mimetype + ';base64,' + img ) ; processedImages ++ ; } } } ) ; html = $ . html ( ) ; // check if a callback is given if ( _ . isFunction ( cb ) ) { grunt . log . ok ( 'Inlined: ' + processedImages + ' Images in file: ' + htmlFile ) ; cb ( htmlFile , html ) ; } }
inline images as base64 in html files
inline images as base64 in html files