quinta-feira, 6 de agosto de 2015

Grunt com HTTPS/SSL em ambiente de desenvolvimento

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

Nenhum comentário:

Postar um comentário