Gulp. Урок 6. Генерация префиксов и автообновление

1) Установка префиксов в css - gulp-autoprefixer
https://www.npmjs.com/package/gulp-autoprefixer



Установка: npm i gulp-autoprefixer

В файле gulpfile.js пишем:
const gulp = require('gulp');
const autoprefixer = require('gulp-autoprefixer');

Запускаем наш сайт по адресу: http://localhost:8000/
И все наши сохранения кода запускаются автоматически.

gulp.task('default', () =>
    gulp.src('css/style.css')
        .pipe(autoprefixer({
            browsers: ['last 20 versions'],
            cascade: false
        }))
        .pipe(gulp.dest('dist'))
);

Запускаем командой gulp

2) Автоматическое обновление браузера при обновлении файлов - gulp-server-livereload
https://www.npmjs.com/package/gulp-server-livereload

Установка: npm install --save-dev gulp-server-livereload

В файле gulpfile.js пишем:
var gulp = require('gulp');
var server = require('gulp-server-livereload');

gulp.task('default', function() {
  gulp.src('')
    .pipe(server({
      livereload: true,
  defaultFile: 'index.html', // наш начальный файл
      directoryListing: false,
      open: false
    }));
});

Запускаем командой gulp

Теперь при обновлении файлов браузер будет обновляться автоматически.

Внимание! Сайт нужно открывать по адресу http://localhost:8000/