I'm struggling with the following:
My gulpfile.js compiles all .less, minifies it and concattenates all CSS into ./dist/all.min.css
Is there a way I can rewrite the HTML file, remove all style tags and only put one style tag into it loading the minified CSS?
The best way to handle this is to use one of the HTML injectors from the get-go. I'm using
gulp-inject
to some success so far.Add gulp-inject to your project:
Assuming that you have a folder layout similar to this:
Your HTML should include this where you want the CSS or JS files to be injected, either the head for both, or head for the CSS and just before body for your JS files:
Then your gulpfile looks something like this:
This is just a rough idea, and you can do a lot more using
gulp-watch
for incremental builds, but the key here is that we watch the build directory to choose when to rebuild the HTML file, and watch the src directory for everything else.