gruntjsyeomangruntfile

A Way to Load CSS link[rel=preload] Method with Yeoman Webapp


Is there a way to use the new standard link[rel=preload] with yo webapp so grunt serve will load the CSS file ?
Example:

<link rel="preload" href="path" as="style" onload="this.rel='stylesheet'">


Solution

  • I assume that by "so grunt serve will load the CSS file" you mean that the http server started by the grunt task will preemptively serve (push) the css file in addition to serving the http file, therefore saving time?

    Unfortunately getting this to work is not currently as trivial as setting up grunt serve in the right way. Push operations is an Http/2 feature, and the server used by grunt serve by default is the stock node one, which is Http/1.1 only.

    If you feel like helping yourself, and also contributing back to the community, you could author a project that wraps or forks 'grunt-serve' and replaces require('http') with something like this as the http server, while also having either a server-side parser examining the pages served looking for 'preload' attributes, or some other way of signifying to your plugin what files need to be served alongside each page.