gruntjs - Gruntwiredep可以缩小HTML文件中的版本吗

Question

是否可以使用 Gruntwiredep 插件在 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*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 文件。

Answer 2

目前是不可能的。

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

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

例如，使用 grunt-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*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}}" />'
            }
        }
    }
}