diff --git a/.eleventy.js b/.eleventy.js deleted file mode 100644 index ce3c1aa..0000000 --- a/.eleventy.js +++ /dev/null @@ -1,45 +0,0 @@ -const pluginRev = require("eleventy-plugin-rev"); -const eleventySass = require("eleventy-sass"); -const tinyHTML = require('@sardine/eleventy-plugin-tinyhtml'); - -module.exports = function (eleventyConfig) { - eleventyConfig.addPlugin(pluginRev); - eleventyConfig.addPlugin(tinyHTML); - eleventyConfig.addPlugin(eleventySass, { - sass: { - loadPaths: ["node_modules"], - style: "compressed", - sourceMap: false, - }, - compileOptions: { - permalink: function (contents, inputPath) { - return (data) => { - return data.page.filePathStem.replace(/^\/scss\//, "/css/") + ".css"; - }; - } - }, - rev: true - }); - - eleventyConfig.setUseGitIgnore(false); - eleventyConfig.addPassthroughCopy({ - "src/img": "img", - "src/favicon.*": "", - "node_modules/@fortawesome/fontawesome-free/webfonts": "webfonts", - }); - - return { - // Pre-process *.html files with: (default: `liquid`) - htmlTemplateEngine: "njk", - // Opt-out of pre-processing global data JSON files: (default: `liquid`) - dataTemplateEngine: "njk", - - dir: { - input: "src", - // includes: "_includes", - // layouts: "_includes/layouts", - data: "_data", - output: `dist` - } - }; -}; diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..35182ab --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,185 @@ +/** + * Settings + * Turn on/off build features + */ +var settings = { + clean: true, + styles: true, + copy: true, + reload: true +}; + + +/** + * Paths to project folders + */ +var paths = { + input: 'src/', + output: 'dist/', + styles: { + input: 'src/scss/*.scss', + output: 'dist/css/' + }, + copy: { + input: [ + 'src/*.html', +// 'src/.htaccess', + 'src/{img,font}/**/*', + 'node_modules/@fortawesome/fontawesome-free/*fonts/**/*' + ], + output: 'dist/' + }, + reload: './dist/' +}; + + +/** + * Template for banner to add to file headers + */ + +var banner = { + main: + '/*!' + + ' <%= package.name %> v<%= package.version %>' + + ' | (c) ' + new Date().getFullYear() + ' <%= package.author.name %>' + + ' | <%= package.license %> License' + + ' | <%= package.repository.url %>' + + ' */\n' +}; + + +/** + * Gulp Packages + */ +// General +var {src, dest, watch, series, parallel} = require('gulp'); +var del = require('del'); +var rename = require('gulp-rename'); +var header = require('gulp-header'); +var package = require('./package.json'); + +// Styles +var sass = require('gulp-sass')(require('sass')); +var postcss = require('gulp-postcss'); +var prefix = require('autoprefixer'); +var minify = require('cssnano'); +var tildeImporter = require('node-sass-tilde-importer'); + +// BrowserSync +var browserSync = require('browser-sync'); + + +/** + * Gulp Tasks + */ +// Remove pre-existing content from output folders +var cleanDist = function (done) { + + // Make sure this feature is activated before running + if (!settings.clean) return done(); + + // Clean the dist folder + del.sync([ + paths.output + ]); + + // Signal completion + return done(); + +}; + +// Process, and minify Sass files +var buildStyles = function (done) { + // Make sure this feature is activated before running + if (!settings.styles) return done(); + + // Run tasks on all Sass files + return src(paths.styles.input) + .pipe(sass({ + importer: tildeImporter, + outputStyle: 'expanded', + sourceComments: true + })) + .pipe(postcss([ + prefix({ + cascade: true, + remove: true + }) + ])) + .pipe(header(banner.main, {package: package})) + .pipe(dest(paths.styles.output)) + .pipe(rename({suffix: '.min'})) + .pipe(postcss([ + minify({ + discardComments: { + removeAll: true + } + }) + ])) + .pipe(dest(paths.styles.output)); + +}; + +// Copy static files into output folder +var copyFiles = function (done) { + + // Make sure this feature is activated before running + if (!settings.copy) return done(); + + // Copy static files + return src(paths.copy.input) + .pipe(dest(paths.copy.output)); + +}; + +// Watch for changes to the src directory +var startServer = function (done) { + // Make sure this feature is activated before running + if (!settings.reload) return done(); + + // Initialize BrowserSync + browserSync.init({ + server: { + baseDir: paths.reload + } + }); + + // Signal completion + done(); + +}; + +// Reload the browser when files change +var reloadBrowser = function (done) { + if (!settings.reload) return done(); + browserSync.reload(); + done(); +}; + +// Watch for changes +var watchSource = function (done) { + watch(paths.input, series(exports.default, reloadBrowser)); + done(); +}; + + +/** + * Export Tasks + */ +// Default task +// gulp +exports.default = series( + cleanDist, + parallel( + buildStyles, + copyFiles + ) +); + +// Watch and reload +// gulp watch +exports.watch = series( + exports.default, + startServer, + watchSource +); \ No newline at end of file diff --git a/package.json b/package.json index caf1346..a2f660d 100644 --- a/package.json +++ b/package.json @@ -3,9 +3,8 @@ "version": "1.0.0", "description": "website for sp-magic.de", "scripts": { - "minify-css": "uncss -n -H dist/ -o dist/css/main-*.css dist/index.html", - "build": "eleventy && npm run minify-css", - "start": "eleventy --serve --watch" + "start": "gulp watch", + "build": "gulp" }, "author": "samuel-p", "repository": { @@ -16,18 +15,17 @@ "browser-sync": "^3.0.2" }, "devDependencies": { - "@11ty/eleventy": "^2.0.1", - "@node-minify/core": "^8.0.6", - "@node-minify/crass": "^8.0.6", - "@node-minify/html-minifier": "^8.0.6", - "@sardine/eleventy-plugin-tinyhtml": "^0.2.0", - "eleventy-plugin-rev": "^2.0.0", - "eleventy-sass": "^2.2.4", - "glob": "^10.3.12", - "minify": "^11.1.1", + "autoprefixer": "10.4.19", + "cssnano": "6.1.2", + "del": "6.1.1", + "gulp": "5.0.0", + "gulp-header": "2.0.9", + "gulp-postcss": "10.0.0", + "gulp-rename": "2.0.0", + "gulp-sass": "5.1.0", + "node-sass-tilde-importer": "^1.0.2", "postcss": "^8.4.38", - "sass": "^1.72.0", - "uncss": "^0.17.3" + "sass": "^1.74.1" }, "dependencies": { "@fortawesome/fontawesome-free": "^5.15.4", diff --git a/src/index.html b/src/index.html index 7f56bda..abdbe18 100644 --- a/src/index.html +++ b/src/index.html @@ -29,9 +29,8 @@ - - + +
@@ -45,10 +44,10 @@

Willkommen bei sp-magic!

- Schön, dass du hergefunden hast. Mein Name ist Samuel Philipp und ich bin ein Zauberkünstler aus - Magdeburg. Bei meinen Auftritten präsentiere ich Tricks mit Spielkarten, Büchern, Nägeln, Feuer und - vielen anderen Dingen. Auf dieser Seite findest du verschiedene Möglichkeiten mit mir in Kontakt zu - treten. Ich freue mich auf deine Nachricht. + Schön dass du hergefunden hast. Mein Name ist Samuel Philipp und ich bin ein Zauberkünstler aus Magdeburg. + Bei meinen Auftritten präsentiere ich Tricks mit Spielkarten, Büchern, Nägeln, Feuer und vielen anderen + Dingen. Auf dieser Seite findest du verschiedene Möglichkeiten mit mir in Kontakt zu treten. + Ich freue mich auf deine Nachricht.

@@ -57,7 +56,7 @@
-
+
@@ -75,14 +74,14 @@
-
Impressum
-
Datenschutz
-
Code
-
Statistiken
-
+
Impressum
+
Datenschutz
+
Code
+
Statistiken
+ diff --git a/src/scss/main.scss b/src/scss/main.scss index 8d957f6..ed15128 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -1,13 +1,13 @@ -@import "bootstrap/scss/bootstrap-grid"; -@import "bootstrap/scss/bootstrap-reboot"; -@import "bootstrap/scss/utilities/align"; -@import "bootstrap/scss/utilities/spacing"; -@import "bootstrap/scss/utilities/display"; -@import "bootstrap/scss/utilities/text"; -@import "@fortawesome/fontawesome-free/scss/fontawesome"; -@import "@fortawesome/fontawesome-free/scss/solid"; -@import "@fortawesome/fontawesome-free/scss/brands"; -@import "@fortawesome/fontawesome-free/scss/regular"; +@import "~bootstrap/scss/bootstrap-grid"; +@import "~bootstrap/scss/bootstrap-reboot"; +@import "~bootstrap/scss/utilities/align"; +@import "~bootstrap/scss/utilities/spacing"; +@import "~bootstrap/scss/utilities/display"; +@import "~bootstrap/scss/utilities/text"; +@import "~@fortawesome/fontawesome-free/scss/fontawesome"; +@import "~@fortawesome/fontawesome-free/scss/solid"; +@import "~@fortawesome/fontawesome-free/scss/brands"; +@import "~@fortawesome/fontawesome-free/scss/regular"; body { background: url('../img/bg.png') no-repeat center center fixed;