Merge pull request #21 from webtime-studio/update/dependecies-update

tinakuzmenko · web-flow · commit 61a9b70fda26 · 2021-04-04T22:28:42.000+02:00
diff --git a/README.md b/README.md
@@ -1,14 +1,14 @@
 <h1 align="center">Create HTML boilerplate</h1>
 <p>
-  <img alt="Version" src="https://img.shields.io/badge/version-1.3.1-green.svg?cacheSeconds=2592000" />
-  <img src="https://img.shields.io/badge/node-%5E10.18-green.svg" />
+  <img alt="Версия проекта" src="https://img.shields.io/badge/version-1.4.0-green.svg?cacheSeconds=2592000" />
+  <img alt="Минимально необходимая версия NodeJS" src="https://img.shields.io/badge/node-%5E10.18-green.svg" />
 </p>
 
 <p>Привет! Спасибо за то что используете наш Create HTML boilerplate.</p>
 <p>
   Данная сборка вдохновлена проектом с хабра и многими часами вёрстки и
   разработки. Здесь специально нет ничего лишнего и только набор базовых
-  файлов, чтобы было понятно как построить базовую структуру проекта
+  файлов, чтобы было понятно как построить базовую структуру.
 </p>
 <ul>
   <li>HTML</li>
@@ -48,7 +48,7 @@ myApp
 │   │   └── logo.svg                 - лого проекта
 │   │
 │   ├── js                           - скрипты сайта
-│   │   └── index.js                 - точка входа для скриптов
+│   │   ├── index.js                 - точка входа для скриптов
 │   │   └── script.js                - пример импортируемого модуля
 │   │
 │   ├── root                         - файлы, которые будут лежать в корне проекта
@@ -71,7 +71,9 @@ myApp
 │       └── normalize-css/           - нормализация стилей по умолчанию (https://necolas.github.io/normalize.css/)
 │           └── normalize.min.css    - минифицированный файл
 │
-├── webpack                          - папка для конфигураций webpack 
+├── webpack                          - папка для конфигураций webpack
+│   ├── helpers                      - папка с вспомоготельными функциями  
+│   │   └── generateHtmlPlugins.js   - генерация настроек для шаблонов 
 │   └── webpack.config.js            - конфиг для webpack
 │
 ├── .editorconfig                    - настройки для редактора кода
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-html-boilerplate",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "create-html-boilerplate",
   "scripts": {
     "stylelint": "stylelint \"source/scss/**/*.(scss|css)\"",
@@ -11,44 +11,44 @@
     "start": "webpack-dev-server --config webpack/webpack.config.js --open"
   },
   "dependencies": {
-    "concurrently": "^5.3.0",
+    "concurrently": "^6.0.0",
     "picturefill": "^3.0.3"
   },
   "devDependencies": {
-    "autoprefixer": "^10.1.0",
+    "autoprefixer": "^10.2.5",
     "babel-loader": "^8.2.2",
     "clean-webpack-plugin": "^3.0.0",
     "copy-webpack-plugin": "^6.4.1",
     "css-loader": "^4.3.0",
-    "eslint": "^7.16.0",
+    "eslint": "^7.23.0",
     "eslint-config-airbnb-base": "^14.2.1",
-    "eslint-config-prettier": "^7.1.0",
+    "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-prettier": "^3.3.0",
-    "html-webpack-plugin": "^4.5.0",
+    "eslint-plugin-prettier": "^3.3.1",
+    "html-webpack-plugin": "^4.5.2",
     "imagemin-webp-webpack-plugin": "^3.3.3",
     "imagemin-webpack-plugin": "^2.4.2",
-    "mini-css-extract-plugin": "^1.3.3",
+    "mini-css-extract-plugin": "^1.4.0",
     "node-sass": "^4.14.1",
     "optimize-css-assets-webpack-plugin": "^5.0.4",
-    "postcss-loader": "^4.1.0",
-    "postcss": "^8.2.1",
+    "postcss": "^8.2.9",
+    "postcss-loader": "^4.2.0",
     "preload-webpack-plugin": "^3.0.0-beta.4",
     "prettier": "^2.2.1",
     "raw-loader": "^4.0.2",
-    "sass-loader": "^10.1.0",
-    "stylelint": "^13.8.0",
+    "sass-loader": "^10.1.1",
+    "stylelint": "^13.12.0",
     "stylelint-config-prettier": "^8.0.2",
     "stylelint-config-recommended-scss": "^4.2.0",
-    "stylelint-config-standard": "^20.0.0",
-    "stylelint-prettier": "^1.1.2",
-    "stylelint-scss": "^3.18.0",
-    "svg-sprite-loader": "^5.2.1",
-    "svgo": "^1.3.2",
-    "svgo-loader": "^2.2.1",
+    "stylelint-config-standard": "^21.0.0",
+    "stylelint-prettier": "^1.2.0",
+    "stylelint-scss": "^3.19.0",
+    "svg-sprite-loader": "^6.0.2",
+    "svgo": "^2.3.0",
+    "svgo-loader": "^3.0.0",
     "terser-webpack-plugin": "^4.2.3",
-    "webpack": "^4.44.2",
+    "webpack": "^4.46.0",
     "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.0"
+    "webpack-dev-server": "^3.11.2"
   }
 }
