Модифицированный gulpfile + package.json. Работы с проектом (app) и диплоем (dist). Структура папок по Климанову

gulpfile_klim_mod

========================================== gulpfile.js =================================

// Основа - "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-uglify'), // подключаем gulp-uglify для сжатия 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
				//baseDir: 'dist' // Директория для сервера - dist
				},
				notify: false // Отключаем уведомления
		});
});


gulp.task('scripts', function() {
	return gulp.src([ // Берем все необходимые библиотеки
		'./app/libs/modernizr/modernizr.js',
		'./app/libs/jquery/dist/jquery.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(cssnano())  					// Cжимаем 
							 .pipe(rename({suffix : '.min'}))  // Добавляем суфикс .min
							 .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/**/*')  // Берем все файлы стилей
											.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']);

========================================== package.json  =================================
{
  "name": "gulp-project",
  "version": "1.0.0",
  "description": "My project after Klimanov",
  "devDependencies": {
    "browser-sync": "^2.11.0",
    "del": "^2.2.0",
    "gulp": "^3.9.0",
    "gulp-autoprefixer": "^3.1.0",
    "gulp-cache": "^0.4.4",
    "gulp-clean-css": "^2.0.4",
    "gulp-concat": "^2.6.0",
    "gulp-cssnano": "^2.1.1",
    "gulp-imagemin": "^2.4.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^2.0.4",
    "gulp-uglify": "^1.5.3",
    "imagemin-pngquant": "^4.2.2",
    "node-bourbon": "^4.2.3"
  }
}
================================================== .bowerrc  =====================================================
{
	"directory" : "app/libs/"
}