javascript - Grunt inject CSS file into <style> tag -
i looking solution injecting css file style tag grunt.
example :
style.css
.foo { background:red; } index-before.html ( before grunt task )
<html> <head> <style type="text/css"> //output style.css here </style> </head> <body> .... </body> </html> index-after.html ( after grunt task )
<html> <head> <style type="text/css"> .foo { background:red; } </style> </head> <body> .... </body> </html> solution grunt-replace (thank andy)
replace: { dist: { options: { patterns: [ { match: 'include_css_style_tag', replacement: '<%= grunt.file.read("assets/css/styles.css") %>' } ] }, files: [ {expand: true, flatten: true, src: ['index.html'], dest: 'build/'} ] } } index.html
<style type="text/css"> @@include_css_style_tag </style>
use replace.
in html use indicator recognised replace:
<style type="text/css"> @@mycss </style> load css file variable within gruntfile.js:
var css = grunt.file.read(cssfilepath [, options]); then add replace task, like:
replace: { dist: { options: { patterns: [{ match: 'mycss', replacement: css }] }, files: [{ expand: true, flatten: true, src: ['src/index.html'], dest: 'src/index.html' }] } }; note, i've not tested this, if follow replace documentation should figure out system.
Comments
Post a Comment