Update

app/ht.access

@@ -4,7 +4,8 @@
 AddType application/vnd.ms-fontobject .eot
 AddType application/x-font-ttf .ttf
 AddType application/x-font-opentype .otf
-AddType application/x-font-woff .woff
+AddType application/font-woff .woff
+AddType application/font-woff2 .woff2
 AddType image/svg+xml .svg
 
 # Compress compressible fonts
@@ -24,7 +25,8 @@ ExpiresByType image/svg+xml "access plus 2592000 seconds"
 ExpiresByType application/vnd.ms-fontobject "access plus 2592000 seconds"
 ExpiresByType application/x-font-ttf "access plus 2592000 seconds"
 ExpiresByType application/x-font-opentype "access plus 2592000 seconds"
-ExpiresByType application/x-font-woff "access plus 2592000 seconds"
+ExpiresByType application/font-woff "access plus 2592000 seconds"
+ExpiresByType application/font-woff2 "access plus 2592000 seconds"
 ExpiresByType image/svg+xml "access plus 2592000 seconds"
 
 # Cache other content types (Flash, CSS, JS, HTML, XML)

app/scss/_libs.scss

@@ -1,3 +1,3 @@
 @import "../libs/bootstrap/scss/bootstrap-reboot.scss";
 @import "../libs/bootstrap/scss/bootstrap-grid.scss";
-@import "../libs/bootstrap/scss/utilities/_sizing.scss";
+@import "../libs/bootstrap/scss/_utilities.scss";

app/scss/main.scss

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 @import "vars";
 @import "fonts";
 @import "libs";

gulpfile.js

