16

使用 LiveReload 和 Grunt 保存时，如何让 templateURL 重新加载？

angular.module('meshApp', [
  'ngSanitize',
  'ngRoute'
])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

我有一个翡翠文件views/main.jade，当我保存时处理为.tmp/views/main.html，目前这有效，我可以看到模板，但是当我保存LiveReload时无法重新加载页面。

有什么办法可以让它工作吗？

这里还有一个指向我的 GruntFile 的链接，因为它有帮助：http: //jsfiddle.net/daimz/Te5Xc/

4

3 回答 3

1

编辑 - - - - - - - - - - - - -

当我写最初的答案时，并没有真正足够稳定的东西，这就是我对 livereload 进行一些调整的原因。从那以后发生了很多变化。目前（2017 年初）我使用浏览器同步和 webpack，HMR。

编辑 - - - - - - - - - - - - -

我让它在我的 Angular/Ionic 项目上工作。

当我假设更多人正在寻找类似的东西时，我做了一个 github 回购：https ://github.com/stefanKuijers/live-templates

我的解决方案使用 Martin Kool 编写的 live.js（检查）。我只是添加了一些代码。它是这样工作的：您只需在 live-templates.js 中添加路由器的路径。live-templates.js 获取路由器路由并将它们添加到 live.js 心跳。

如何使用它： - 获取脚本并保存 - 将第 27 行的 routerURL 变量更改为路由器的 url - 在需要实时重新加载的页面上包含脚本

让我知道或者它是如何为你们工作的！

干杯

于 2014-03-31T13:02:52.520 回答
0

我简化了我的 Gruntfile.js 可能会有所帮助： 

appPath:"", //your app path
watch: {
    options: {
        livereload: 35729,
        debounceDelay: 500
    },
    gruntfile: {
        files: ['Gruntfile.js']
    },
    css: {
        //if you use less or sass,you can compile and copy here
    },
    js: {
        files: ['<%= appPath %>/{scripts}/{,**/}*.js'],
        tasks: ['newer:all']
    },
    html: {
        files: ['<%= appPath %>/{views}/{,**/}*.html'],
        tasks: ['newer:all']
    },
    livereload: {
        options: {
            livereload: 35729,
            debounceDelay: 500
        },
        files: [
            '<%= appPath %>/{,**/}*.html',
            '<%= appPath %>/styles/{,**/}*.css',
            '<%= appPath %>/images/{,**/}*.{png,jpg,jpeg,gif,webp,svg}'
        ]
    }
}

并运行： 

grunt.registerTask('server', [
    ...,
    'watch'
]);
于 2014-11-10T08:59:17.850 回答
0

也许试试这个中间件：

var modRewrite = require('connect-modrewrite');

然后在连接上：

connect: {
  options: {
    port: 9000,
    // Change this to '0.0.0.0' to access the server from outside.
    hostname: '0.0.0.0',
    livereload: 35729
  },
  livereload: {
    options: {
      open: true,
      base: [
        '.tmp',
        '<%= yeoman.app %>'
      ],
      middleware: function(connect, options) {
        var middlewares = [];
        //Matches everything that does not contain a '.' (period)  
        middlewares.push(modRewrite(['^[^\\.]*$ /index.html [L]']));
        options.base.forEach(function(base) {
            middlewares.push(connect.static(base));
        });
        return middlewares;
      }
    }
  }

您还应该安装 modrewrite：npm install connect-modrewrite --save-dev

我只是在这里猜测。我希望它有所帮助。

于 2017-01-15T11:09:25.770 回答