CODEWITHSUNDEEP
gruntjsbowergrunt-wiredep
Jaffy
Jaffy

Reputation: 585

Can Grunt wiredep wire minify version in HTML file

Is it possible to inject minified version of dependencies in HTML pages using Grunt wiredep plugin?

Upvotes: 4

Views: 2005

Answers (3)

Mario Araque
Mario Araque

Reputation: 4572

At the moment it's not possible.

The main use of grunt-wiredep is to provide the addition of your bower dependencies easily.

If you want to minify your bower files, I recommend you to use grunt-usemin or grunt-html-build. You can minify all your bower dependencies in one file.

For example with grunt-usemin you have to do this. 

<!-- build:js js/vendor.js -->
<!-- bower:js -->
<!-- endbower -->
<!-- endbuild -->

Upvotes: 1

Wildhammer
Wildhammer

Reputation: 2175

The working version of EdC's answer, (couldn't get it to work but it inspired me to write this) plus an enhancement for handling the case when .min.js file is provided in a different location would be: 

task: {
    src:'public_html/**/*.html',
    fileTypes: {
        html: {
            block: /(([ \t]*)<!--\s*bower:*(\S*)\s*-->)(\n|\r|.)*?(<!--\s*endbower\s*-->)/gi,
            detect: {
                js: /<script.*src=['"]([^'"]+)/gi,
                css: /<link.*href=['"]([^'"]+)/gi
            },
            replace: {
                js: function(filePath) {
                    var filePathStr = '', path = require('path'), pattern = /min.js/g;
                    // libDirectory would always be 'bower_components/libname'
                    var libDirectory = filePath.split('/').slice(0,2).join('/');
                    var minFilename = path.posix.basename(filePath).replace('.js','.min.js');

                    if (!pattern.test(filePath)) {
                        if(!grunt.file.exists(filePath.replace('.js','.min.js'))){
                            // need to have the normal lib file in case min version wasn't available at all
                            filePathStr = filePath;
                            // recursively executes the callback function for every file in lib directory(libDirectory)
                            grunt.file.recurse(libDirectory, function callback(abspath, rootdir, subdir, filename) {
                                if( filename === minFilename )
                                    filePathStr = abspath;
                            });
                        } else {
                            // if min exists in the same dir then so be it
                            filePathStr = filePath.replace('.js','.min.js');
                        }
                    } else {
                        // some packages main attribute is pointed to min version already
                        filePathStr = filePath;
                    }
                    return '<script src="' + filePathStr + '"></script>';
                },
                css: '<link rel="stylesheet" href="{{filePath}}" />'
            }
        }
    }
}

Upvotes: 0

EdC
EdC

Reputation: 1165

This can be done by overriding the wiredep fileTypes setting in your Gruntfile.js configuration.

The following replaces (renames) all *.js filenames into *.min.js:

wiredep: {
    task: {
        src: [
            'public_html/**/*.html', // .html support...
            // ...
        ],
    },
    fileTypes: {
        html: {
            block: /(([ \t]*)<!--\s*bower:*(\S*)\s*-->)(\n|\r|.)*?(<!--\s*endbower\s*-->)/gi,
            detect: {
                js: /<script.*src=['"]([^'"]+)/gi,
                css: /<link.*href=['"]([^'"]+)/gi
            },
            replace: {
                js: function(filePath) {
                    var filePathStrArr = filePath.split('.');
                    var filePathStr = ''; //filePathStrArr[filePathStrArr.length-2];

                    if (filePathStrArr[filePathStrArr.length - 2] != 'min') {
                        filePathStrArr.pop();
                        filePathStr = filePathStrArr.join('.') + '.min.js';
                        if(!grunt.file.exists(filePathStr)){
                            //console.log('warning - file does not exist:'+filePathStr);
                            filePathStr = filePath; //if the .min.js file does not exist then revert back to original filename
                        }
                    } else {
                        filePathStr = filePath;
                    }
                    return '<script src="' + filePathStr + '"></script>';
                },
                css: '<link rel="stylesheet" href="{{filePath}}" />'
            }
        }
    }
}

Note that this assumes that there is a *.min.js file in all your javascript locations.

Upvotes: 2

Related Questions