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

my goal create appropriate above fold .css file each appropriate .html page.

i'm using grunt-penthouse extract css , works fine.. long have one html page. current configuration goes this:

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

what want avoid transforming gruntfile this:

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     }, // , on }, 

i've been reading grunt expand property , grunt templating , feel i'm on right path. guess need syntax looks this:

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

but sincerly don't know start , if i'm on right path.

i'd that, anytime modify .html page, penthouse triggers , spits right above fold .css file right filename specific page.

if want more context, want implement in workflow i'm creating: https://github.com/vlrprbttst/grunt-boilerplate-v2

any or simple heads appreciated

you use generate dynamically gruntfile task. should define:

1. destfolder: folder extract filenames from
2. fileext: extension files need extrapolate.

the code checks files in folder, , clean url page name without extension. possible grunt.file.expand method. supply lot of options, pass empty object because in particular case not useful. can find more informations in 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 analyse     );      // create empty array put elements in, once cleaned.      var filelist = [];      tempfilelist.foreach(function(url){         var pageurl = url;         // remove 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     });  }; 

hope help.