可以在HTML文件中Grunt wiredep wire minify版本

Question

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

Answer 1

这可以通过重写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*endbowers*-->)/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文件。

Answer 2

目前这是不可能的。

grunt-wiredep的主要用途是方便地添加您的bower依赖项。

如果你想缩小你的bower文件，我建议你使用grunt usemin或grunt html构建。您可以在一个文件中缩小所有bower依赖项。

例如，使用咕哝的usemin，你必须这样做。

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

Answer 3

EdC答案的工作版本（无法使其工作，但它激发了我写这篇文章的灵感）加上在不同位置提供.min.js文件时处理这种情况的增强功能将是：

task: {
    src:'public_html/**/*.html',
    fileTypes: {
        html: {
            block: /(([ t]*)<!--s*bower:*(S*)s*-->)(n|r|.)*?(<!--s*endbowers*-->)/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}}" />'
            }
        }
    }
}