Testing 4.01.23 new features

.editorconfig

@@ -26,3 +26,8 @@ trim_trailing_whitespace = true
 # для всех файлов .md
 [*.md]
 trim_trailing_whitespace = false
+
+
+# правила для json & yml файлов
+[{*.json,*.yml}]
+indent_size = 2

gulpfile.babel.js

@@ -15,54 +15,93 @@
 //   *  Copyright (c) 2022 NИ
 //  --------------------------------------------------------------------------------
 
-'use strict';
+"use strict";
 
-import gulp from 'gulp';
-import './task-runners/notify';
+import gulp from "gulp";
+import yargs from "yargs";
+import "./task-runners/notify";
+import notify from "gulp-notify";
 
-const requireDir = require('require-dir'),
-  paths = {
-    html: {
-      source: './source/html/index.html',
-      build: ['./build/'],
-      watch: ['./source/index.html', './source/html/**/*.html'],
-    },
-    styles: {
-      source: ['./source/styles/main.scss', './source/styles/vendor.scss'],
-      build: './build/styles/',
-      watch: ['./source/styles/**/*.{scss,sass}'],
-    },
-    scripts: {
-      source: './source/js/main.js',
-      build: './build/js/',
-      watch: ['./source/js/**/*.js'],
-    },
-    images: {
-      source: ['./source/img/**/*.{jpg,jpeg,png,gif,tiff,svg}'],
-      build: './build/img/',
-      watch: './source/img/**/*.{jpg,jpeg,png,gif,svg,tiff}',
-    },
-    fonts: {
-      source: './source/fonts/**/*.{woff,woff2,ttf}',
-      build: './build/fonts/',
-      watch: './source/fonts/**/*.{woff,woff2,ttf}',
-    },
-  };
+const argv = yargs().argv;
+const production = !!argv.production;
 
-requireDir('./task-runners/');
+const paths = {
+  html: {
+    source: "./source/html/index.html",
+    build: ["./build/"],
+    watch: ["./source/index.html", "./source/html/**/*.html"],
+  },
+  styles: {
+    source: ["./source/styles/main.scss", "./source/styles/vendor.scss"],
+    build: "./build/styles/",
+    watch: ["./source/styles/**/*.{scss,sass}"],
+  },
+  scripts: {
+    source: "./source/js/main.js",
+    build: "./build/js/",
+    watch: ["./source/js/**/*.js"],
+  },
+  images: {
+    source: ["./source/img/**/*.{jpg,jpeg,png,gif,tiff,svg}"],
+    build: "./build/img/",
+    watch: "./source/img/**/*.{jpg,jpeg,png,gif,svg,tiff}",
+  },
+  fonts: {
+    source: "./source/fonts/**/*.{woff,woff2,ttf}",
+    build: "./build/fonts/",
+    watch: "./source/fonts/**/*.{woff,woff2,ttf}",
+  },
+};
 
-export { paths };
+// requireDir("./task-runners/");
 
-export const development = gulp.series(
-  'clean',
-  gulp.parallel(['html', 'styles', 'scripts', 'images', 'webp', 'fonts']),
-  gulp.parallel('server', 'say:hello'),
+// Конфиги для тасков
+const configs = {
+  production: production,
+  plumber: {
+    errorHandler: notify.onError(function (error) {
+      return {
+        title: "Возникла ошибка",
+        sound: false,
+        message: error.message,
+      };
+    }),
+  },
+  fileInclude: {
+    prefix: "@@",
+    basepath: "@file",
+  },
+};
+
+// -------------------------------------
+//   Импортируем все таски
+// -------------------------------------
+
+import "./task-runners/clean";
+import "./task-runners/fonts";
+import "./task-runners/html";
+import "./task-runners/images";
+import "./task-runners/scripts";
+import "./task-runners/styles";
+import "./task-runners/server";
+import "./task-runners/notify";
+
+gulp.task(
+  "default",
+  gulp.series(
+    "clean",
+    gulp.parallel("html", "styles", "scripts", "images", "fonts"),
+    gulp.parallel("server", "say:hello")
+  )
 );
 
-export const production = gulp.series(
-  'clean',
-  gulp.parallel(['html', 'styles', 'scripts', 'images', 'webp', 'fonts']),
-  'say:build',
+gulp.task(
+  "build",
+  gulp.series(
+    "clean",
+    gulp.parallel("html", "styles", "scripts", "images", "fonts"),
+    "say:build"
+  )
 );
 
-export default development;
+export { paths, configs };

package.json

@@ -21,7 +21,7 @@
   },
   "scripts": {
     "dev": "gulp",
-    "build": "gulp production --production",
+    "build": "gulp build --production",
     "build:html": "gulp html --production",
     "build:styles": "gulp styles --production",
     "build:scripts": "gulp scripts --production",
@@ -73,7 +73,6 @@
     "node-notifier": "^10.0.1",
     "postcss": "^8.4.18",
     "postcss-scss": "^4.0.5",
-    "require-dir": "^1.2.0",
     "sass": "^1.55.0",
     "stylelint": "^14.14.0",
     "stylelint-config-standard-scss": "^6.0.0",

source/html/header.html

@@ -1,3 +1,4 @@
 <header class="header-top">
   <p class="version_txt">Gulp task runner 0.1v beta</p>
-</header>
+  <p class="lorem">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Neque animi repellat, dolores reprehenderit cum assumenda voluptatum modi numquam sed reiciendis! Rerum debitis dolores vel aliquam at, ea nesciunt illo ipsa quae labore? Aspernatur minima a id dolorem fugiat nulla laboriosam provident sed? Ducimus odit aperiam exercitationem velit adipisci. Eveniet asperiores blanditiis veniam animi alias!</p>
+</header>

source/html/index.html

@@ -18,8 +18,8 @@
 
       @@include('footer.html')
     </main>
-      
+
       <script src="js/vendor.js"></script>
       <script src="js/main.js"></script>
   </body>
-</html>
+</html>

source/html/sections/first-display.html

@@ -16,4 +16,4 @@
 
     </div>
   </div>
-</section>
+</section>

source/js/main.js

@@ -1 +1 @@
-console.log('main.js -> loaded successfully');
+console.log("main.js -> loaded successfully");

source/styles/base/_header.scss

@@ -11,4 +11,11 @@
     text-align: center;
     color: #a4a4a4;
   }
+
+  .lorem {
+    @include font-size(1.24rem);
+    @include padding(20px 0 40px);
+
+    color: #fcfc;
+  }
 }

