可以在HTML文件中使用Grunt wiredep wire缩小版本

时间:2015-03-04 17:23:19

标签: gruntjs bower grunt-wiredep

是否可以使用Grunt wiredep插件在HTML页面中注入缩小版本的依赖项?

3 个答案:

答案 0 :(得分:2)

这可以通过覆盖Gruntfile.js配置中的wiredep fileTypes设置来完成。

以下将所有* .js文件名替换(重命名)为* .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}}" />'
            }
        }
    }
}

请注意,这假设您的所有javascript位置都有* .min.js文件。

答案 1 :(得分:1)

目前还不可能。

grunt-wiredep的主要用途是轻松添加您的凉亭依赖。

如果您想缩小播放器文件,我建议您使用grunt-usemingrunt-html-build。您可以在一个文件中缩小所有的bower依赖项。

例如,使用grunt-usemin,你必须这样做。

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

问候。

答案 2 :(得分:0)

EdC's answer的工作版本(无法正常工作,但是启发了我写这篇文章)加上增强功能,可以处理在不同位置提供.min.js文件的情况是:

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}}" />'
            }
        }
    }
}