使用Grunt属性展开来创建基于折叠css之上的适当页面

Using Grunt Property Expand for creating appropriate page-based above the fold css

本文关键字：css 折叠 属性 Grunt 创建 于折叠 使用      更新时间：2024-01-22

我的目标是为每个合适的.html页面创建一个合适的折叠上方的.css文件。

我正在使用grunt penthouse来提取css，它工作得很好。。只要您只有一个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扩展属性和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

任何帮助，甚至是一个简单的提醒，都将不胜感激

您可以使用类似的东西动态生成Gruntfile任务。您应该定义：

  1. destFolder：从中提取文件名的文件夹
  2. fileExt：需要外推的文件的扩展名

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

/*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
    });
};

希望这会有所帮助。

如果您希望最小化重复任务目标，请在配置对象中使用模板字符串：

penthouse: {
    extract: {
        outfile: "_dev/critical-css/<%= grunt.option('fileName') %>.css",
        css: '_dev/css/main.css',
        url: "_dev/<%= grunt.option('fileName') %>.html",
        width: 1200,
        height: 500
    },
}

接下来，您将需要编写一个函数。其目的：获取要处理的文件列表，遍历每个文件，将文件名分配给模板字符串，并为指定的文件运行任务。

function extractCSS() {
    var fileName,
        files = [];
    // For each file that matches the glob pattern, get the file name
    grunt.file.expand('_dev/*.html').forEach(function (filePath) {
        files.push(filePath.split('/').pop().split('.')[0]);
    });
    for (fileName in files) {
        grunt.option('fileName', fileName);
        grunt.task.run('penthouse:extract');
    }
}
grunt.registerTask('extract-css', extractCSS);

您是否考虑过通过迭代数组来生成配置对象？它既快捷又简单，适合您的用例。

var confTargets = ['index', 'contact', 'blog']
penthouse = {};
for (var i = 0; i < confTargets.length; i++) {
    var target = confTargets[i];
    penthouse[target] = {
        outfile: '_dev/critical-css/' + target + '.css',
        css: '_dev/css/main.css',
        url: '_dev/' + target + '.html',
        width: 1200,
        height: 500
    }
}
相关文章：