Reconfigure add structure and add Gulp

.gitignore

@@ -1,3 +1,4 @@
 /ansible/galaxy.roles/
 /output_*
+/node_modules/
 /vendor/

Makefile

@@ -1,6 +1,13 @@
+build:
+	rm -rf output_dev/*
+	vendor/bin/sculpin generate --env=dev --no-interaction
+	BUILD_ENV=dev node_modules/.bin/gulp build
+
 deploy:
-	vendor/bin/sculpin generate --env=prod
-	ansible-playbook --inventory "ansible/hosts_prod" --user=deployer ansible/deploy.yml
+	rm -rf output_prod/*
+	vendor/bin/sculpin generate --env=prod --no-interaction
+	BUILD_ENV=prod node_modules/.bin/gulp build
+	# ansible-playbook --inventory "ansible/hosts_prod" --user=deployer ansible/deploy.yml
 
 rollback:
 	ansible-playbook --inventory "ansible/hosts_prod" --user=deployer ansible/rollback.yml

app/config/sculpin_kernel.yml

@@ -0,0 +1,3 @@
+sculpin:
+  ignore:
+    - _assets/

gulpfile.js

@@ -0,0 +1,31 @@
+const gulp = require('gulp');
+const concat = require('gulp-concat');
+const sass = require('gulp-sass');
+const autoprefixer = require('gulp-autoprefixer');
+
+const ENV = process.env.BUILD_ENV || 'dev';
+
+const SASS_SOURCE_PATH = './source/_assets/**/*.scss';
+const SASS_DEST_PATH = `./output_${ENV}`;
+const SASS_FILE_NAME = 'app.css';
+
+const SASS_OPTIONS = {
+  outputStyle: ENV === 'prod' ? 'compressed' : 'expanded',
+};
+
+const AUTOPREFIX_OPTIONS = {
+  browsers: ['last 2 versions'],
+};
+
+gulp.task('build', function () {
+  gulp.src(SASS_SOURCE_PATH)
+    .pipe(sass(SASS_OPTIONS).on('error', sass.logError))
+    .pipe(autoprefixer(AUTOPREFIX_OPTIONS))
+    .pipe(concat(SASS_FILE_NAME))
+    .pipe(gulp.dest(SASS_DEST_PATH))
+  ;
+});
+
+// gulp.task('build:watch', function () {
+//   gulp.watch(SASS_SOURCE_PATH, ['build']);
+// });

package.json

@@ -0,0 +1,13 @@
+{
+  "name": "homepage",
+  "author": "Anton Vakhrushev",
+  "license": "MIT",
+  "version": "1.0.0",
+  "description": "Homepage",
+  "devDependencies": {
+    "gulp": "^3.9.1",
+    "gulp-autoprefixer": "^3.1.1",
+    "gulp-concat": "^2.6.1",
+    "gulp-sass": "^3.1.0"
+  }
+}

source/_assets/about-me.scss

@@ -0,0 +1,29 @@
+.about-me {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+
+
+    &__note {
+        text-align: center;
+        font-size: 120%;
+        max-width: 400px;
+        min-height: 3em;
+    }
+
+    &__links {
+        padding: 0;
+        margin-top: 4em;
+        list-style: none;
+        text-align: center;
+    }
+
+    &__link {
+        display: inline-block;
+    }
+
+    &__link + &__link {
+        margin-left: 1em;
+    }
+}

source/_layouts/default.html.twig

@@ -4,8 +4,7 @@
   <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&subset=cyrillic" rel="stylesheet">
-  <link rel="stylesheet" type="text/css" href="/styles/app.css?v={{ date().timestamp }}">
-  <link rel="stylesheet" type="text/css" href="/styles/about-me.css?v={{ date().timestamp }}">
+  <link rel="stylesheet" type="text/css" href="/app.css?v={{ date().timestamp }}">
   <title>
     {% if page.title is defined %}
       {{ page.title }} - {{ site.title }}
@@ -19,5 +18,6 @@
     {% block content %}{% endblock %}
   </main>
   {% include 'counters.twig' %}
+  <script src="/static/app.js?v={{ date().timestamp }}"></script>
 </body>
 </html>

source/styles/about-me.css

@@ -1,28 +0,0 @@
-.about-me {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100vh;
-}
-
-.about-me__note {
-    text-align: center;
-    font-size: 120%;
-    max-width: 400px;
-    min-height: 3em;
-}
-
-.about-me__links {
-    padding: 0;
-    margin-top: 4em;
-    list-style: none;
-    text-align: center;
-}
-
-.about-me__link {
-    display: inline-block;
-}
-
-.about-me__link + .about-me__link {
-    margin-left: 1em;
-}