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*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的主要用途是轻松添加您的凉亭依赖。

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

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

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

问候。

Answer 3

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

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

3 个答案: