Несколько месяцев не пользовался сборщиком gulp
Понадобилось, создал новый проект, но старый велосипед не заработал. Не обновляется страница при изменениях.
Уже и обновил browser-sync до 2.23.6 (был 2.18) и с gulp файлом поигрался - не помогает. Подскажите, где я лопухнулся?
Вот содержимое gulp`a:
var gulp = require('gulp'), // Подключаем Gulp
sass = require('gulp-sass'), //Подключаем Sass пакет,
browserSync = require('browser-sync').create(), // Подключаем Browser Sync
concat = require('gulp-concat'), // Подключаем gulp-concat (для конкатенации файлов)
uglify = require('gulp-uglifyjs'), // Подключаем gulp-uglifyjs (для сжатия JS)
cssnano = require('gulp-cssnano'), // Подключаем пакет для минификации CSS
rename = require('gulp-rename'), // Подключаем библиотеку для переименования файлов
del = require('del'), // Подключаем библиотеку для удаления файлов и папок
imagemin = require('gulp-imagemin'), // Подключаем библиотеку для работы с изображениями
pngquant = require('imagemin-pngquant'), // Подключаем библиотеку для работы с png
cache = require('gulp-cache'), // Подключаем библиотеку кеширования
autoprefixer = require('gulp-autoprefixer'), // Подключаем библиотеку для автоматического добавления префиксов
smartgrid = require('smart-grid'), // Подключаем smart grids
notify = require('gulp-notify'), // Перехват ошибок
pug = require('gulp-pug');
var dirMain = "./app/",
dirSass = dirMain + "sass/",
dirCss = dirMain + "assets/css",
dirJs = dirMain + "assets/js/",
dirImg = dirMain + "assets/img/",
dirFonts = dirMain + "assets/fonts/",
dirPug = dirMain + "pug/",
dirLibs = dirMain + "libs/",
dirDist = "./dist/";
gulp.task('pug', function buildHTML() {
return gulp.src(dirPug + '*.pug')
.pipe(pug().on('error', notify.onError({
message: "<%= error.message %>",
title: "pug Error!"
})))
.pipe(pug({
// Your options in here.
pretty: ' '
}))
.pipe(gulp.dest(dirMain));
});
gulp.task('sass', function() { // Создаем таск Sass
return gulp.src(dirSass + "main.sass") // Берем источник
.pipe(sass().on('error', notify.onError({
message: "<%= error.message %>",
title: "Sass Error!"
})))
.pipe(sass()) // Преобразуем Sass в CSS посредством gulp-sass
.pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true })) // Создаем префиксы
.pipe(gulp.dest(dirCss)) // Выгружаем результат в css
.pipe(browserSync.stream()); // Обновляем CSS на странице при изменении
});
gulp.task('scripts-libs', function() {
return gulp.src([ // Берем все необходимые библиотеки
dirLibs + 'jquery/dist/jquery.min.js', // Берем jQuery
dirLibs + 'fancybox/dist/jquery.fancybox.min.js', // Берем Fancybox
dirLibs + 'owl.carousel/dist/owl.carousel.min.js' // Берем Owl Carousel
])
.pipe(concat('libs.min.js')) // Собираем их в кучу в новом файле libs.min.js
.pipe(uglify()) // Сжимаем JS файл
.pipe(gulp.dest(dirJs)); // Выгружаем js
});
gulp.task('css-libs', function() {
return gulp.src([ // Выбираем файлы css для библиотек
dirLibs + 'fancybox/dist/jquery.fancybox.min.css', // Берем Fancybox css
dirLibs + 'owl.carousel/dist/assets/owl.carousel.min.css', // Берем Owl Carousel css
dirLibs + 'owl.carousel/dist/assets/owl.theme.default.min.css' // Берем Owl Carousel css
])
.pipe(concat('libs.min.css'))
.pipe(cssnano()) // Сжимаем
.pipe(gulp.dest(dirCss)); // Выгружаем в папку app/css
});
gulp.task('css-reset', function() {
return gulp.src(dirLibs + 'reset-css/reset.css') // Берем Reset css
.pipe(cssnano()) // Сжимаем
.pipe(gulp.dest(dirCss)); // Выгружаем в папку app/css
});
gulp.task('js-watch', ['scripts-libs'], function(done) {
browserSync.reload();
done();
});
gulp.task('watch', ['css-libs', 'scripts-libs', 'css-reset'], function() {
browserSync.init({
server: {
baseDir: dirMain
}
});
gulp.watch(dirPug + '**/*.pug', ['pug']); // Наблюдение за pug файлами в папке views
gulp.watch(dirSass + '**/*.sass', ['sass']); // Наблюдение за sass файлами в папке sass
gulp.watch(dirMain + "*.html").on('change', browserSync.reload); // Наблюдение за HTML файлами в корне проекта
gulp.watch(dirJs + '**/*.js', ['js-watch']); // Наблюдение за JS файлами в папке js
});
gulp.task('clean', function() {
return del.sync(dirDist); // Удаляем папку dist перед сборкой
});
gulp.task('img', function() {
return gulp.src(dirImg + '**/*') // Берем все изображения из app
.pipe(cache(imagemin({ // Сжимаем их с наилучшими настройками с учетом кеширования
interlaced: true,
progressive: true,
svgoPlugins: [{ removeViewBox: false }],
use: [pngquant()]
})))
.pipe(gulp.dest(dirDist + 'assets/img')); // Выгружаем на продакшен
});
gulp.task('build', ['clean', 'img', 'sass', 'scripts-libs'], function() {
var buildCss = gulp.src([ // Переносим библиотеки в продакшен
dirCss + '**/*.css'
])
.pipe(gulp.dest(dirDist + 'assets'))
var buildFonts = gulp.src(dirFonts + '**/*') // Переносим шрифты в продакшен
.pipe(gulp.dest(dirDist + 'assets/fonts'))
var buildJs = gulp.src(dirJs + '**/*') // Переносим скрипты в продакшен
.pipe(gulp.dest(dirDist + 'assets/js'))
var buildHtml = gulp.src(dirMain + '*.html') // Переносим HTML в продакшен
.pipe(gulp.dest(dirDist));
});
gulp.task('clear', function() {
return cache.clearAll();
})
gulp.task('default', ['watch']);
