-
Notifications
You must be signed in to change notification settings - Fork 0
/
gulpfile.js
97 lines (77 loc) · 3.57 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
const { src, dest, watch, parallel, series } = require('gulp'); //создаем переменную, которая запрашивает возможности плагин
const scss = require('gulp-sass')(require('sass'));//создаем переменную, которая имеет возможности плагина
const concat = require('gulp-concat'); //плагин который делает конкатинацию
const browserSync = require('browser-sync').create(); //задаем немного иначе, это мы нашли на сайте браузер синк
const uglify = require('gulp-uglify-es').default; //работает с файлами жс
const autoprefixer = require('gulp-autoprefixer');
const imagemin = require('gulp-imagemin');
const del = require('del');
// const $ = require('jquery');
function styles() {
return src('app/scss/style.scss') //находим исходный файл
.pipe(scss({outputStyle:'compressed'})) //стиль в котором выйдет файл - сжатый
.pipe(concat('style.min.css')) // плагин переименовывает исходный файл
.pipe(autoprefixer({
overrideBrowserslist: ['last 10 version'],
grid: true
}))
.pipe(dest('app/css')) //куда отправляем
.pipe(browserSync.stream()); //типа изменения в этом файле стилей scss мы отправляем в переменную браузер синг
}
function cleanDist(){
return del('dist')
}
function build() {
return src([
'app/css/style.min.css',
'app/fonts/**/*',
'app/js/main.min.js',
'app/*.html'
], {base: 'app'})
.pipe(dest('dist'));
}
function watching(){
watch(['app/scss/**/*.scss'], styles);//файлы, за которыми следит прога and make action
watch(['app/js/**/*js', '!app/js/main.min.js'], scripts);
watch(['app/*.html']).on('change', browserSync.reload);
}
function browsersync(){
browserSync.init({
server : {
baseDir: 'app/' //мы создали сервер
}
});
}
function scripts(){
return src([
'node_modules/jquery/dist/jquery.js', //обращаемся ко всем файлам js
'app/js/main.js'
])
.pipe(concat('main.min.js')) //объединяем файлы в один с таким названием
.pipe(uglify()) //сжимаем
.pipe(dest('app/js')) //отправляем файл в эту папку
.pipe(browserSync.stream()); //типа изменения в этом файле js мы отправляем в переменную браузер синг
}
function images(){
return src('app/images/**/*')
.pipe(imagemin([
imagemin.gifsicle({interlaced: true}),
imagemin.mozjpeg({quality: 75, progressive: true}),
imagemin.optipng({optimizationLevel: 5}),
imagemin.svgo({
plugins: [
{removeViewBox: true},
{cleanupIDs: false}
]
})
]))
.pipe(dest('dist/images'))
}
exports.styles = styles;
exports.watching = watching;
exports.browsersync = browsersync;
exports.scripts = scripts;
exports.cleanDist = cleanDist;
exports.images = images;
exports.build = series(cleanDist, images, build);
exports.default = parallel(styles, scripts, browsersync, watching); //действует по умолчанию при нажатии в консоль gulp