大量带有通配符的 CSS 的 Grunt 动态构建

Question

我目前正在使用 Grunt 和 Less 来缩小文件，我只想在我的代码中使用它 - 有许多 3rd 方文件。是否可以使用某些过滤功能的通配符？我的 Drupal 模块有前缀“snype”。

   less: {
        development: {
            files: [
                {
                    expand: true,     
                    cwd: '<%= path.source %>snype*',      
                    src: ['**/*.less'], 
                    dest: '<%= path.destination %>',   
                    ext: '.css',   
                    extDot: 'first'   
                },
            ],  
        },  
    },

但这不起作用...如果我从 cwd 中删除 snype*，那么它会起作用。

Answer 1

在示例中，您将根文件夹设置为 snype，这可能不正确。

您应该在 src 中指定您的模式，例如：

src: ['**/snype*.less']

但您也可以通过在它们前面加上 ! 来排除第 3 方文件夹：

// All .js files in my_folder; except those in drupal folder, etc
{src: ['my_folder/*.js', '!drupal/*.js'....]}

查看Globbing patterns部分here。

如果您有一个复杂的文件夹结构和许多排除项，您可以考虑使用通配函数，例如

var createFolderGlobs = function(fileTypePatterns) {
    fileTypePatterns = Array.isArray(fileTypePatterns) ? fileTypePatterns : [fileTypePatterns];
    var ignore = ['node_modules', 'bower_components', 'dist', 'temp']; //you put here folders to ignore

    var fs = require('fs');
    var ret = fs.readdirSync(process.cwd())
    .map(function(file) {
        if (ignore.indexOf(file) !== -1 ||
            file.indexOf('.') === 0 ||
            !fs.lstatSync(file).isDirectory()) {
            //console.log("RB JSHINT DEBUG: ignoring file:" + file);
            return null;
        } else {
            return fileTypePatterns.map(function(pattern) {
                return file + '/**/' + pattern;
            });
        }
    })
    .filter(function(patterns) {
        return patterns;
    })
    .concat(fileTypePatterns);
return ret;

};

您可以直接放入 files 选项：

    less: {                
            files: [createFolderGlobs(['*.less'])],
            tasks: ['less:dev'], //whatever else you may need 
        },

考虑到排除模式会显着减慢 Grunt。

我使用 cgross 的 cg-angular 生成器获得了这个功能，您可以在 here 找到它。阅读顶部的 cmets 以获得更详细的说明。