Commit 2d8eedef authored by Evaryont's avatar Evaryont

Introduce webpack for assest compilation

parent b72ad5ff
---
extends: standard
env:
browser: true
node: false
rules:
semi:
- warn
- always
quotes: warn
space-before-function-paren:
- error
- anonymous: "always"
named: "never"
# plugins:
# - foo
...@@ -15,3 +15,6 @@ ...@@ -15,3 +15,6 @@
/lighthouse-results.html /lighthouse-results.html
source/calendar.svg source/calendar.svg
node_modules/
yarn-error.log
...@@ -15,9 +15,9 @@ require_relative 'lib/helpers/reviews.rb' ...@@ -15,9 +15,9 @@ require_relative 'lib/helpers/reviews.rb'
require_relative 'lib/tag_cloud.rb' require_relative 'lib/tag_cloud.rb'
# Dumb hacks are dumb. Since the blog posts don't include '.html.' in the file # Dumb hacks are dumb. Since the blog posts don't include '.html.' in the file
# name (nor do I want them to), Middleman defaults to showing them as plain # name (nor do I want them to), Middleman's development server defaults to
# text. Instead, send all pseudo-extensionless files as HTML. This might break # showing them as plain text. Instead, send all pseudo-extensionless files as
# something down the line. # HTML. This might break something down the line.
::Rack::Mime::MIME_TYPES[''] = 'text/html' ::Rack::Mime::MIME_TYPES[''] = 'text/html'
helpers do helpers do
...@@ -74,10 +74,18 @@ activate :syntax #, :line_numbers => true ...@@ -74,10 +74,18 @@ activate :syntax #, :line_numbers => true
set :markdown_engine, :redcarpet set :markdown_engine, :redcarpet
set :markdown, fenced_code_blocks: true, smartypants: true set :markdown, fenced_code_blocks: true, smartypants: true
# Build-specific configuration activate :external_pipeline,
configure :build do name: :webpack,
if ENV['TARGET'] # Building when we are deploying... command: build? ?
activate :minify_css './node_modules/webpack/bin/webpack.js --bail --mode production' :
activate :minify_javascript './node_modules/webpack/bin/webpack.js --watch -d --mode development --progress --color',
end source: ".tmp/dist",
end latency: 1
## Build-specific configuration
#configure :build do
# if ENV['TARGET'] # Building when we are deploying...
# activate :minify_css
# activate :minify_javascript
# end
#end
/* Animated text, copied from Thristhart */
// Though I've changed the list of skills to better reflect me.
const skills = ['linux', 'ruby', 'python', 'devops', 'sysadmin', 'debugging', 'security', 'paranoia', 'configuration management'];
const characters = 'abcdefghijklmnopqrstuvwxyz';
let lastFrameTime;
const skill = document.getElementById('skill-slider');
let targetText = 'web';
let currentText = 'web';
const NEW_CHARACTER_RATE = 100; // milliseconds per character
const CHARACTER_CYCLE_RATE = 50;
const TIME_BETWEEN_TEXT_CHANGES = 2000;
let timeSinceLastNewCharacter = 0;
let timeSinceLastCycle = 0;
let timeSinceLastNewText = 1000;
let skillIndex = 0;
function textAnimation(time) {
requestAnimationFrame(textAnimation);
if (!lastFrameTime) {
lastFrameTime = time;
}
let dt = time - lastFrameTime;
if (currentText === targetText) {
timeSinceLastNewText += dt;
if (timeSinceLastNewText > TIME_BETWEEN_TEXT_CHANGES) {
targetText = skills[(skillIndex++) % skills.length];
timeSinceLastNewText = 0;
}
}
if (currentText.length !== targetText.length) {
timeSinceLastNewCharacter += dt;
if (timeSinceLastNewCharacter > NEW_CHARACTER_RATE) {
timeSinceLastNewCharacter = 0;
if (currentText.length > targetText.length) {
currentText = currentText.slice(0, -1);
} else {
currentText += characters[Math.floor(Math.random() * characters.length)];
}
}
}
if (timeSinceLastCycle > CHARACTER_CYCLE_RATE) {
timeSinceLastCycle = 0;
let letters = currentText.split('');
letters.forEach((letter, index) => {
if (letter !== targetText[index]) {
let alphabetIndex = characters.indexOf(letter);
let nextIndex = (alphabetIndex + 1) % characters.length;
letters[index] = characters[nextIndex];
}
});
currentText = letters.join('');
}
timeSinceLastCycle += dt;
lastFrameTime = time;
skill.innerHTML = currentText;
}
/* If there isn't a skill slider element on the page, don't initiate the animation */
if (skill != null) {
requestAnimationFrame(textAnimation);
}
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const StatsWriterPlugin = require("webpack-stats-plugin").StatsWriterPlugin;;
module.exports = {
entry: {
main: "./source/assets/javascript/index.js",
styles: "./source/assets/stylesheets/all.css.scss",
},
output: {
"path": __dirname+'/build/assets/javascript/',
"filename": "[name].js"
},
devtool: "source-map",
module: {
rules: [
{
"enforce": "pre",
"test": /\.(js|jsx)$/,
"exclude": /node_modules\//,
"use": "eslint-loader"
},
{
"test": /\.js$/,
"exclude": /node_modules\//,
"use": {
"loader": "babel-loader",
"options": {
"presets": [
"@babel/env"
]
}
}
},
{
"test": /\.s?css$/,
"use": [
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader"
]
}
]
},
plugins: [
new MiniCssExtractPlugin({filename: "../stylesheets/[name].css"}),
new StatsWriterPlugin()
]
}
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment