const gulp = require('gulp');
const sass = require('gulp-sass');
const concat = require('gulp-concat')
const autoprefixer = require('gulp-autoprefixer');
const cleanCSS = require('gulp-clean-css');
const browserSync = require('browser-sync').create();
const sourcemaps = require('gulp-sourcemaps');
const gcmq = require('gulp-group-css-media-queries');
const imagemin = require('gulp-imagemin');
const webp = require('gulp-webp');
const svgstore = require('gulp-svgstore');
const config = {
src: './src',
css: {
watch: '/precss/**/*.sass',
src: '/precss/main.sass',
dest: '/css'
},
html: {
src: '/*.html'
},
js: {
src: '/js/*.js'
}
};
gulp.task('build', function () {
return gulp.src(config.src + config.css.src)
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(gcmq())
.pipe(autoprefixer())
// .pipe(cleanCSS({
// level: 2
// }))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(config.src + config.css.dest))
.pipe(browserSync.reload({
stream: true
}));
});
gulp.task('js', function() {
return gulp.src(config.src + config.js.src)
.pipe(gulp.dest('./src/js/'))
});
gulp.task('image-min', () =>
gulp.src('./src/img/**/*.{png, jpeg, svg}')
.pipe(imagemin([
imagemin.gifsicle({interlaced: true}),
imagemin.jpegtran({progressive: true}),
imagemin.optipng({optimizationLevel: 3}),
imagemin.svgo()
]))
.pipe(gulp.dest('./src/img/'))
);
gulp.task('webp', () =>
gulp.src('./src/img/**/*.{png, jpeg}')
.pipe(webp({quality: 90}))
.pipe(gulp.dest('./src/img/'))
);
gulp.task('sprite', function () {
return gulp
.src('./src/img/icon-*.svg')
.pipe(svgstore({
inlineSvg: true
}))
.pipe(rename('sprite.svg'))
.pipe(gulp.dest('./src/img/'));
});
gulp.task('watch', function () {
gulp.watch(config.src + config.css.watch, gulp.parallel('build'));
gulp.watch(config.src + config.js.src).on('change', browserSync.reload);
gulp.watch(config.src + config.html.src).on('change', browserSync.reload);
});
gulp.task('browserSync', function () {
browserSync.init({
server: {
baseDir: config.src
}
});
});
gulp.task('dist', function(){
return gulp.src([
'./src/fonts/**/*.{woff,woff2}',
'./src/img/**',
'./src/js/**',
'./src/*html',
'./src/css/*.css'
], {
base: './src'
})
.pipe(gulp.dest('dist'))
});
gulp.task('default', gulp.parallel('watch','browserSync', 'build', 'js'));