безумие grunt-browser-sync: открытие нескольких экземпляров браузера снова и снова

Я близок к тому, чтобы заставить grunt-browser-sync работать, но еще не совсем.

Я придумал этот Gruntfile:

module.exports = function(grunt) {    
    grunt.initConfig({
        pkg : grunt.file.readJSON('package.json'),
        concat : {
            dist : {
                src : ['js/libs/*.js', 'js/custom/*.js'],
                dest : 'js/build/production.js',
            }
        },
        uglify : {
            dist : {
                src : 'js/build/production.js',
                dest : 'js/build/production.min.js'
            }
        },
        sass : {
            dist : {
                options : {
                    style : 'compressed',
                    compass : 'true',
                },
                files : {
                    'css/main.css' : 'sass/main.scss'
                }
            }
        },
        autoprefixer : {
            options : {
                browsers : ['> 5%', 'last 2 version', 'ie 8', 'ie 9']
            },
            dist : {
                files : {
                    'css/main.css' : 'css/main.css'
                }
            }
        },
        watch : {
            options : {
                livereload : true

            },
            content : {
                files : '*.html',
                tasks : ['browserSync']

            },
            scripts : {
                files : ['js/libs/*.js', 'js/custom/*.js'],
                tasks : ['concat', 'uglify', 'browserSync'],
                options : {
                    spawn : false,
                },
            },
            css : {
                files : ['sass/**/*.scss'],
                tasks : ['sass', 'autoprefixer', 'browserSync'],
                options : {
                    spawn : false,
                }
            }
        },
        browserSync : {
            files : {
                src : ['css/*.css', 'images/*.*', 'js/build/production.min.js', '*.html'],
            },
            options : {     
                server: {
                    baseDir: "./",
                },  
                watchTask : true
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-browser-sync');
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-autoprefixer');
    grunt.loadNpmTasks('grunt-newer');
    grunt.registerTask('newer', ['browserSync', 'sass', 'autoprefixer', 'concat', 'uglify']);
};

Я хочу следующее:

  1. Введите grunt watch в терминале, и мой index.html автоматически откроется на статической странице сервера в моем браузере.
  2. Страница, которая будет перезагружаться при изменении CSS, JS или изображений.

Что происходит с моей конфигурацией, так это следующее:

  1. Новое окно браузера открывается только при сохранении файла
  2. Каждый раз, когда я что-то сохраняю, открывается несколько окон браузеров, а число localhost продолжает меняться, что делает плагин совершенно бесполезным.

Вывод задачи просмотра Grunt

Я знаю, что зарегистрировал tasks : ['browserSync'] во всех возможных местах файла, но это единственный способ, с помощью которого синхронизация браузера что-то делает. Я ожидал, что этого будет достаточно:

grunt.registerTask('newer', ['browserSync', 'sass', 'autoprefixer', 'concat', 'uglify']);

Но мне с этим не везет. синхронизация браузера срабатывает, но статический сервер не открывается.


person valerio0999    schedule 24.08.2014    source источник
comment
кто угодно? я продолжаю тестировать, но ничего не работает :\   -  person valerio0999    schedule 24.08.2014


Ответы (1)


Автор BrowserSync здесь.

Проблема в том, что вы запускаете задачу BrowserSync несколько раз — это неправильный способ ее использования.

Посмотрите примеры на http://www.browsersync.io/docs/grunt/ - вы должны запускать BrowserSync самостоятельно ( и ранее) любые другие задачи просмотра, подобные этой.

// This shows a full config file!
module.exports = function (grunt) {
    grunt.initConfig({
        watch: {
            files: "assets/scss/**/*.scss",
            tasks: ['compass']
        },
        compass: {
            dist: {
                options: {
                    sassDir: 'assets/scss',
                    cssDir: 'assets/css',
                    outputStyle: 'compressed'
                }
            }
        },
        browserSync: {
            dev: {
                bsFiles: {
                    src : 'assets/css/*.css'
                },
                options: {
                    watchTask: true // < VERY important
                }
            }
        }
    });

    // load npm tasks
    grunt.loadNpmTasks('grunt-contrib-compass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-browser-sync');

    // start browsersync and then initiate the watch AFTER
    grunt.registerTask('default', ["browserSync", "watch"]);
};
person shane    schedule 16.09.2014