如何更改 yeoman 配置以正确运行 livereload答案

【问题标题】：How to change yeoman config to run livereload properly如何更改 yeoman 配置以正确运行 livereload
【发布时间】：2015-05-06 16:18:29
【问题描述】：

我为 Yeoman 生成的 AngularJs 应用程序配置了 Gruntfile.js。我已将协议更改为 https。所以它现在为https://localhost:9000 上的所有文件提供服务。

... 
connect: {
   options: {
      port: 9000,
      protocol: 'https',
      hostname: 'localhost',
      livereload: 35729,
      ...

所以它现在为https://localhost:9000/ 上的所有文件提供服务。我还在 livereload 配置中添加了证书和密钥：

  livereload: {
       options: {
             key: grunt.file.read('livereload.key'),
             cert: grunt.file.read('livereload.crt'),

但它仍然没有从 https://localhost:35729/livereload.js?snipver=1 Failed to load resource: net::ERR_CONNECTION_CLOSED 加载 livereload.js 我可以打开 http 连接并在浏览器中加载 livereload.js http://localhost:35729/livereload.js?snipver=1

为了在 https 上提供 livereload.js，我应该进行哪些更改？

【问题讨论】：

标签： gruntjs yeoman yeoman-generator grunt-contrib-watch

【解决方案1】：

我遇到了同样的问题。最后我想出了如何在 Angular-generator 中设置它。

在 grunt.initConfig.connect.options 下，将“livereload: 35729”替换为以下设置：

livereload: {
                port: 35729,
                key: grunt.file.read('livereload.key').toString(),
                cert: grunt.file.read('livereload.crt').toString(),
            },

由于 Gruntfile 使用的是手表的设置参考，我们可以从原始位置进行设置。

在此设置之后，我还在我的 html 文件中添加了<script src="https://localhost:35729/livereload.js"></script>，并使用 htmlprocess 将其从发布版本中删除。

希望对你有帮助。

干杯，

彭

【讨论】：

【解决方案2】：

首先：（在connect.options对象内）

livereload: true || port(default is 35729)  <-- this inject the html snipet in index

更改后：（在手表对象内）

js : {
   files  : ['<%= yeoman.app %>/scripts/{,*/}*.js'],
   tasks  : ['newer:jshint:all', 'newer:jscs:all'],
   options: {
      livereload: {
          port: 35729,
          key : grunt.file.read('./certs/server.key').toString(),
          cert: grunt.file.read('./certs/server.crt').toString(),
      }
   }
}

还有这个：

livereload: {
    options: {
        livereload: {
            port: 35729,
            key : grunt.file.read('./certs/server.key').toString(),
            cert: grunt.file.read('./certs/server.crt').toString(),
         }
     },
     files  : [
         '<%= yeoman.app %>/{,*/}*.html',
         '.tmp/styles/{,*/}*.css',
         '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
     ]
}

或者你可以定义一个配置对象：

lr: {
        port: 35729,
        key : grunt.file.read('./certs/server.key').toString(),
        cert: grunt.file.read('./certs/server.crt').toString(),
    },

并像这样使用它：

js : {
    files  : ['<%= yeoman.app %>/scripts/{,*/}*.js'],
    tasks  : ['newer:jshint:all', 'newer:jscs:all'],
    options: {
       livereload: '<%= lr %>'
    }
}

【讨论】：