ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

javascript – 使用grunt-contrib-connect和grunt-contrib-watch实时重新加载

2019-08-25 00:36:34  阅读:152  来源: 互联网

标签:grunt-contrib-watch javascript node-js gruntjs grunt-contrib-connect


我是nodeJS和grunt的新手.我在这个项目中有这个Gruntfile,我想为我项目中的所有html文件进行实时重新加载,这样我就不必一直刷新浏览器来检测新的更改.不知何故,我遇到以下代码的错误:

module.exports = function (grunt)
{
    // Project configuration.
    grunt.initConfig(
    {
        // Task configuration.
        jshint:
        {
            options:
            {
                curly: true,
                eqeqeq: true,
                immed: true,
                latedef: true,
                newcap: true,
                noarg: true,
                sub: true,
                undef: true,
                unused: true,
                boss: true,
                eqnull: true,
                browser: true,
                globals: {}
            },
            gruntfile:
            {
                src: 'Gruntfile.js'
            },
            lib_test:
            {
                src: ['lib/**/*.js', 'test/**/*.js']
            }
        },
        connect:
        {
            server:
            {
                options:
                {
                    hostname: 'localhost',
                    port: 80,
                    base: 'src',
                    keepalive: true,
                    livereload: true
                }
            }
        },
        watch:
        {
            options:
            {
                livereload:true
            }
        }

    });

    // These plugins provide necessary tasks.
    grunt.loadNpmTasks('grunt-contrib-connect');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-watch');

    // Default task.
    grunt.registerTask('default', ['connect', 'watch']);


};

似乎当我开始’grunt default’时,它不会执行任务监视,因为在连接期间它是keepalive.

如果任何人能够向我解释为什么我在JSHint检查我的代码并提出解决方案时遇到此错误,我将不胜感激.

解决方法:

您的监视任务没有任何任务或文件.要使它与grunt-contrib-connect一起使用,您需要包含的不仅仅是livereload选项,如下所示:

watch: {
    options: {
        livereload: true
    },
    taskName: {    // You need a task, can be any string
        files: [   // Files to livereload on
            "app/js/*.js",
            "app/templates/*.html"
        ]
    }
}

或者:

watch: {
    taskName: {
        options: { // Live reload is now specific to this task
            livereload: true
        },
        files: [   // Files to livereload on
            "app/js/*.js",
            "app/templates/*.html"
        ]
    }
}

这里匹配glob模式的所有文件应该按照您的预期工作.如果您只是为浏览器重新加载这些参数,则无需在此处指定任务参数.

此外,如果您要将watch服务器与watch服务器一起使用,则应删除keepalive参数,因为它是一个阻塞任务,并且可能会阻止执行监视任务:

connect: {
    server: {
        options: {
            port: 8080,
            base: 'src',
            livereload: true
        }
    }
}

标签:grunt-contrib-watch,javascript,node-js,gruntjs,grunt-contrib-connect
来源: https://codeday.me/bug/20190824/1713538.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有