-
Notifications
You must be signed in to change notification settings - Fork 0
/
gulpfile.js
131 lines (122 loc) · 5.54 KB
/
gulpfile.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
// В переменные получаем установленные пакеты
const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const cssnano = require('gulp-cssnano');
const mmq = require('gulp-merge-media-queries');
const del = require('del');
const htmlmin = require('gulp-htmlmin');
const imagemin = require('gulp-imagemin');
const rigger = require('gulp-rigger');
// Создаем таск для сборки html файлов
gulp.task('html', () => {
// Берем все файлы с расширением html в папке src
return gulp.src('./src/*.html')
// с помощью ригера собираем куски html файлов, если таковые есть (//= в index.html)
.pipe(rigger())
// минифицируем html
.pipe(htmlmin({
collapseWhitespace: true
}))
// выкидываем html в папку dist
.pipe(gulp.dest('./dist'))
// говорим browser-sync о том что пора перезагрузить барузер, так как файл изменился
.pipe(browserSync.reload({
stream: true
}));
});
// Создаем таск для сборки css файлов
gulp.task('css', () => {
// Берем только файл styles.scss в папке src, в который импортируеются паршалы
return gulp.src('./src/sass/main.scss')
// Преобразовываем sass в css
.pipe(sass().on('error', sass.logError))
// Создаем вендорные префиксы
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
// Группируем медиа правила
.pipe(mmq({
log: false
}))
// Минифицируем css
.pipe(cssnano())
// Выкидываем css в папку dist
.pipe(gulp.dest('./dist'))
// Говорим browser-sync о том что пора перезагрузить барузер так как файл изменился
.pipe(browserSync.reload({
stream: true
}));
});
// Создаем таск для оптимизации картинок
gulp.task('img', () => {
// Берем все картинки из папки img
return gulp.src('./src/images/**/*.+(png|jpg|gif|svg)')
// Пробуем оптимизировать
.pipe(imagemin(
imagemin.svgo({
plugins: [
{ removeViewBox: true },
{ cleanupIDs: false }
]
})))
// Выкидываем в папку dist/img
.pipe(gulp.dest('./dist/images'))
// Говорим browser-sync о том что пора перезагрузить барузер так как файл изменился
.pipe(browserSync.reload({
stream: true
}));
});
// Таск копирования всех шрифтов из папки fonts в dist/fonts
gulp.task('fonts', () => {
return gulp.src('./src/fonts/**/*.*')
.pipe(gulp.dest('./dist/fonts'))
// Говорим browser-sync о том что пора перезагрузить барузер так как файл изменился
.pipe(browserSync.reload({
stream: true
}));
});
gulp.task('script', () => {
return gulp.src('./src/scripts/**/*.*')
.pipe(gulp.dest('./dist/scripts'))
// Говорим browser-sync о том что пора перезагрузить барузер так как файл изменился
.pipe(browserSync.reload({
stream: true
}));
});
// Таск слежения за изменениями файлов
gulp.task('watch', () => {
// Следим за изменениями в любом html файле и вызываем таск 'html' на каждом изменении
gulp.watch('./src/**/*.html', ['html']);
// Следим за изменениями в любом sass файле и вызываем таск 'css' на каждом изменении
gulp.watch('./src/sass/**/*.scss', ['css']);
// Следим за изменениями картинок и вызываем таск 'img' на каждом изменении
gulp.watch('./src/images/**/*.*', ['img']);
// Следим за изменениями в шрифтах и вызываем таск 'fonts' на каждом изменении
gulp.watch('./src/fonts/**/*.*', ['fonts']);
gulp.watch('./src/scripts/**/*.*', ['script']);
});
// Таск создания и запуска веб-сервера
gulp.task('server', () => {
browserSync.init({
server: {
// указываем из какой папки "поднимать" сервер
baseDir: "./dist"
},
// Говорим спрятать надоедливое окошко обновления в браузере
notify: false
});
});
// Таск удаления папки dist, будем вызывать 1 раз перед началом сборки
gulp.task('del:dist', () => {
return del.sync('./dist');
});
// Таск который 1 раз собирает все статические файлы
gulp.task('build', ['html', 'css', 'img', 'fonts','script']);
// Главный таск, сначала удаляет папку dist,
// потом собирает статику, после чего поднимает сервер
// и затем запускает слежение за файлами
// Запускается из корня проекта командой npm start
gulp.task('start', ['del:dist', 'build', 'server', 'watch']);