1+ var gulp = require ( 'gulp' ) , // Подключаем Gulp
2+ browserSync = require ( 'browser-sync' ) , // Подключаем Browser Sync
3+ concat = require ( 'gulp-concat' ) , // Подключаем gulp-concat (для конкатенации файлов)
4+ uglify = require ( 'gulp-uglifyjs' ) , // Подключаем gulp-uglifyjs (для сжатия JS)
5+ cssnano = require ( 'gulp-cssnano' ) , // Подключаем пакет для минификации CSS
6+ rename = require ( 'gulp-rename' ) , // Подключаем библиотеку для переименования файлов
7+ imagemin = require ( 'gulp-imagemin' ) , // Подключаем библиотеку для работы с изображениями
8+ pngquant = require ( 'imagemin-pngquant' ) , // Подключаем библиотеку для работы с png
9+ cache = require ( 'gulp-cache' ) , // Подключаем библиотеку кеширования
10+ autoprefixer = require ( 'gulp-autoprefixer' ) , // Подключаем библиотеку для автоматического добавления префиксов
11+ spritesmith = require ( 'gulp.spritesmith' ) , // Подключение библиотеки для создания спрайтов
12+ merge = require ( 'merge-stream' ) ;
13+
14+ gulp . task ( 'css' , function ( ) { // Создаем таск Sass
15+ return gulp . src ( 'src/css/**/*.css' ) // Берем источник
16+ . pipe ( autoprefixer ( [ 'last 15 versions' , '> 1%' , 'ie 8' , 'ie 7' ] , { cascade : true } ) ) // Создаем префиксы
17+ . pipe ( gulp . dest ( 'app/css' ) ) // Выгружаем результата в папку app/css
18+ . pipe ( browserSync . reload ( { stream : true } ) ) // Обновляем CSS на странице при изменении
19+ } ) ;
20+
21+ gulp . task ( 'browser-sync' , function ( ) { // Создаем таск browser-sync
22+ browserSync ( { // Выполняем browserSync
23+ server : { // Определяем параметры сервера
24+ baseDir : 'app' // Директория для сервера - app
25+ } ,
26+ notify : false // Отключаем уведомления
27+ } ) ;
28+ } ) ;
29+
30+ gulp . task ( 'sprite' , function ( ) { // Создаем таск sprite
31+ var spriteData = gulp . src ( 'src/sprite/*.png' ) . pipe ( spritesmith ( { // Настройка спрайта
32+ imgName : 'sprite.png' ,
33+ cssName : 'sprite.css'
34+ } ) ) ;
35+ // return spriteData.pipe(gulp.dest('app/img/')); // выгружаем спрайты в папку img
36+ var imgStream = spriteData . img
37+ . pipe ( gulp . dest ( 'app/img/' ) ) ;
38+
39+ var cssStream = spriteData . css
40+ . pipe ( gulp . dest ( 'src/css/' ) ) ;
41+
42+ return merge ( imgStream , cssStream ) ;
43+ } ) ;
44+
45+
46+ gulp . task ( 'scripts' , function ( ) {
47+ return gulp . src ( 'src/js/**/*.js' )
48+ . pipe ( concat ( 'plugins.min.js' ) ) // Собираем их в кучу в новом файле plugins.min.js
49+ . pipe ( uglify ( ) ) // Сжимаем JS файл
50+ . pipe ( gulp . dest ( 'app/js' ) ) ; // Выгружаем в папку app/js
51+ } ) ;
52+
53+ gulp . task ( 'css-libs' , [ 'css' ] , function ( ) {
54+ return gulp . src ( 'app/css/libs.css' ) // Выбираем файл для минификации
55+ . pipe ( cssnano ( ) ) // Сжимаем
56+ . pipe ( rename ( { suffix : '.min' } ) ) // Добавляем суффикс .min
57+ . pipe ( gulp . dest ( 'app/css' ) ) ; // Выгружаем в папку app/css
58+ } ) ;
59+
60+ gulp . task ( 'watch' , [ 'browser-sync' , 'css' , 'scripts' , 'sprite' ] , function ( ) {
61+ gulp . watch ( 'src/css/**/*.css' , [ 'css' ] ) ; // Наблюдение за css файлами в папке css
62+ gulp . watch ( 'src/sprite/*.png' , [ 'sprite' ] ) ; // Наблюдение за папкой с картинками для спрайтов папке sprite
63+ gulp . watch ( 'app/*.html' , browserSync . reload ) ; // Наблюдение за HTML файлами в корне проекта
64+ gulp . watch ( 'app/js/**/*.js' , browserSync . reload ) ; // Наблюдение за JS файлами в папке js
65+ } ) ;
66+
67+ gulp . task ( 'img' , function ( ) {
68+ return gulp . src ( 'src/img/**/*' ) // Берем все изображения из app
69+ . pipe ( cache ( imagemin ( { // Сжимаем их с наилучшими настройками с учетом кеширования
70+ interlaced : true ,
71+ progressive : true ,
72+ svgoPlugins : [ { removeViewBox : false } ] ,
73+ use : [ pngquant ( ) ]
74+ } ) ) )
75+ . pipe ( gulp . dest ( 'app/img' ) ) ; // Выгружаем на продакшен
76+ } ) ;
77+
78+
79+ gulp . task ( 'clear' , function ( ) {
80+ return cache . clearAll ( ) ;
81+ } ) ;
82+
83+ gulp . task ( 'default' , [ 'watch' ] ) ;
0 commit comments