Gulp livereload
Устали от того, что вам приходится каждый раз обновлять браузер после того, как внесли изменения в LESS/SASS/CSS файлы? В этой статье мы рассмотрим плагин Livereload, который избавит вас от необходимости постоянно обновлять браузер. Мы будем работать в Gulp.
Gulp livereload на Github.
Livereload — это инструмент, который позволит вам реально ускорит процесс веб-разработки, особенно во время работы с CSS. Livereload отслеживает изменения файлов (например, CSS, Javascript или изображения). Как только обнаруживается изменения, происходит обновление браузера. В этой статье мы будем править Less файлы.
Установка Livereload
Откройте командную строку и перейдите в директорию с проектом, где находятся файлы gulpfile.js and package.json. Введите команду:
1 | npm install --save-dev gulp-livereload |
Далее необходимо установить расширение для браузера Google Chrome. Скачать его можете здесь.
В gulpfile.js запишем следующий код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | 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. в браузере вы должны увидеть обновленную страницу.