gulpfile.js - Klimanov after Loftblog

gulpfile А.Климанова (по мотивам Loftblog)

// Gulp для самых маленьких - подробное руководство - https://www.youtube.com/watch?v=vW51JUVT66w
// и http://webdesign-master.ru/blog/tools/2016-03-09-gulp-beginners.html
// Внесены коррективы, чтобы файл мог работать с проектом ОВК-строй (16-04-2016)

var gulp = require('gulp'),   // Подключаем Gulp и пакеты из папки node_modules в наш проект
		sass = require('gulp-sass'), // Подключаем SASS пакет
		browserSync = require('browser-sync'), // подключаем 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'); // подключаем библиотеку для авто-простановки префиксов


gulp.task('browser-sync', function() { // Создаем таск browser-sync
		browserSync({   // Выполняем browser Sync
				server:{ // Параметры сервера
					baseDir: 'app' // Директория для сервера - app
				},
				notify: false // Отключаем уведомления
		});
});


gulp.task('scripts', function() {
	return gulp.src([ // Берем все необходимые библиотеки
		'./app/libs/modernizr/modernizr.js',
		'./app/libs/jquery/jquery-1.11.2.min.js',
		'./app/libs/waypoints/waypoints.min.js',
		'./app/libs/animate/animate-css.js',
		'./app/libs/Magnific-Popup/jquery.magnific-popup.min.js',
		'./app/libs/animateNumber/jquery.animateNumber.min.js',
		'./app/libs/equalHeights/equalHeights.min.js',
		'./app/libs/owl-carousel/owl.carousel.min.js',
		'./app/libs/selectize/dist/js/standalone/selectize.min.js',
		])
		.pipe(concat('libs.min.js')) // Собираем их в кучу в новом файле libs.min.js
		.pipe(uglify()) // Сжимаем JS файл
		.pipe(gulp.dest('app/js')); // Выгружаем в папку app/js
});


gulp.task('sass', function(){
		return gulp.src('app/sass/**/*.sass')  // берем все sass-файлы из папки sass
							 .pipe(sass({
								includePaths: require('node-bourbon').includePaths})
							 .on('error', sass.logError))  //преобразуем sass в css посредством gulp-sass
							 .pipe(autoprefixer(['last 15 versions', '>1%', 'ie 8', 'ie 7'], {cascade: true})) // создаем префиксы
							 .pipe(gulp.dest('app/css')) // выгружаем результат  в папку app/css
							 .pipe(browserSync.reload({stream: true})) // обновление CSS на странице при изменении
});


gulp.task('css-libs', ['sass'], function(){
		return gulp.src('app/css/libs.css')  // выбираем файл для минификации
						.pipe(cssnano())  					// Cжимаем 
						.pipe(rename({suffix : '.min'}))  // Добавляем суфикс .min
						.pipe(gulp.dest('app/css'))       // выгружаем в папку app/css'
});


gulp.task('watch', ['browser-sync', 'css-libs', 'sass', 'scripts'],  function() {
		gulp.watch('app/sass/**/*.sass', [sass]);  // наблюдение за sass файлами
		gulp.watch('app/css/*.css', browserSync.reload);  // наблюдение за css файлами
		gulp.watch('app/*.html', browserSync.reload);  // наблюдение за html файлами
		gulp.watch('app/js/**/*.js', browserSync.reload); // наблюдаем за js файлами
});


// Подготовка к продакшену

gulp.task('clean', function() {
	return del.sync('dist'); // Удаляем папку dist перед сборкой проекта
});


gulp.task('img', function() {
		return gulp.src('app/img/**/*')  // Берем все изображения
						.pipe(cache(imagemin({				// ... и сжимаем их с наилучшими параметрами и учитываем кеширование
										interlaced: true,
										progressive: true,
										svgoPlugins: [{removeViewBox: false}],
										use: [pngquant()]
						})))
						.pipe(gulp.dest('dist/img'));   // Выгружаем изображения на продакшен
});


gulp.task('build', ['clean', 'img', 'sass', 'scripts'], function() {
			var buildCss = gulp.src(['app/css/main.css', 'app/css/libs.min.css'])
											.pipe(gulp.dest('dist/css'))			// Переносим CSS-стили в продакшен

			var buildFonts = gulp.src('app/fonts/**/*').pipe(gulp.dest('dist/fonts'))		// Переносим шрифты			
			
			var buildJs = gulp.src('app/js/**/*').pipe(gulp.dest('dist/js'))		// Переносим скрипты	

			var buildHtml = gulp.src('app/*.html').pipe(gulp.dest('dist'));		// Переносим HTML 					
})

