Hoje precisei rodar o Grunt com HTTPS para fazer uns testes aqui. Segue o passo-a-passo:
Primeiro crie o certificado. Aqui estou usando o openssl no ubuntu. Se você usa Windows pesquise sobre como criar certificado no windows (
https://www.openssl.org/related/binaries.html )
openssl genrsa -out livereload.key 1024
openssl req -new -key livereload.key -out livereload.csr
(esse comando vai pedir alguns dados... vai preenchendo... Só em "Common Name" coloque "localhost" sem aspas)
openssl x509 -req -in livereload.csr -signkey livereload.key -out livereload.crt
Agora você tem 3 arquivos, copie os livereload.key e livereload.crt para dentro do seu projeto, na mesma pasta do Gruntfile por exemplo.
Eu criei uma pasta chamada ssl dentro da pasta onde está o Gruntfile.
----------------------
No seu Gruntfile no "watch: {" você tem colocar esse options em todos os lugares que você quer que rode com https (no js, css e no livereload) por exemplo:
options: {
livereload: {
port: 9000,
key: grunt.file.read('ssl/livereload.key'),
cert: grunt.file.read('ssl/livereload.crt')
}
}
Como ficou meu watch:
watch: {
bower: {
files: ['bower.json'],
tasks: ['wiredep']
},
js: {
files: ['<%= yeoman.app %>/scripts/{,*/}*.js'],
tasks: ['newer:jshint:all'],
options: {
livereload: {
port: 9000,
key: grunt.file.read('ssl/livereload.key'),
cert: grunt.file.read('ssl/livereload.crt')
}
}
},
jsTest: {
files: ['test/spec/{,*/}*.js'],
tasks: ['newer:jshint:test', 'karma']
},
styles: {
files: ['<%= yeoman.app %>/styles/{,*/}*.css'],
tasks: ['newer:copy:styles', 'autoprefixer'],
options: {
livereload: {
port: 9000,
key: grunt.file.read('ssl/livereload.key'),
cert: grunt.file.read('ssl/livereload.crt')
}
}
},
gruntfile: {
files: ['Gruntfile.js']
},
livereload: {
options: {
livereload: {
port: 9000,
key: grunt.file.read('ssl/livereload.key'),
cert: grunt.file.read('ssl/livereload.crt')
}
},
files: [
'<%= yeoman.app %>/{,*/}*.html',
'.tmp/styles/{,*/}*.css',
'<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
]
}
},
Agora no seu index.html, uma linha antes de fechar o body (</body>) cole isso:
<script>document.write('<script src="https://' + (location.host || 'localhost').split(':')[0] + ':9000/livereload.js"></' + 'script>')</script>
Pronto, ao rodar o "grunt serve --force" tudo estará rodando em HTTPS :)
Mais detalhes em:
http://www.gilluminate.com/2014/06/10/livereload-ssl-https-grunt-watch/
Abraço! Qualquer dúvida comenta aí!
Adriano Schmidt