diff --git a/source/html/includes/common/header.html b/source/html/includes/common/header.html
@@ -1,7 +1,7 @@
 <header class="header">
   <nav class="nav container">
     <a href="/" class="nav__logo">
-      <img src="/img/logo.svg" />
+      <img src="/img/logo.svg" alt="Логотип Create HTML boilerplate"/>
     </a>
   </nav>
 </header>
diff --git a/source/html/includes/index/hero.html b/source/html/includes/index/hero.html
@@ -1,5 +1,7 @@
 <section class="container">
-  <h1 align="center">Create HTML boilerplate</h1>
+  <h1 align="center">
+    Create HTML boilerplate v<%= version %>
+  </h1>
   <p>Привет! Спасибо за то что используете наш Create HTML boilerplate.</p>
   <p>
     Данная сборка вдохновлена проектом с хабра и многими часами вёрстки и
diff --git a/source/html/views/index.html b/source/html/views/index.html
@@ -1,28 +1,30 @@
 <!DOCTYPE html>
 <html lang="ru">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="format-detection" content="telephone=no" />
-    <meta name="description" content="HTML5 webpack boilerplate" />
-    <title>HTML5 webpack boilerplate</title>
-    <link rel="stylesheet" href="/vendors/normalize-css/normalize.min.css" />
-    <script>
-      if(!window.HTMLPictureElement) {
-        document.createElement("picture");
-      };
-    </script>
-  </head>
-  <body>
-    <!--header.html-->
-    <%= _.template(require('../includes/common/header.html').default)({}) %>
-    <main>
-      <!--index/hero.html-->
-      <%= _.template(require('../includes/index/hero.html').default)({}) %>
-      <!--index/structure.html-->
-      <%= _.template(require('../includes/index/structure.html').default)({}) %>
-    </main>
-    <!--footer.html-->
-    <%= _.template(require('../includes/common/footer.html').default)({}) %>
-  </body>
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="format-detection" content="telephone=no" />
+  <meta name="description" content="HTML5 webpack boilerplate" />
+  <title>HTML5 webpack boilerplate</title>
+  <link rel="stylesheet" href="/vendors/normalize-css/normalize.min.css" />
+  <script>
+    if (!window.HTMLPictureElement) {
+      document.createElement('picture');
+    }
+  </script>
+</head>
+<body>
+<!--header.html-->
+<%= _.template(require('../includes/common/header.html').default)({}) %>
+<main>
+  <!--index/hero.html-->
+  <%= _.template(require('../includes/index/hero.html').default)({
+    version: htmlWebpackPlugin.options.custom.version,
+  }) %>
+  <!--index/structure.html-->
+  <%= _.template(require('../includes/index/structure.html').default)({}) %>
+</main>
+<!--footer.html-->
+<%= _.template(require('../includes/common/footer.html').default)({}) %>
+</body>
 </html>
