使用玉石时如何使Grunt文件实时重载？

Question

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?

Answer 1

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.