Use webpack for bundling

.env

@@ -1,2 +1,2 @@
 PHP_IMAGE=homepage-php
-NODE_IMAGE=node:9.11
+NODE_IMAGE=node:9

Makefile

@@ -9,6 +9,10 @@ build-site:
 
 build: build-site build-assets
 
+build-prod:
+	./tools/sculpin generate --clean --env=prod --no-interaction
+	./tools/npm run build-prod
+
 watch: build-assets
 	./tools/sculpin generate \
 		--env=dev \
@@ -17,9 +21,7 @@ watch: build-assets
 		--port=8000 \
 		--no-interaction
 
-deploy:
+deploy: build-prod
-	./tools/sculpin generate --clean --env=prod --no-interaction
-	./tools/npm run build-prod
 	./tools/dep deploy production
 
 rollback:

package.json

@@ -1,18 +1,21 @@
 {
   "name": "homepage",
   "author": "Anton Vakhrushev",
-  "license": "MIT",
+  "license": "",
   "version": "1.0.0",
   "description": "Homepage",
   "devDependencies": {
-    "gulp": "^3.9.1",
+    "css-loader": "^0.28.11",
-    "gulp-autoprefixer": "^3.1.1",
+    "node-sass": "^4.9.0",
-    "gulp-concat": "^2.6.1",
+    "prettier": "^1.12.1",
-    "gulp-sass": "^3.1.0"
+    "sass-loader": "^7.0.1",
+    "style-loader": "^0.21.0",
+    "webpack": "^4.5.0",
+    "webpack-cli": "^2.0.14"
   },
   "scripts": {
-    "build": "BUILD_ENV=dev gulp build",
+    "watch": "",
-    "watch": "BUILD_ENV=dev gulp build:watch",
+    "build": "webpack --config webpack.config.js --progress",
-    "build-prod": "BUILD_ENV=prod gulp build"
+    "build-prod": "webpack --config webpack.config.js --env.production"
   }
 }

source/_assets/about-me.js

@@ -1,43 +0,0 @@
-(function() {
-    'use strict';
-
-    var notes = [
-        'Любимый фильм "Три идиота".',
-        'Люблю кататься на велосипеде.',
-        'Люблю читать фантастические книги.',
-        'Люблю шоколад.',
-        'На день рождения ко мне можно прийти без подарка.',
-        'Не люблю пьяных людей.',
-        'Предпочитаю ходить в кино на 2D-сеансы.',
-        'Проехал на велосипеде 200 километров за день.',
-        'Работаю программистом.',
-        'Хотел бы побывать в горах.',
-    ];
-
-    function selectRandomNote() {
-        return notes[Math.floor(Math.random() * notes.length)];
-    }
-
-    function updateNode() {
-        var el = document.getElementById('about-me-note');
-        if (el) {
-            el.innerHTML = selectRandomNote();        
-        }
-    }
-
-    function onKnowBetter(event) {
-        event.preventDefault();
-        if (window.yaCounter41913764) {
-            window.yaCounter41913764.hit(location.href);
-        }
-        updateNode();
-    }
-
-    window.addEventListener('DOMContentLoaded', updateNode);
-
-    var el = document.getElementById('know-better');
-    if (el) {
-        el.addEventListener('click', onKnowBetter);
-    }
-
-}());

source/_assets/about_me/index.js

@@ -0,0 +1,40 @@
+import './style.scss'
+
+const notes = [
+    'Любимый фильм "Три идиота".',
+    'Люблю кататься на велосипеде.',
+    'Люблю читать фантастические книги.',
+    'Люблю шоколад.',
+    'На день рождения ко мне можно прийти без подарка.',
+    'Не люблю пьяных людей.',
+    'Предпочитаю ходить в кино на 2D-сеансы.',
+    'Проехал на велосипеде 200 километров за день.',
+    'Работаю программистом.',
+    'Хотел бы побывать в горах.',
+];
+
+function selectRandomNote() {
+    return notes[Math.floor(Math.random() * notes.length)];
+}
+
+function updateNode() {
+    const el = document.getElementById('about-me-note');
+    if (el) {
+        el.innerHTML = selectRandomNote();
+    }
+}
+
+function onKnowBetter(event) {
+    event.preventDefault();
+    if (window.yaCounter41913764) {
+        window.yaCounter41913764.hit(location.href);
+    }
+    updateNode();
+}
+
+window.addEventListener('DOMContentLoaded', updateNode);
+
+const el = document.getElementById('know-better');
+if (el) {
+    el.addEventListener('click', onKnowBetter);
+}

source/_assets/layout_default/style.scss

@@ -1,6 +1,6 @@
 html, body {
     font-size: 18px;
-    font-family: 'PT Serif', Serif;
+    font-family: 'PT Serif', serif;
     padding: 0;
     margin: 0;
 

source/_layouts/default.html.twig

@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="https://fonts.googleapis.com/css?family=PT+Serif:400,700&amp;subset=cyrillic" rel="stylesheet">
-  <link rel="stylesheet" type="text/css" href="/app.css?v={{ date().timestamp }}">
   <title>
     {% if page.title is defined %}
       {{ page.title }} - {{ site.title }}
@@ -14,10 +13,18 @@
   </title>
 </head>
 <body>
+
   <main class="content">
     {% block content %}{% endblock %}
   </main>
+
   {% include 'counters.twig' %}
-  <script src="/app.js?v={{ date().timestamp }}"></script>
+
+  <script src="/static/layout_default.js?v={{ date().timestamp }}"></script>
+
+  {% block js %}
+      {# extra js scripts here #}
+  {% endblock %}
+
 </body>
 </html>

source/about/me.html.twig

@@ -3,6 +3,10 @@ layout: default
 title: Обо мне
 ---
 
+{% block js %}
+  <script src="/static/about_me.js"></script>
+{% endblock %}
+
 {% block content %}
 
   <section class="about-me">

webpack.config.js

@@ -0,0 +1,29 @@
+const path = require('path');
+
+
+module.exports = income_env => {
+
+    const env = income_env || {};
+    const is_prod = !!env.production;
+    const dist_dir = is_prod ? 'output_prod' : 'output_dev';
+
+    return {
+        mode: is_prod ? 'production' : 'development',
+        entry: {
+            layout_default: './source/_assets/layout_default/style.scss',
+            about_me: './source/_assets/about_me/index.js',
+        },
+        output: {
+            filename: '[name].js',
+            path: path.resolve(__dirname, `${dist_dir}/static`),
+        },
+        module: {
+            rules: [
+                {
+                    test: /\.scss$/,
+                    use: ['style-loader', 'css-loader', 'sass-loader'],
+                }
+            ]
+        }
+    }
+};