Grunt: просмотр нескольких файлов, компиляция только изменена - перерывы в работе с листами?

Я новичок в Grunt и Javascript/Coffeescript вообще.

Мы используем Grunt в довольно большом проекте с сотнями файлов. coffee. Поскольку Grunt компилирует все файлы cookie (хотя только один файл был изменен), мой первоначальный вопрос заключался в том, как заставить Grunt скомпилировать только один измененный файл. Используя stackoverflow, я смог ответить на этот вопрос, спасибо всем:)

Но теперь кажется, что реализованное решение нарушает работу с печью. Когда я начинаю с "grunt server" и отображаю свою страницу в браузере, все выглядит отлично. Затем я меняю один файл .coffee и сохраняю его. Файл компилируется (я проверял), но мой браузер никогда не перезагружается. Только при ручной перезагрузке браузера отображается новый измененный код.

Итак, вопрос: почему печенье больше не работает?

Я не знаю, имеет ли это значение, но Gruntfile был создан с помощью yoman в более старой версии (с грубой оценкой). Я обновил package.json и Gruntfile до более новых спецификаций, используя grunt-contrib-watch и buildin livereload. Без 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

+7
источник поделиться
2 ответа

Мое решение:

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']);
};
0
источник

Я думаю, grunt-concurrent - это то, что вы ищете.

Вот мой подход. (Обратите внимание, что он написан на кофе script, но вы должны легко его адаптировать).

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']
0
источник

Посмотрите другие вопросы по меткам или Задайте вопрос