Grunt：Livereload 不起作用

Question

每次我尝试使用 grunt watch 的实时重新加载选项时，我都会运行解决这个问题。无论我使用哪个端口，我都会收到 "Fatal error: Port xxxx is already in use by another process." 我列出了所有正在使用的端口，选择一个没有出现在列表中的随机数没有帮助：它将 xxxx 替换为 gruntfile 中最后使用的任何端口。

我的 gruntfile 本身：

module.exports = function (grunt) {

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

    watch: {

        options: {
            livereload: true
        },

        js: {
            files: ['.dev/**/*.js'],
            tasks: ['concat', 'uglify', 'watch'],
        },
        scss: {
            files: ['./dev/scss/*.scss'],
            tasks: ['sass', 'concat', 'watch'],
            options: {
                reload: true,
                livereload: false,

            }
        },
        html: {
            files: ['./dev/**/*.html', 'watch'],
            tasks: ['copy', 'watch'],
        },
        grunt: {
            files: ['Gruntfile.js'],
            tasks: ['watch'],
        },
    },

    concat: {
        js: {
            src: ['dev/js/script1.js', 'dev/js/script2.js'],
            dest: 'dev/js/script.js',
        },
        css: {
            src: ['./dev/css/nav.css', './dev/css/anim.css', './dev/css/style.css'],
            dest: './dist/css/style.css',
        },
    },

    uglify: {
        build: {
            src: 'dev/js/script.js',
            dest: 'dist/js/script.min.js'
        }
    },

    sass: {                              // Task
        dev: {                            // Target
            files: {                         // Dictionary of files
                './dev/css/style.css': './dev/scss/style.scss',       // 'destination': 'source'
            },
            tasks: ['copy'],
        }
    },

    copy: {
        main: {
            expand: true,
            cwd: './dev/html',
            src: '*.html',
            dest: './dist/html/'
        },
    },
});

// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-sass');


// Default task(s).
grunt.registerTask('default', ['concat', 'uglify', 'sass', 'copy', 'watch']);

};

我对 npm、grunt 等还是个新手，使用 Yeoman 时也遇到过这个问题。是否有一些应用程序可以自动监听每个端口（我正在使用 Webstorm）？但是，当我关闭它并使用 sublime 和终端时，它一直说每个随机端口都已在使用中

Answer 1

看起来你正在递归调用 watch..

以您的 g运行t 文件的这一部分为例：

watch: { // hey grunt, you now know of a task called 'watch'
    ....
    html: {
        files: ['./dev/**/*.html', 'watch'], // here are the files to watch
        tasks: ['copy', 'watch'], // and oh, hey, when you run watch, make 
                                  // sure to run watch again, recursively, forever
    }

我想你可以看到这是怎么回事。您的端口正在使用中，因为您的监视任务在尝试再次运行时已经运行ning。您不需要将 'watch' 注册为 watch 的每个子部分的任务。希望有所帮助:)

Grunt：Livereload 不起作用

Grunt: Livereload doesn't work

node.js

webstorm

grunt-contrib-watch