CODEWITHSUNDEEP
node.jsgruntjspuggrunt-contrib-watchgrunt-contrib-jade
user3637578
user3637578

Reputation: 1

How to make a Grunt file live reload when using jade?

I'm new to grunt and have been trying to make a development environment where on change to a Jade file to activate live reload.

I have been able to turn on live reload when using a vanilla HTML file using a grunt express server.

express: {
all: {
    options: {
        bases: ['C:\\location\\projectfolder'],
        port: 8080,
        hostname: "0.0.0.0",
        livereload: true
    }
}

},

I have also tried to compile the jade just afterwards then have the watch function afterwards. 

jade: {
 html: {
files: {
  'C:\\Users\\pavni_000\\Documents\\Business\\learning\\jade\\projectfolder': ['C:\\Users\\pavni_000\\Documents\\Business\\learning\\jade\\projectfolder\\text.jade']
},
options: {
  client: false
}
}
}

Could someone give me some guidance on how to make it so that any changes to the jade file (and any other project code in general) using grunt or any other tool?

Upvotes: 0

Views: 227

Answers (1)

Eric Soyke
Eric Soyke

Reputation: 1067

Sounds like you need a file watcher. I use WebStorm IDE and it can be configured to use a Jade file watcher that continually compiles to html in real-time. So long as you have Jade installed on your machine, point the watcher to the Jade command (windows will be something like C:\Users\~USERNAME\AppData\Roaming\npm\jade.cmd, Linux/OSX would probably be /usr/local/bin/jade).

So then if you already have Grunt running a livereload server, it will pickup the html files your watcher updates. There MAY be a way to do this all within grunt if you aren't using an IDE with a watcher (have Grunt's live-reload trigger a Jade compilation), but this method works fine for me.

Upvotes: 0

Related Questions