Grunt：查看多个文件，仅编译更改 - livereload 中断？

Posted 2023-03-03

【中文标题】Grunt：查看多个文件，仅编译更改 - livereload 中断？

【英文标题】：Grunt: Watch multiple files, compile only changed - livereload breaks?

【发布时间】：2013-07-04 22:12:30

【问题描述】：

我完全是 Grunt 和 javascript/Coffeescript 的新手。

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

但现在看来，实施的解决方案打破了 livereload。当我从“grunt server”开始并在浏览器中显示我的页面时，一切看起来都很好。然后我更改一个 .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

【问题讨论】：

你用的是什么手表版本？

grunt-contrib-watch 与版本 v0.4.4 一起使用，connect-livereload 与版本 0.2.0 一起使用。我用这些信息更新了我上面的问题。对不起，我忘记了。

【参考方案1】：

我的解决方案：

grunt.initConfig(
        pkg: grunt.file.readJSON('package.json'),
        cssmin: 
            dist: 
                expand: true,
                cwd: 'app',
                src: ['**/*.css'],
                dest: 'WebContent'
            
        ,
        uglify: 
            options: 
                mangle: false
            ,
            dist: 
                expand: true,
                cwd: 'app/js',
                src: ['**/*.js'],
                dest: 'WebContent/js'
            
        ,
        htmlmin: 
            options: 
                collapseWhitespace: true
            ,
            dist: 
                expand: true,
                cwd: 'app',
                src: ['**/*.html'],
                dest: 'WebContent'
            
        ,
        watch: 
            options: 
                spawn: false
            ,
            cssmin: 
                files: 'app/css/**/*.css',
                tasks: ['cssmin']
            ,
            uglify: 
                files: 'app/js/**/*.js',
                tasks: ['uglify']
            ,
            htmlmin: 
                files: 'app/**/*.html',
                tasks: ['htmlmin']
            
        ,
    );

    // Faz com que seja salvo somente o arquivo que foi alterado
    grunt.event.on('watch', function(action, filepath) 
        var tasks = ['cssmin', 'uglify', 'htmlmin'];

        for (var i=0, len=tasks.length; i < tasks.length; i++) 
            var taskName = tasks[i];

            if (grunt.file.isMatch(grunt.config('watch.'+ taskName +'.files'), filepath)) 
                var cwd = new String(grunt.config(taskName + '.dist.cwd')).split('/').join('\\') + '\\'; //inverte as barras e adiciona uma "\" no final
                var pathWithoutCwd = filepath.replace(cwd, ''); //obtem somente o path sem o cwd

                grunt.config(taskName + '.dist.src', pathWithoutCwd); //configura a task
               
        
    );

    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-htmlmin');

    // Tarefas padrão
    grunt.registerTask('default', ['cssmin', 'uglify', 'htmlmin']);
;

【讨论】：

感谢您的回答，但这不起作用。经过小的修改以使其在我的环境下运行后，我尝试了您的代码，虽然只编译了修改后的咖啡文件，但之后永远不会触发 livereload-task :(

【参考方案2】：

我猜grunt-concurrent 就是您要搜索的内容。

这是我的方法。 （注意它是用咖啡脚本编写的，但您应该能够轻松适应它。）

watch:
  compass:
    files: ['private/compass/**/*.scss']
    tasks: ['compass:dist']
    options:
      livereload: true
  coffee:
    options:
      livereload: 34567
    files: ['private/coffee/**/*/.coffee']
    tasks: ['coffee:dist']
  ci:
    options:
      livereload: 34568
    files: ['application/views/**/*.php', 'application/controllers/**/*.php']

concurrent:
  options:
    logConcurrentOutput: true
  dev: ['watch:compass', 'watch:coffee', 'watch:ci']