task-runners/html.js

@@ -2,50 +2,30 @@
 //    Таск-раннер для отслеживания html разметки
 //  -------------------------------------------------------------
 
-'use strict';
+"use strict";
 
-import { paths } from '../gulpfile.babel';
-import gulp from 'gulp';
-import include from 'gulp-file-include';
-import beautify from 'gulp-beautify';
-import gulpif from 'gulp-if';
-import replace from 'gulp-replace';
-import browsersync from 'browser-sync';
-import notify from 'gulp-notify';
-import plumber from 'gulp-plumber';
-import yargs from 'yargs';
+import { paths, configs } from "../gulpfile.babel";
+import gulp from "gulp";
+import include from "gulp-file-include";
+import beautify from "gulp-beautify";
+import gulpif from "gulp-if";
+import replace from "gulp-replace";
+import browsersync from "browser-sync";
+import plumber from "gulp-plumber";
 
-const argv = yargs.argv,
-  production = !!argv.production;
-
-gulp.task('html', () => {
+gulp.task("html", () => {
   return gulp
     .src(paths.html.source)
-    .pipe(
-      plumber({
-        errorHandler: notify.onError(function (error) {
-          return {
-            title: 'HTML include',
-            sound: false,
-            message: error.message,
-          };
-        }),
-      }),
-    )
-    .pipe(
-      include({
-        prefix: '@@',
-        basepath: '@file',
-      }),
-    )
+    .pipe(plumber(configs.plumber))
+    .pipe(include(configs.fileInclude))
     .pipe(
       beautify.html({
         indent_size: 2,
         preserve_newlines: false,
-      }),
+      })
     )
-    .pipe(gulpif(production, replace('.css', '.min.css')))
-    .pipe(gulpif(production, replace('.js', '.min.js')))
+    .pipe(gulpif(configs.production, replace(".css", ".min.css")))
+    .pipe(gulpif(configs.production, replace(".js", ".min.js")))
     .pipe(plumber.stop())
     .pipe(gulp.dest(paths.html.build))
     .pipe(browsersync.stream());

task-runners/images.js

@@ -2,31 +2,27 @@
 //    Таск-раннер для отслеживания, сжатия изображений
 //  -------------------------------------------------------------
 
-'use strict';
+"use strict";
 
-import { paths } from '../gulpfile.babel';
-import gulp from 'gulp';
-import gulpif from 'gulp-if';
-import imagemin from 'gulp-imagemin';
-import imageminPngquant from 'imagemin-pngquant';
-import imageminZopfli from 'imagemin-zopfli';
-import imageminMozjpeg from 'imagemin-mozjpeg';
-import imageminGiflossy from 'imagemin-giflossy';
-import newer from 'gulp-newer';
-import debug from 'gulp-debug';
-import browsersync from 'browser-sync';
-import yargs from 'yargs';
+import { paths, configs } from "../gulpfile.babel";
+import gulp from "gulp";
+import gulpif from "gulp-if";
+import imagemin from "gulp-imagemin";
+import imageminPngquant from "imagemin-pngquant";
+import imageminZopfli from "imagemin-zopfli";
+import imageminMozjpeg from "imagemin-mozjpeg";
+import imageminGiflossy from "imagemin-giflossy";
+import newer from "gulp-newer";
+import debug from "gulp-debug";
+import browsersync from "browser-sync";
 
-const argv = yargs.argv,
-  production = !!argv.production;
-
-gulp.task('images', () => {
+gulp.task("images", () => {
   return gulp
     .src(paths.images.source)
     .pipe(newer(paths.images.build))
     .pipe(
       gulpif(
-        production,
+        configs.production,
         imagemin([
           imageminGiflossy({
             optimizationLevel: 3,
@@ -56,14 +52,14 @@ gulp.task('images', () => {
               { collapseGroups: true },
             ],
           }),
-        ]),
-      ),
+        ])
+      )
     )
     .pipe(gulp.dest(paths.images.build))
     .pipe(
       debug({
-        title: 'Images',
-      }),
+        title: "Images",
+      })
     )
     .pipe(browsersync.stream());
 });