Gruntjs 在流浪者托管的项目上使用Grunt启用实时重新加载

我的项目使用流浪者；它被用作

https://domain.dev:8443

目标是在CSS发生更改时将CSS重新加载到页面中，而不需要重新加载整个页面

我试图实现这一点，没有任何手动操作，这意味着我不想使用浏览器插件。使用任务

grunt develope

，一切都应该能够启动并运行

grunt contrib watch

用于监视3个不同的目标，即

css

、

scss

和

js

。因为这些任务是并发的，但很遗憾是阻塞的，所以我还使用

grunt focus

同时运行这3个任务，这是正确的。无论何时更改任何应该监视的文件，我都会在控制台中收到一个通知，通知它已更改。太棒了

grunt contrib watch

推荐

connect livereload

，它是

grunt contrib connect

的中间件。这将使我能够获得所需的行为，但我不知道如何正确设置它

这是我的GrunFile，请注意，我确实遗漏了许多与此问题无关的任务，因此它不会运行

module.exports = function(grunt) {
    'use strict';

    //Load all dependencies that we need
    var ConnectLiveReload = require('connect-livereload')();

    //Load all packages that we need into Grunt
    grunt.loadNpmTasks('grunt-contrib-connect');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-focus');

    //The watcher needs a clean object to store data to
    var files = Object.create(null);

    //Initialize Grunt with the options for all tasks
    grunt.initConfig({
        connect: {
            options: {
                port: 0
            },
            develop: {
                options: {
                    middleware: function(connect) {
                        return [ConnectLiveReload];
                    }
                }
            }
        },

        focus: {
            develop: {}
        },

        watch: {
            scss: {
                tasks: ['build'],
                files: ['app/webroot/**/*.scss'],
                options: {
                    spawn: false
                }
            },
            css: {
                files: ['app/webroot/**/*.css'],
                options: {
                    spawn: false,
                    livereload: true
                }
            },
            js: {
                tasks: ['jasmine:test', 'eslint'],
                files: dictionary.javascript,
                options: {
                    spawn: false
                }
            }
        }
    });

    //Sets the target config for specific tasks 200ms after the last change
    var onChange = grunt.util._.debounce(function() {
        var target = getTarget();
        grunt.config('eslint.target', target);
    }, 200);

    //Listen to changed files using the watcher
    grunt.event.on('watch', function(action, filepath, target) {
        files[filepath] = action;
        onChange();
    });

    /**
     * Gets the path from the dictionary and adds a JavaScript file selector to it.
     *
     * @method getPath
     * @param [pathkey=webroot]
     * @return {String}
     */
    function getPath(pathkey) {
        pathkey = pathkey || 'webroot';
        return (dictionary[pathkey] || pathkey) + '/*.js';
    }

    /**
     * Gets an array of the last-changed files as detected by the watcher.
     *
     * @method getTarget
     * @return {Array}
     */
    function getTarget() {
        var target = Object.keys(files);
        files = Object.create(null);
        return target;
    }

    /**
     * @task develop
     * @runs watch:css
     * @runs watch:scss
     * @runs watch:js
     */
    grunt.registerTask('develop', 'Start the automated development tasks', function() {
        grunt.task.run(['connect:develop', 'focus:develop']);
    });
};

---

http://localhost:35729/livereload.js

是一个有效文件，我可以在浏览器中访问，但脚本未添加到页面中。我该怎么做？

这是一个虚拟的尝试，我不确定实时重新加载将如何工作，但您能否尝试在35729上进行从来宾到主机的端口转发？当然可以尝试，可能需要几天时间，devops的截止日期目前处于较低水平：）将是一次虚拟尝试，我不确定实时重新加载将如何工作，但您能否尝试通过35729将port_从客户转发到主机？当然可以尝试，可能需要几天时间，devops的截止日期目前处于较低水平：）