javascript - 使用 Grunt Property Expand 创建适当的基于页面的首屏 css

Question

我的目标是为每个合适的 .html 页面创建合适的首屏 .css 文件。

我正在使用 grunt-penthouse提取 css 并且它工作正常.. 只要你只有 one html 页面。我当前的配置是这样的:

penthouse: {
    extract: {
        outfile: '_dev/critical-css/index.css',
        css: '_dev/css/main.css',
        url: '_dev/index.html',
        width: 1200,
        height: 500
    },
},

我想避免的是将我的 gruntfile 转换成这样的东西:

penthouse: {
    index: {
        outfile: '_dev/critical-css/index.css',
        css: '_dev/css/main.css',
        url: '_dev/index.html',
        width: 1200,
        height: 500
    },
    contact: {
        outfile: '_dev/critical-css/contact.css',
        css: '_dev/css/main.css',
        url: '_dev/contact.html',
        width: 1200,
        height: 500
    },
    blog: {
        outfile: '_dev/critical-css/blog.css',
        css: '_dev/css/main.css',
        url: '_dev/blog.html',
        width: 1200,
        height: 500
    },
// and so on
},

我一直在阅读 grunt expand property和 grunt 模板，我觉得我走在正确的道路上。我想我需要一个看起来像这样的语法:

expand: true,
cwd: '_src/',
src: ['**/<%= filename =%>.html'],
dest: '_dev/critical-css/',
ext: '<%= filename =%>.css'

但我真的不知道从哪里开始，也不知道我是否走在正确的道路上。

我希望这样，每当我修改 .html 页面时，penthouse 都会触发并在折叠上方吐出带有特定文件名的正确文件名的 .css 文件页面。

如果你想要更多上下文，我想在我正在创建的这个工作流中实现它:https://github.com/vlrprbttst/grunt-boilerplate-v2

非常感谢任何帮助，甚至是简单的提醒

Answer 1

您可以使用类似这样的东西来动态生成您的 Gruntfile 任务。 你应该定义:

1. destFolder:从中提取文件名的文件夹
2. fileExt:您需要推断的文件的扩展名。

代码检查文件夹中的文件，并清除它们的 url 以仅获取没有扩展名的页面名称。多亏了 grunt.file.expand 方法，一切皆有可能。您可以提供很多选项，但我将传递一个空对象，因为在这种特殊情况下它们没有用。您可以在 grunt.file docs 中找到更多信息.

/*global module:false*/
module.exports = function(grunt) {

    var destFolder = "pages/";
    var fileExt = ".html";

    var options = {}; 

    var tempFileList = grunt.file.expand(
        { options },
        [ destFolder + "*" + fileExt ] // structure to analyse
    );

    // I create an empty array to put all elements in, once cleaned. 
    var fileList = [];

    tempFileList.forEach(function(url){
        var pageUrl = url;
        // remove the destination folder
        pageUrl = pageUrl.replace(destFolder, "");
        // remove file extension
        pageUrl = pageUrl.replace(fileExt, "");
        fileList.push(pageUrl);
    })

    var min = {};
    fileList.forEach(function(name) {
        min[name] = {
            outfile: '_dev/critical-css/'+name+'.css',
            css: '_dev/css/main.css',
            url: '_dev/'+name+'.html',
            width: 1200,
            height: 500
        };
    });

    // Project configuration.
    grunt.initConfig({
        penthouse: min
    });

};

希望这会有所帮助。