javascript - subir - Grunt: Mira varios archivos, compila solo los cambios: ¿descansos de carga en vivo?

guardar archivo en servidor con javascript

Question

Soy nuevo en Grunt y en Javascript / Coffeescript por completo.

Estamos usando Grunt en un proyecto bastante grande con cientos de archivos .coffee. Dado que Grunt compila todos los archivos de café (aunque solo ha cambiado un archivo), mi pregunta inicial fue cómo conseguir que Grunt compilara solo el archivo modificado. Utilizando stackoverflow pude responder a esa pregunta, gracias a todos :)

Pero ahora parece que la solución implementada rompe la carga en vivo. Cuando comienzo con "grunt server" y visualizo mi página en el navegador, todo se ve bien. Luego cambio un archivo .coffee y lo guardo. El archivo se compila (lo revisé), pero mi navegador nunca se recarga. Solo cuando recargo manualmente el navegador, se muestra el nuevo código modificado.

Entonces la pregunta es: ¿Por qué la carga en vivo ya no funciona?

No sé si esto importa, pero el Gruntfile se creó con yeoman en una versión anterior (con grunt-regarde). Actualicé el paquete.json y el Gruntfile a las especificaciones más nuevas usando grunt-contrib-watch y la carga en vivo de Buildin. Sin el grunt.event.on todo funciona bien.

Fuentes (parcialmente):

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 se utiliza con la versión v0.4.4 , connect-livereload con la versión 0.2.0

Answer 1

Creo que lo que estás buscando es grunt-concurrent gruñona.

Aquí está mi enfoque. (Tenga en cuenta que está escrito en un script de café, pero debe poder adaptarlo fácilmente).

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'']

Answer 2

Mi solución:

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'']);
};