gulpfile

gulpfile.js

// npm i gulp-sass browser-sync gulp-cssnano gulp-rename del gulp-autoprefixer gulp-notify  --save-dev

var gulp 			= require('gulp'), // Подключаем Gulp
    sass 			= require('gulp-sass'); //Подключаем Sass пакет
    browserSync 	= require('browser-sync'); // Подключаем Browser Sync
    cssnano     	= require('gulp-cssnano'), // Подключаем пакет для минификации CSS
    rename      	= require('gulp-rename'); // Подключаем библиотеку для переименования файлов
    del         	= require('del'); // Подключаем библиотеку для удаления файлов и папок
    autoprefixer 	= require('gulp-autoprefixer');
    notify 			= require( 'gulp-notify' );


	gulp.task('sass', function(){
	    return gulp.src('app/sass/**/*.sass') // Берем все sass файлы из папки sass и дочерних, если таковые будут
	    	.pipe( sass().on( 'error', notify.onError(
			      {
			        message: "<%= error.message %>",
			        title  : "Sass Error!"
			      } ) )
			  )
	        .pipe(sass())
	        .pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true })) //автопрефикс
	        .pipe(gulp.dest('app/css'))
	        .pipe( notify( 'О Боже! Твой код великолепен!' ) )
	        .pipe(browserSync.reload({stream: true}));

	});

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

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

    gulp.task('app',['browser-sync', 'css-min'], function() {
	    gulp.watch('app/sass/**/*.sass', ['css-min']); // Наблюдение за sass файлами
	    gulp.watch('app/css/*.css', browserSync.reload); // Наблюдение за css файлами в корне проекта
	    gulp.watch('app/*.html', browserSync.reload); // Наблюдение за HTML файлами в корне проекта
	    gulp.watch('app/js/**/*.js', browserSync.reload); // Наблюдение за JS файлами в папке js
  
	});

	// -----Продакшен-----

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

	gulp.task('dist', ['clean', 'css-min'], function() {

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

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

    var buildFonts = gulp.src('app/img/**/*') // Переносим картинки в продакшен
    .pipe(gulp.dest('dist/img'))

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

    var buildHtml = gulp.src('app/*.html') // Переносим HTML в продакшен
    .pipe(gulp.dest('dist'));

});
	// -----Дополнительные настройки-----
	gulp.task('default', ['app']); 

	gulp.task('clear', function () { 
    return cache.clearAll(); //Чистим кэш gulp
	})