// Таск по умолчанию и таск очистки кеша картинок

gulp.task('clear', function() { return cache.clearAll(); })

gulp.task('default', ['watch']);

gulpfile Климанова - по мотивам Loftblog

// Gulp для самых маленьких - подробное руководство - https://www.youtube.com/watch?v=vW51JUVT66w
// и http://webdesign-master.ru/blog/tools/2016-03-09-gulp-beginners.html
// дополнительно Gulp (Browsersync) + PHP (Open Server) -https://www.youtube.com/watch?v=wE-Oi84UJXE 

var gulp = require('gulp'),   // Подключаем Gulp и пакеты из папки node_modules в наш проект
		sass = require('gulp-sass'), // Подключаем SASS пакет
		browserSync = require('browser-sync'), // подключаем 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'); // подключаем библиотеку для авто-простановки префиксов


// gulp.task('mytask', function() {console.log('Привет, я таск - инструкция, которая выполняется менеджером');});

// Работа над проектом 

gulp.task('scripts', function() {
	return gulp.src([ // Берем все необходимые библиотеки
		'app/libs/jquery/dist/jquery.min.js', // Берем jQuery
		'app/libs/magnific-popup/dist/jquery.magnific-popup.min.js' // Берем Magnific Popup
		])
		.pipe(concat('libs.min.js')) // Собираем их в кучу в новом файле libs.min.js
		.pipe(uglify()) // Сжимаем JS файл
		.pipe(gulp.dest('app/js')); // Выгружаем в папку app/js
});


gulp.task('browser-sync', function() { // Создаем таск browser-sync
		browserSync({   // Выполняем browser Sync
				server:{ // Параметры сервера
					baseDir: 'app' // Директория для сервера - app
				},
				notify: false // Отключаем уведомления
		});
});

gulp.task('sass', function(){
		return gulp.src('app/sass/**/*.sass')  // берем все sass-файлы из папки sass
							 .pipe(sass())  //преобразуем sass в css посредством gulp-sass
							 .pipe(autoprefixer(['last 15 versions', '>1%', 'ie 8', 'ie 7'], {cascade: true})) // создаем префиксы
							 .pipe(gulp.dest('app/css')) // выгружаем результат  в папку app/css
							 .pipe(browserSync.reload({stream: true})) // обновление CSS на странице при изменении
});


gulp.task('css-libs', ['sass'], function(){
		return gulp.src('app/css/libs.css')  // выбираем файл для минификации
						.pipe(cssnano())  					// Cжимаем 
						.pipe(rename({suffix : '.min'}))  // Добавляем суфикс .min
						.pipe(gulp.dest('app/css'))       // выгружаем в папку app/css'
});


gulp.task('watch', ['browser-sync', 'css-libs', 'sass'],  function() {
		gulp.watch('app/sass/**/*.sass', [sass]);  // наблюдение за sass файлами
		gulp.watch('app/css/*.css', browserSync.reload);  // наблюдение за css файлами
		gulp.watch('app/*.html', browserSync.reload);  // наблюдение за html файлами
		gulp.watch('app/js/**/*.js', browserSync.reload); // наблюдаем за js файлами
});


// Подготовка к продакшену

gulp.task('clean', function() {
	return del.sync('dist'); // Удаляем папку dist перед сборкой проекта
});


gulp.task('img', function() {
		return gulp.src('app/img/**/*')  // Берем все изображения
						.pipe(cache(imagemin({				// ... и сжимаем их с наилучшими параметрами и учитываем кеширование
										interlaced: true,
										progressive: true,
										svgoPlugins: [{removeViewBox: false}],
										use: [pngquant()]
						})))
						.pipe(gulp.dest('dist/img'));   // Выгружаем изображения на продакшен
});


gulp.task('build', ['clean', 'img', 'sass', 'scripts'], function() {
			var buildCss = gulp.src(['app/css/main.css', 'app/css/libs.min.css'])
											.pipe(gulp.dest('dist/css'))			// Переносим CSS-стили в продакшен

			var buildFonts = gulp.src('app/fonts/**/*').pipe(gulp.dest('dist/fonts'))		// Переносим шрифты			
			
			var buildJs = gulp.src('app/js/**/*').pipe(gulp.dest('dist/js'))		// Переносим скрипты	

			var buildHtml = gulp.src('app/*.html').pipe(gulp.dest('dist'));		// Переносим HTML 					
})

// Таск по умолчанию и таск очистки кеша картинок

gulp.task('clear', function() { return cache.clearAll(); })

gulp.task('default', ['watch']);