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.

Open files recursively with a Simple Grunt task.

I kicked off a project tonight and had a bunch of HTML files I wanted to open. I thought to myself, this has happened more than once, why not fire off a quick Grunt task?

Let’s get this fired off:

1
2
3
$ npm init
$ (... follow prompts)
$ npm install -g grunt-cli grunt

We’ll need a the open npm module. The other dependencies are baked into node.

1
$ npm install open --save

I decided to set up a couple basic options, to at least make it feel like a more modular task I could use elsewhere:

  • A base filename to open (in this case, index.html)
  • Firefox as the appName for the open task, so as to not bog down my Chrome windows
  • A base path to start from (in this case, just using the current path)

Here’s the finalized Gruntfile.coffee:

Gruntfile.coffee
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
open = require('open')
fs = require('fs')

module.exports = (grunt) ->
  grunt.initConfig
    openFiles:
      options:
        filename: "index.html"
        appName: "Firefox"
      path: "./"

  grunt.registerMultiTask 'openFiles', 'open', ->
    options = @options()
    basePath = @data.toString()
    files = fs.readdirSync(basePath)
    for i of files
      continue unless files.hasOwnProperty(i)
      name = basePath + files[i]
      if fs.statSync(name).isDirectory()
        open(name + "/" + options.filename, options.appName)

  grunt.registerTask("default", "openFiles")

Pretty slick. All I need to do is type grunt in the terminal, it checks to ensure what it’s trying to open is a directory, and then fires it up.

Note:

Since all of the directories were named similarly, I was able to follow a pretty standard pattern. Of course, we could set this up a little more elegantly, say, by using a conditional to make sure the files exist, a limit to how many files we want to open, etc.

This might be a one off use case, but just shows you how powerful (and easy) it can be to use Grunt to automate even more simple tasks.