Question

我的项目使用Vagrant;它被用作https://domain.dev:8443。

目标是在CSS更改时将CSS重新加载到页面中，而无需重新加载整页。

我试图在没有任何手动操作的情况下实现此目的，这意味着我不想使用浏览器插件。一切都应该能够使用任务grunt develop启动并运行。

grunt-contrib-watch用于观看3个不同的目标，即css，scss和js。因为这些任务是并发的，但遗憾的是阻塞，我还使用grunt-focus同时运行这3个任务，这正确地起作用。每当更改任何应该观看的文件时，我都会在控制台中收到一条通知，告知它已更改。真棒。

grunt-contrib-watch推荐connect-livereload，这是grunt-contrib-connect的中间件。这将使我能够获得所需的行为，但我不知道如何正确设置它。

这是我的Gruntfile，请注意我确实遗漏了许多与此问题无关的任务，因此无法运行。

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是一个有效的文件，我可以在浏览器中访问，但脚本没有添加到页面中。我该怎么做？

在Vagrant托管项目上使用Grunt启用实时重新加载

0 个答案: