Блог о веб-разработке > Gulp > Gulp livereload

Gulp livereload

Устали от того, что вам приходится каждый раз обновлять браузер после того, как внесли изменения в LESS/SASS/CSS файлы? В этой статье мы рассмотрим плагин Livereload, который избавит вас от необходимости постоянно обновлять браузер. Мы будем работать в Gulp.
Gulp livereload на Github.
Livereload — это инструмент, который позволит вам реально ускорит процесс веб-разработки, особенно во время работы с CSS. Livereload отслеживает изменения файлов (например, CSS, Javascript или изображения). Как только обнаруживается изменения, происходит обновление браузера. В этой статье мы будем править Less файлы.

Установка Livereload

Откройте командную строку и перейдите в директорию с проектом, где находятся файлы gulpfile.js and package.json. Введите команду:

npm install --save-dev gulp-livereload

1	npm install --save-dev gulp-livereload

Далее необходимо установить расширение для браузера Google Chrome. Скачать его можете здесь.
В gulpfile.js запишем следующий код:

gulp.task('build-css', function() {
       return gulp.src('assets/less/*.less')
            .pipe(plugins.plumber())
            .pipe(plugins.less())
            .on('error', function (err) {
                gutil.log(err);
                this.emit('end');
            })
            // .pipe(plugins.cssmin())
            .pipe(plugins.autoprefixer(
                {
                    browsers: [
                        '> 1%',
                        'last 2 versions',
                        'firefox >= 4',
                        'safari 7',
                        'safari 8',
                        'IE 8',
                        'IE 9',
                        'IE 10',
                        'IE 11'
                    ],
                    cascade: false
                }
            ))
            .pipe(gulp.dest('build')).on('error', gutil.log)
            .pipe(plugins.livereload());
    });

gulp.task('build-css', function() {

return gulp.src('assets/less/*.less')

.pipe(plugins.plumber())

.pipe(plugins.less())

.on('error', function (err) {

gutil.log(err);

this.emit('end');

})

// .pipe(plugins.cssmin())

.pipe(plugins.autoprefixer(

{

browsers: [

'> 1%',

'last 2 versions',

'firefox >= 4',

'safari 7',

'safari 8',

'IE 8',

'IE 9',

'IE 10',

'IE 11'

cascade: false

}

))

.pipe(gulp.dest('build')).on('error', gutil.log)

.pipe(plugins.livereload());

});

Запустим Gulp и внесем изменения в файл Less. в браузере вы должны увидеть обновленную страницу.

(2 votes, average: 5,00 out of 5)

Загрузка...

Gulp livereload

Установка Livereload

Добавить комментарий Отменить ответ