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');
function styles(){
return src('src/scss/style.scss')
.pipe(scss({outputStyle: 'compressed'}))
.pipe(concat('style.min.css'))
.pipe(autoprefixer({
overrideBrowserslist:['last 10 version']
}))
.pipe(dest('src/css'))
.pipe(browserSync.stream())
}
function browsersync(){
browserSync.init({
server:{
baseDir:"./src"
}
});
}
function scripts(){
return src ([
'node_modules/jquery/dist/jquery.js',
'src/js/main.js'
])
.pipe(concat('main.min.js'))
.pipe(uglify())
.pipe(dest('src/js'))
.pipe(browserSync.stream())
}
function images(){
return src('src/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'))
}
function build(){
return src([
'src/css/style.min.css',
'src/fonts/**/*',
'src/js/main.min.js',
'src/*.html'
],{base: 'src'})
.pipe(dest('dist'))
}
function watching(){
watch(['src/scss/**/*.scss'], styles);
watch(['src/js/main.js', '!src/js/main.min.js'],scripts);
watch('src/*.html').on('change', browserSync.reload);
}
function cleanDist(){
return del('dist')
}
exports.styles = styles;
exports.watching = watching;
exports.browsersync = browsersync;
exports.scripts = scripts;
exports.images = images;
exports.cleanDist = cleanDist;
exports.build = series(cleanDist, images, build);
exports.default = parallel(styles, scripts, browsersync, watching);
Результат:
[20:36:08] Starting 'default'...
[20:36:08] Starting 'styles'...
[20:36:08] Starting 'scripts'...
[20:36:08] Starting 'browsersync'...
[20:36:08] Starting 'watching'...
[Browsersync] Access URLs:
-------------------------------------
Local:
localhost:3000
-------------------------------------
UI:
localhost:3001
UI External:
localhost:3001
-------------------------------------
[Browsersync] Serving files from: ./src
[Browsersync] 1 file changed (style.min.css)
[20:36:10] Finished 'styles' after 2.75 s
[Browsersync] 1 file changed (main.min.js)
[20:36:11] Finished 'scripts' after 2.8 s
[Browsersync] Reloading Browsers... (buffered 2 events)