$ gulp
[13:47:09] Using gulpfile D:\gulpWeb\gulpfile.js
[13:47:09] Starting 'default'...
[13:47:09] Starting 'watchFiles'...
[13:47:09] Starting 'serve'...
[13:47:09] Starting 'clean'...
[13:47:09] Finished 'clean' after 50 ms
[13:47:09] Starting 'html'...
[13:47:09] Starting 'css'...
[13:47:09] Starting 'js'...
[13:47:09] Starting 'images'...
[13:47:09] Starting 'fonts'...
[13:47:10] Finished 'fonts' after 345 ms
[Browsersync] Access URLs:
--------------------------------------
Local: http://localhost:3000
External: http://192.168.0.107:3000
--------------------------------------
UI: http://localhost:3001
UI External: http://localhost:3001
--------------------------------------
[Browsersync] Serving files from: ./dist/
[13:47:10] gulp-notify: [JS Error] Error: Received a non-Vinyl object in `dest()`
[13:47:10] Finished 'js' after 605 ms
[Browsersync] 1 file changed (index.html)
[13:47:10] Finished 'html' after 746 ms
[Browsersync] 1 file changed (style.min.css)
[13:47:10] Finished 'css' after 1.03 s
[Browsersync] Reloading Browsers... (buffered 2 events)
[13:47:12] gulp-imagemin: Minified 1 image (saved 44.2 kB - 69.1%)
[Browsersync] 1 file changed (2.png)
[13:47:12] Finished 'images' after 2.55 s
{
"name": "gulp-web",
"version": "1.0.0",
"description": "project using gulp4",
"author": "Kirill",
"devDependencies": {
"@babel/core": "^7.15.0",
"@babel/preset-env": "^7.15.0",
"babel-core": "^6.26.3",
"babel-loader": "^8.2.2",
"babel-preset-env": "^1.7.0",
"browser-sync": "^2.27.5",
"del": "^6.0.0",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^8.0.0",
"gulp-babel": "^8.0.0",
"gulp-cssbeautify": "^3.0.0",
"gulp-cssnano": "^2.1.3",
"gulp-imagemin": "^7.1.0",
"gulp-notify": "^4.0.0",
"gulp-plumber": "^1.2.1",
"gulp-rename": "^2.0.0",
"gulp-sass": "^5.0.0",
"gulp-strip-css-comments": "^2.0.0",
"gulp-uglify": "^3.0.2",
"panini": "^1.7.2",
"rigger": "^1.0.1",
"vinyl": "^2.2.1",
"webpack": "^5.51.1",
"webpack-stream": "^6.1.2"
},
"browserslist": [
"last 1 version",
"> 1%",
"IE 10"
],
"dependencies": {
"sass": "^1.38.1"
}
}
"use strict";
const {src, dest} = require("gulp");
const gulp = require("gulp");
const autoprefixer = require("gulp-autoprefixer");
const cssbeautify = require("gulp-cssbeautify");
const removeComments = require('gulp-strip-css-comments');
const rename = require("gulp-rename");
const sass = require("gulp-sass")(require('sass'));
const cssnano = require("gulp-cssnano");
const uglify = require("gulp-uglify");
const plumber = require("gulp-plumber");
const rigger = require("rigger");
/* const panini = require("panini"); */
const imagemin = require("gulp-imagemin");
const del = require("del");
const notify = require("gulp-notify");
/* const webpack = require('webpack');
const webpackStream = require('webpack-stream'); */
const browserSync = require("browser-sync").create();
/* Paths */
const srcPath = 'src/';
const distPath = 'dist/';
const path = {
build: {
html: distPath,
js: distPath + "assets/js/",
css: distPath + "assets/css/",
images: distPath + "assets/img/",
fonts: distPath + "assets/fonts/"
},
src: {
html: srcPath + "*.html",
js: srcPath + "assets/js/*.js",
css: srcPath + "assets/sass/*.scss",
images: srcPath + "assets/img/**/*.{jpg,png,svg,gif,ico,webp,webmanifest,xml,json}",
fonts: srcPath + "assets/fonts/**/*.{eot,woff,woff2,ttf,svg}"
},
watch: {
html: srcPath + "**/*.html",
js: srcPath + "assets/js/**/*.js",
css: srcPath + "assets/sass/**/*.scss",
images: srcPath + "assets/img/**/*.{jpg,png,svg,gif,ico,webp,webmanifest,xml,json}",
fonts: srcPath + "assets/fonts/**/*.{eot,woff,woff2,ttf,svg}"
},
clean: "./" + distPath
}
/* Tasks */
function serve() {
browserSync.init({
server: {
baseDir: "./" + distPath
}
});
}
function html() {
/* panini.refresh(); */
return src(path.src.html, {base: srcPath})
.pipe(plumber())
/* .pipe(panini({
root: srcPath,
layouts: srcPath + 'layouts/',
partials: srcPath + 'partials/',
helpers: srcPath + 'helpers/',
data: srcPath + 'data/'
})) */
.pipe(dest(path.build.html))
.pipe(browserSync.reload({stream: true}));
}
function css() {
return src(path.src.css, {base: srcPath + "assets/sass/"})
.pipe(plumber({
errorHandler : function(err) {
notify.onError({
title: "SCSS Error",
message: "Error: <%= error.message %>"
})(err);
this.emit('end');
}
}))
.pipe(sass({
includePaths: './node_modules/'
}))
.pipe(autoprefixer({
cascade: true
}))
.pipe(cssbeautify())
.pipe(dest(path.build.css))
.pipe(cssnano({
zindex: false,
discardComments: {
removeAll: true
}
}))
.pipe(removeComments())
.pipe(rename({
suffix: ".min",
extname: ".css"
}))
.pipe(dest(path.build.css))
.pipe(browserSync.reload({stream: true}));
}
function cssWatch() {
return src(path.src.css, {base: srcPath + "assets/sass/"})
.pipe(plumber({
errorHandler : function(err) {
notify.onError({
title: "SCSS Error",
message: "Error: <%= error.message %>"
})(err);
this.emit('end');
}
}))
.pipe(sass({
includePaths: './node_modules/'
}))
.pipe(rename({
suffix: ".min",
extname: ".css"
}))
.pipe(dest(path.build.css))
.pipe(browserSync.reload({stream: true}));
}
function js() {
return src(path.src.js, {base: srcPath + 'assets/js/'})
.pipe(plumber({
errorHandler : function(err) {
notify.onError({
title: "JS Error",
message: "Error: <%= error.message %>"
})(err);
this.emit('end');
}
}))
.pipe(rigger())
.pipe(dest(path.build.js))
.pipe(uglify())
.pipe(rename({
suffix: ".min",
extname: ".js"
}))
.pipe(dest(path.build.js))
.pipe(browserSync.reload({stream: true}));
}
function jsWatch() {
return src(path.src.js, {base: srcPath + 'assets/js/'})
.pipe(plumber({
errorHandler : function(err) {
notify.onError({
title: "JS Error",
message: "Error: <%= error.message %>"
})(err);
this.emit('end');
}
}))
.pipe(dest(path.build.js))
.pipe(browserSync.reload({stream: true}));
}
function images() {
return src(path.src.images)
.pipe(imagemin([
imagemin.gifsicle({interlaced: true}),
imagemin.mozjpeg({quality: 95, progressive: true}),
imagemin.optipng({optimizationLevel: 5}),
imagemin.svgo({
plugins: [
{ removeViewBox: true },
{ cleanupIDs: false }
]
})
]))
.pipe(dest(path.build.images))
.pipe(browserSync.reload({stream: true}));
}
function fonts() {
return src(path.src.fonts)
.pipe(dest(path.build.fonts))
.pipe(browserSync.reload({stream: true}));
}
function clean() {
return del(path.clean);
}
function watchFiles() {
gulp.watch([path.watch.html], html);
gulp.watch([path.watch.css], cssWatch);
gulp.watch([path.watch.js], jsWatch);
gulp.watch([path.watch.images], images);
gulp.watch([path.watch.fonts], fonts);
}
const build = gulp.series(clean, gulp.parallel(html, css, js, images, fonts));
const watch = gulp.parallel(build, watchFiles, serve);
/* Exports Tasks */
exports.html = html;
exports.css = css;
exports.js = js;
exports.images = images;
exports.fonts = fonts;
exports.clean = clean;
exports.build = build;
exports.watch = watch;
exports.default = watch;