javascript - grunt-contrib-watch livereload 35729 livereload.js 加载失败

Question

我正在运行 grunt-contrib-watch 0.6.1 并且在我的 gruntfile.js 中包含了 livereload block 。我还在我的 html 中包含了 livereload.js 调用:

<script type="text/javascript" src="http://myste.com:35729/livereload.js"></script>

当我使用我的开发环境运行服务器时，一切似乎都正常启动。

grunt dev
Running "env:dev" (env) task

Running "concurrent:dev" (concurrent) task

Running "nodemon:dev" (nodemon) task
[nodemon] v1.2.1
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `node server.js`

Application Started on port 3000

当我进行更改时，我可以在我的 ssh 控制台中看到服务器重新加载，但 livereload.js 加载失败:

当我走到应该是http://myste.com:35729/livereload.js的港口位置时我得到标准的“网页不可用”响应。 http://myste.com:35729/ 上似乎也没有服务器在运行完全没有。

为了完整起见，我还在这里包含了我的 gruntfile.js

'use strict';

module.exports = function (grunt) {
    var watchFiles = {
        serverViews: ['app/views/**/*.*'],
        serverJS: ['gruntfile.js', 'server.js', 'config/**/*.js', 'app/**/*.js'],
        clientViews: ['public/views/**/*.html'],
        clientJS: ['public/js/**/*.js'],
        clientSASS: 'public/styles/sass/**/*.{scss,sass}',
        clientCSS: ['public/styles/css/**/*.css']
    };

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        env: {
            dev: {
                NODE_ENV: 'development'
            },
            prod: {
                NODE_ENV: 'production'
            }
        },
        watch: {
            serverViews: {
                files: watchFiles.serverViews,
                options: {
                    livereload: true
                }
            },
            serverJS: {
                files: watchFiles.serverJS,
                tasks: ['jshint'],
                options: {
                    livereload: true
                }
            },
            clientViews: {
                files: watchFiles.clientViews,
                options: {
                    livereload: true,
                }
            },
            clientJS: {
                files: watchFiles.clientJS,
                tasks: ['jshint'],
                options: {
                    livereload: true
                }
            },
            clientSASS: {
                files: watchFiles.clientSASS,
                tasks: ['sass:dev'],
                options: {
                    livereload: true,
                    spawn: false
                }
            },
            clientCSS: {
                files: watchFiles.clientCSS,
                tasks: ['csslint'],
                options: {
                    livereload: true
                }
            },
        },

        nodemon: {
            dev: {
                script: 'server.js'
            }
        },

        nodeunit: {
            dev: {
                all: ['app/test/**/*_test.js'],
                options: {
                    reporter: 'tap',
                    reporterOutput: 'tests.tap',
                    reporterOptions: {
                        output: 'outputdir'
                    }
                }
            }
        },

        jshint: {
            dev: {
                all: {
                    src: watchFiles.clientJS.concat(watchFiles.serverJS),
                    options: {
                        jshintrc: true
                    }
                }
            }
        },

        uglify: {
            prod: {
                my_target: {
                    files: {
                        'public/js/all.min.js': ['public/js/library/jquery.js', 'public/js/library/modernizr.js', 'public/js/library/selectivizr.js', 'public/js/library/delfin.js']
                    }
                }
            }
        },

        sass: {
            dev: {
                options: {
                    style: 'expanded'
                },
                files: {
                    'public/styles/css/style.css': 'public/styles/scss/style.scss' // 'destination': 'source'
                }
            }
        },

        cssmin: {
            prod: {
                files: {
                    'public/styles/css/style.min.css': 'public/styles/css/style.css'
                }
            }
        },

        csslint: {
            dev: {
                options: {
                    csslintrc: '.csslintrc',
                },
                all: {
                    src: watchFiles.clientCSS
                }
            }
        },

        concurrent: {
            dev: {
                target: {
                    tasks: ['nodemon', 'watch'],
                    options: {
                        logConcurrentOutput: true
                    }
                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-csslint');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-nodeunit');
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-express-server');
    grunt.loadNpmTasks('grunt-concurrent');
    grunt.loadNpmTasks('grunt-nodemon');
    grunt.loadNpmTasks('grunt-env');

    grunt.registerTask('dev', ['env:dev', 'concurrent', 'nodemon', 'watch', 'jshint', 'nodeunit', 'sass']);
    grunt.registerTask('prod', ['env:prod', 'cssmin', 'uglify', 'nodemon']);
};

Answer 1

您尝试运行 nodemon 和 watch 任务两次。首先，当您运行 concurrent 任务时，其次当您调用它们自己时。

将您的并发任务配置更改为

concurrent: {
    tasks: ['nodemon', 'watch'],
    options: {
        logConcurrentOutput: true
    }
},

并从 grunt dev 声明中删除额外的任务:

grunt.registerTask('dev', ['env:dev', 'concurrent', 'jshint', 'nodeunit', 'sass']);