diff --git a/webpack/helpers/generateHtmlPlugins.js b/webpack/helpers/generateHtmlPlugins.js
@@ -0,0 +1,38 @@
+const fs = require('fs');
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+/**
+ * Функция принимает конфиг с путём для шаблонов страниц templatesPath
+ * и опциями, которые можно передать в эти шаблоны.
+ * Возвращает массив HtmlWebpackPlugin сгенерированные для
+ * каждого html файла найденного в templatesPath.
+ *
+ * @param templatesPath
+ * @param options
+ * @returns {HtmlWebpackPlugin[]}
+ */
+const generateHtmlPlugins = ({ templatesPath, options = {} }) => {
+  const templateFiles = fs.readdirSync(path.resolve(__dirname, templatesPath));
+  const htmlFiles = templateFiles.filter(templateFile => {
+    const parts = templateFile.split('.');
+    return parts[1] === 'html';
+  });
+
+  return htmlFiles.map(htmlFile => {
+    const [name, extension] = htmlFile.split('.');
+
+    return new HtmlWebpackPlugin({
+      title: options.title || 'Create HTML Boilerplate',
+      filename: `${name}.html`,
+      template: path.resolve(
+        __dirname,
+        `${templatesPath}/${name}.${extension}`,
+      ),
+      inject: true,
+      custom: options,
+    });
+  });
+};
+
+module.exports = generateHtmlPlugins;
diff --git a/webpack/webpack.config.js b/webpack/webpack.config.js
@@ -1,9 +1,6 @@
 const path = require('path');
-const fs = require('fs');
-
 const webpack = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const ImageminPlugin = require('imagemin-webpack-plugin').default;
@@ -12,35 +9,52 @@ const TerserPlugin = require('terser-webpack-plugin');
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const PreloadWebpackPlugin = require('preload-webpack-plugin');
 const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
+const generateHtmlPlugins = require('./helpers/generateHtmlPlugins');
 
+/**
+ * Получает root директорию проекта.
+ * @type {string}
+ */
+const projectRootDir = process.cwd();
+/**
+ * Текущая версия проекта из package.json
+ * @type {string}
+ */
+const version = require('../package.json').version;
+/**
+ * Кастомный title для сайта
+ * @type {string}
+ */
+const title = 'Create HTML Boilerplate';
+/**
+ * Директория с шаблонами
+ * @type {string}
+ */
+const templatesPath = path.join(projectRootDir, 'source', 'html', 'views');
+/**
+ * Базовый конфиг для сайта
+ * templatesPath – путь для HTML шаблонов (обязательный параметр)
+ * options – любые данные которые необходимы в шаблоне (опциональный параметр)
+ * @type {{templatesPath: string, options: {[key]: string | number | any }}}
+ */
+const config = {
+  templatesPath,
+  options: {
+    version,
+    title,
+  },
+};
+/**
+ * Определяет в каком режиме работает сборка – девелопмент или продакшн.
+ * @type {boolean}
+ */
 const isProd = process.argv.indexOf('-p') !== -1;
-
-function generateHtmlPlugins(templateDir) {
-  const templateFiles = fs.readdirSync(path.resolve(__dirname, templateDir));
-  const htmlFiles = templateFiles.filter(templateFile => {
-    const parts = templateFile.split('.');
-    return parts[1] === 'html';
-  });
-
-  return htmlFiles.map(htmlFile => {
-    const parts = htmlFile.split('.');
-    const name = parts[0];
-    const extension = parts[1];
-
-    return new HtmlWebpackPlugin({
-      filename: `${name}.html`,
-      template: path.resolve(__dirname, `${templateDir}/${name}.${extension}`),
-      inject: true,
-    });
-  });
-}
-
-const htmlPlugins = generateHtmlPlugins('../source/html/views');
+const htmlPlugins = generateHtmlPlugins(config);
 
 module.exports = {
   resolve: {
     alias: {
-      source: '../source',
+      source: path.join('..', 'source'),
     },
   },
   mode: isProd ? 'production' : 'development',
@@ -51,7 +65,7 @@ module.exports = {
   },
   devtool: 'inline-source-map',
   devServer: {
-    contentBase: path.join(__dirname, 'source/'),
+    contentBase: path.join(projectRootDir, 'source/'),
     port: 9001,
     hot: true,
     compress: true,
@@ -104,9 +118,6 @@ module.exports = {
     new MiniCssExtractPlugin({
       filename: 'css/[name].min.css',
     }),
-    new HtmlWebpackPlugin({
-      template: 'source/html/views/index.html',
-    }),
     new PreloadWebpackPlugin({
       rel: 'preload',
       include: 'allChunks', // or 'initial', or 'allAssets'