@@ -1,128 +1,96 @@
-var syntax         = 'sass', // Syntax: sass or scss;
-		gulpVersion    = '4'; // Gulp version: 3 or 4
-		gmWatch        = false; // ON/OFF GraphicsMagick watching "img/_src" folder (true/false). Linux install gm: sudo apt update; sudo apt install graphicsmagick
-
-var gulp          = require('gulp')
-		sass          =  require('gulp-sass')(require('sass')),
-		browserSync   = require('browser-sync'),
-		concat        = require('gulp-concat'),
-		uglify        = require('gulp-uglify-es').default,
-		cleancss      = require('gulp-clean-css'),
-		rename        = require('gulp-rename'),
-		autoprefixer  = require('gulp-autoprefixer'),
-		notify        = require('gulp-notify'),
-		rsync         = require('gulp-rsync'),
-		imageResize   = require('gulp-image-resize'),
-		clean         = require('gulp-clean');
-
-// Local Server
-gulp.task('browser-sync', function() {
-	browserSync({
+let syntax     = 'sass', // Syntax - .sass or .scss
+		fileswatch = 'html,htm,txt,json,md,woff2' // List of files extensions for watching & hard reload
+
+import pkg from 'gulp'
+const { src, dest, parallel, series, watch } = pkg
+
+import browserSync   from 'browser-sync'
+import gulpSass      from 'gulp-sass'
+import * as dartSass from 'sass'
+const  sass          = gulpSass(dartSass)
+import postCss       from 'gulp-postcss'
+import cssnano       from 'cssnano'
+import concat        from 'gulp-concat'
+import uglify        from 'gulp-uglify'
+import autoprefixer  from 'autoprefixer'
+import rsyncModule   from 'gulp-rsync'
+import imageResize   from 'gulp-image-resize'
+import {deleteAsync} from 'del'
+
+function browsersync() {
+	browserSync.init({
 		server: {
-			baseDir: 'app'
+			baseDir: 'app/'
 		},
+		ghostMode: { clicks: false },
 		notify: false,
-		// open: false,
-		// online: false, // Work Offline Without Internet Connection
-		// tunnel: true, tunnel: "projectname", // Demonstration page: http://projectname.localtunnel.me
+		online: true,
+		// tunnel: 'yousutename', // Attempt to use the URL https://yousutename.loca.lt
 	})
-});
-
-// Sass|Scss Styles
-gulp.task('styles', function() {
-	return gulp.src('app/'+syntax+'/**/*.'+syntax+'')
-	.pipe(sass({ outputStyle: 'expanded' }).on("error", notify.onError()))
-	.pipe(rename({ suffix: '.min', prefix : '' }))
-	.pipe(autoprefixer(['last 15 versions']))
-	.pipe(cleancss( {level: { 1: { specialComments: 0 } } })) // Opt., comment out when debugging
-	.pipe(gulp.dest('app/css'))
-	.pipe(browserSync.stream())
-});
+}
 
-// JS
-gulp.task('scripts', function() {
-	return gulp.src([
+function scripts() {
+	return src([
 		'app/libs/jquery/dist/jquery.min.js',
 		'app/js/common.js', // Always at the end
 		])
 	.pipe(concat('scripts.min.js'))
-	.pipe(uglify({ output: { comments: false } }))
-	.pipe(gulp.dest('app/js'))
+	// .pipe(uglify()) // Mifify js (opt.)
+	.pipe(dest('app/js'))
 	.pipe(browserSync.stream())
-});
-
-// Images @x1 & @x2 + Compression | Required graphicsmagick (sudo apt update; sudo apt install graphicsmagick)
-gulp.task('img1x', function() {
-	return gulp.src('app/img/_src/**/*.*')
+}
+
+function styles() {
+	return src([`app/${syntax}/**/*.${syntax}`])
+		.pipe(sass({ 'include css': true }))
+		.pipe(postCss([
+			autoprefixer({ grid: 'autoplace' }),
+			cssnano({ preset: ['default', { discardComments: { removeAll: true } }] })
+		]))
+		.pipe(concat('main.min.css'))
+		.pipe(dest('app/css'))
+		.pipe(browserSync.stream())
+}
+
+function img1x() {
+	return src('app/img/_src/**/*.*')
 	.pipe(imageResize({ width: '50%' }))
-	.pipe(gulp.dest('app/img/@1x/'))
-});
-gulp.task('img2x', function() {
-	return gulp.src('app/img/_src/**/*.*')
+	.pipe(dest('app/img/@1x/'))
+}
+function img2x() {
+	return src('app/img/_src/**/*.*')
 	.pipe(imageResize({ width: '100%' }))
-	.pipe(gulp.dest('app/img/@2x/'))
-});
-
-// Clean @*x IMG's
-gulp.task('cleanimg', function() {
-	return gulp.src('app/img/@*', {allowEmpty: true}).pipe(clean())
-});
-
-// HTML Live Reload
-gulp.task('code', function() {
-	return gulp.src('app/*.html')
-	.pipe(browserSync.reload({ stream: true }))
-});
-
-// Deploy
-gulp.task('rsync', function() {
-	return gulp.src('app/') // Без звёздочек!
-	.pipe(rsync({
-		root: 'app/',
-		hostname: '[email protected]',
-		destination: 'yousite/public_html/',
-		clean: true, // Mirror copy with file deletion
-		// include: ['*.htaccess'], // Includes files to deploy
-		exclude: ['**/Thumbs.db', '**/*.DS_Store'], // Excludes files from deploy
-		recursive: true,
-		archive: true,
-		silent: false,
-		compress: true
-	}))
-});
-
-// If Gulp Version 3
-if (gulpVersion == 3) {
-
-	// Img Processing Task for Gulp 3
-	gulp.task('img', ['img1x', 'img2x']);
-
-	var taskArr = ['styles', 'scripts', 'browser-sync'];
-	gmWatch && taskArr.unshift('img');
-
-	gulp.task('watch', taskArr, function() {
-		gulp.watch('app/'+syntax+'/**/*.'+syntax+'', ['styles']);
-		gulp.watch(['libs/**/*.js', 'app/js/common.js'], ['scripts']);
-		gulp.watch('app/*.html', ['code']);
-		gmWatch && gulp.watch('app/img/_src/**/*', ['img']);
-	});
-	gulp.task('default', ['watch']);
-
-};
-
-// If Gulp Version 4
-if (gulpVersion == 4) {
-
-	// Img Processing Task for Gulp 4
-	gulp.task('img', gulp.parallel('img1x', 'img2x'));
-
-	gulp.task('watch', function() {
-		gulp.watch('app/'+syntax+'/**/*.'+syntax+'', gulp.parallel('styles'));
-		gulp.watch(['libs/**/*.js', 'app/js/common.js'], gulp.parallel('scripts'));
-		gulp.watch('app/*.html', gulp.parallel('code'));
-		gmWatch && gulp.watch('app/img/_src/**/*', gulp.parallel('img')); // GraphicsMagick watching image sources if allowed.
-	});
-	gmWatch ? gulp.task('default', gulp.parallel('img', 'styles', 'scripts', 'browser-sync', 'watch')) 
-					: gulp.task('default', gulp.parallel('styles', 'scripts', 'browser-sync', 'watch'));
-
-};
+	.pipe(dest('app/img/@2x/'))
+}
+async function cleanimg() {
+	await deleteAsync('app/img/@*', { force: true })
+}
+
+function rsync() {
+	return src('app/') // Без звёздочек!
+		.pipe(rsyncModule({
+			root: 'app/',
+			hostname: '[email protected]',
+			destination: 'yousite/public_html/',
+			clean: true, // Mirror copy with file deletion
+			// include: ['*.htaccess'], // Includes files to deploy
+			exclude: ['**/Thumbs.db', '**/*.DS_Store'], // Excludes files from deploy
+			recursive: true,
+			archive: true,
+			silent: false,
+			compress: true
+		}))
+}
+
+function startwatch() {
+	watch([`app/${syntax}/**/*.${syntax}`], { usePolling: true }, styles)
+	watch(['app/js/common.js', 'libs/**/*.js'], { usePolling: true }, scripts)
+	watch([`app/**/*.{${fileswatch}}`], { usePolling: true }).on('change', browserSync.reload)
+	watch('app/img/_src/**/*', { usePolling: true }, img)
+}
+
+export { scripts, styles, rsync, cleanimg }
+export let img = parallel(img1x, img2x)
+export let assets = series(img, scripts, styles)
+
+export default series(img, scripts, styles, parallel(browsersync, startwatch))

package.json

@@ -1,26 +1,26 @@
 {
-	"name": "optimizedhtml",
-	"version": "4.0.0",
-	"description": "OptimizedHTML 4 - Start HTML Template",
-	"main": "index.js",
-	"scripts": {
-		"test": "echo \"Error: no test specified\" && exit 1"
-	},
-	"author": "WebDesign Master",
-	"license": "ISC",
-	"devDependencies": {
-		"browser-sync": "^2.29.3",
-		"gulp": "^4.0.2",
-		"gulp-autoprefixer": "^8.0.0",
-		"gulp-clean": "^0.4.0",
-		"gulp-clean-css": "^4.3.0",
-		"gulp-concat": "^2.6.1",
-		"gulp-image-resize": "^0.13.1",
-		"gulp-notify": "^4.0.0",
-		"gulp-rename": "^2.0.0",
-		"gulp-rsync": "0.1.0",
-		"gulp-sass": "^5.1.0",
-		"gulp-uglify-es": "^3.0.0",
-		"sass": "^1.66.1"
-	}
+  "name": "optimizedhtml",
+  "version": "4.1.1",
+  "description": "OptimizedHTML 4 - Start HTML Template",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "WebDesign Master",
+  "type": "module",
+  "license": "ISC",
+  "devDependencies": {
+    "autoprefixer": "^10.4.16",
+    "browser-sync": "^2.29.3",
+    "cssnano": "^6.0.1",
+    "del": "^7.1.0",
+    "gulp": "^4.0.2",
+    "gulp-concat": "^2.6.1",
+    "gulp-image-resize": "^0.13.1",
+    "gulp-postcss": "^9.0.1",
+    "gulp-rsync": "0.1.0",
+    "gulp-sass": "^5.1.0",
+    "gulp-uglify": "^3.0.2",
+    "sass": "^1.69.5"
+  }
 }