Soft Injecting CSS

This task has been changed. It’s now called grunt-browser-sync.

I am a big fan (if you haven’t noticed in my prior posts) of optimizing my workflow. One thing I’ve never found until recently was a solid way to deal with styles and a live workflow. In comes grunt-style-injector.

The task is simple.

gruntfile.coffee
1
2
3
4
5
6
styleinjector:
  files:
    src: 'css/application.css'
    options:
      watchTask: false
      debugInfo: true

You simply type in:

1
2
3
4
5
6
7
8
9
⇒ grunt styleinjector
Running "styleinjector:files" (styleinjector) task
   info  - socket.io started


All Set Up! Now copy & paste this snippet just before the closing </body> tag in your website.

<script src='http://192.168.1.113:3000/socket.io/socket.io.js'></script>
<script src='http://192.168.1.113:3001/style-injector-client.min.js'></script>

Put those snippets in your index.html (or partial of choice) and make sure you don’t commit said file, and you’re good to go. Since it’s framework agnostic, you can use whatever compilation process you want, and it never falsely reloads CSS (something I found) happened all the time with LiveReload.