Grunt:看多个文件,只编译改变 - livereload break？

Question

我是Grunt和Javascript/Coffeescript的新手.

我们在一个包含数百个.coffee文件的大型项目中使用Grunt.由于Grunt编译了所有的咖啡文件(尽管只有一个文件已经更改),我最初的问题是如何让Grunt只编译一个更改的文件.使用stackoverflow我能够回答这个问题,谢谢大家:)

但现在似乎已实施的解决方案打破了实时重载.当我从"grunt服务器"开始并在浏览器中显示我的页面时,一切看起来都很好.然后我更改一个.coffee文件并保存.文件被编译(我已检查),但我的浏览器从未被重新加载.只有当我手动重新加载浏览器时,才会显示新修改的代码.

所以问题是:为什么livereload不再有效？

我不知道这是否重要,但Gruntfile是在旧版本中使用yeoman创建的(使用grunt-regarde).我使用grunt-contrib-watch和buildin livereload将package.json和Gruntfile更新为更新的规范.没有grunt.event.on一切正常.

来源(部分):

grunt.initConfig({

    watch: {
            coffee: {
                files: ['<%= yeoman.app %>/coffeescripts/**/*.coffee'],
                tasks: ['coffee:app'],
                options: {
                    nospawn: true
                },
            },
            compass: {
                files: ['<%= yeoman.app %>/styles/**/*.{scss,sass}'],
                tasks: ['compass']
            },
            templates: {
                files: ['<%= yeoman.app %>/templates/**/*.tpl'],
                tasks: ['handlebars']
            },
            livereload: {
                options: {
                    livereload: LIVERELOAD_PORT
                },
                files: [
                    '<%= yeoman.app %>/*.html',
                    '<%= yeoman.tmp %>/styles/**/*.css',
                    '<%= yeoman.tmp %>/scripts/**/*.js',
                    '<%= yeoman.tmp %>/spec/**/*.js',
                    '<%= yeoman.app %>/img/{,*/}*.{png,jpg,jpeg,webp}',
                ]
            }
        },
        coffee: {
            app: {
                expand: true,
                cwd: '<%= yeoman.app %>/coffeescripts',
                src: '**/*.coffee',
                dest: '<%= yeoman.tmp %>/scripts',
                ext: '.js',
                options: {
                    runtime: 'inline',
                    sourceMap: true
                },
            }
        }
    }
});

grunt.event.on('watch', function(action, filepath) {
    filepath = filepath.replace(grunt.config('coffee.app.cwd')+'/', '' );
    grunt.config('coffee.app.src', [filepath]);
});

grunt.registerTask('server', function (target) {
    if (target === 'dist') {
        return grunt.task.run(['build', 'open', 'connect:dist:keepalive']);
    }

    grunt.task.run([
        'clean:server',
        'coffee',
        'compass:server',
        'symlink:bower',
        'connect:livereload',
        'handlebars',
        'notify:watch',
        'watch'
    ]);
});

grunt-contrib-watch用于版本v0.4.4,connect-livereload用于版本0.2.0

Answer 1

我的解决方案：

\n\n

grunt.initConfig({\n        pkg: grunt.file.readJSON(\'package.json\'),\n        cssmin: {\n            dist: {\n                expand: true,\n                cwd: \'app\',\n                src: [\'**/*.css\'],\n                dest: \'WebContent\'\n            }\n        },\n        uglify: {\n            options: {\n                mangle: false\n            },\n            dist: {\n                expand: true,\n                cwd: \'app/js\',\n                src: [\'**/*.js\'],\n                dest: \'WebContent/js\'\n            }\n        },\n        htmlmin: {\n            options: {\n                collapseWhitespace: true\n            },\n            dist: {\n                expand: true,\n                cwd: \'app\',\n                src: [\'**/*.html\'],\n                dest: \'WebContent\'\n            }\n        },\n        watch: {\n            options: {\n                spawn: false\n            },\n            cssmin: {\n                files: \'app/css/**/*.css\',\n                tasks: [\'cssmin\']\n            },\n            uglify: {\n                files: \'app/js/**/*.js\',\n                tasks: [\'uglify\']\n            },\n            htmlmin: {\n                files: \'app/**/*.html\',\n                tasks: [\'htmlmin\']\n            }\n        },\n    });\n\n    // Faz com que seja salvo somente o arquivo que foi alterado\n    grunt.event.on(\'watch\', function(action, filepath) {\n        var tasks = [\'cssmin\', \'uglify\', \'htmlmin\'];\n\n        for (var i=0, len=tasks.length; i < tasks.length; i++) {\n            var taskName = tasks[i];\n\n            if (grunt.file.isMatch(grunt.config(\'watch.\'+ taskName +\'.files\'), filepath)) {\n                var cwd = new String(grunt.config(taskName + \'.dist.cwd\')).split(\'/\').join(\'\\\\\') + \'\\\\\'; //inverte as barras e adiciona uma "\\" no final\n                var pathWithoutCwd = filepath.replace(cwd, \'\'); //obtem somente o path sem o cwd\n\n                grunt.config(taskName + \'.dist.src\', pathWithoutCwd); //configura a task\n            }   \n        }\n    });\n\n    grunt.loadNpmTasks(\'grunt-contrib-watch\');\n    grunt.loadNpmTasks(\'grunt-contrib-cssmin\');\n    grunt.loadNpmTasks(\'grunt-contrib-uglify\');\n    grunt.loadNpmTasks(\'grunt-contrib-htmlmin\');\n\n    // Tarefas padr\xc3\xa3o\n    grunt.registerTask(\'default\', [\'cssmin\', \'uglify\', \'htmlmin\']);\n};\n

\n