Refactoring, partially working system

simongoricar · Mar 17, 2021 · a56bebd · a56bebd
1 parent 973fe84
commit a56bebd
Show file tree

Hide file tree

Showing 8 changed files with 24 additions and 29 deletions.
diff --git a/src/pageTemplates/base.njk b/src/pageTemplates/base.njk
@@ -5,9 +5,9 @@
 <head>
     {% block headBegin %}{% endblock %}
     {% block metaTags %}
-        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-        <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        <meta name="viewport" content="width=device-width,initial-scale=1">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
     {% endblock %}
 
     <title>{% block title %}{% endblock %}</title>

diff --git a/src/pages/index.njk b/src/pages/index.njk
@@ -2,7 +2,7 @@
 {% block title %}gulp-nunjucks-sass-template{% endblock %}
 
 {% block headEnd %}
-    {{ "assets/css/main.min.css" | cssTag | safe }}
+    {{ tags.css | safe }}
 {% endblock %}
 
 {% block bodyOutside %}
@@ -20,6 +20,6 @@
 
     {# Inserting script tags can be done manually or using: #}
     {# {{ "assets/js/main.js" | scriptTag | safe }} #}
-    {{ scripts.index | safe }}
+    {{ tags.scripts.index | safe }}
 </body>
 {% endblock %}
diff --git a/src/pages/sample-page.njk b/src/pages/sample-page.njk
@@ -2,23 +2,13 @@
 {% block title %}Sample Page | gulp-nunjucks-sass-template{% endblock %}
 
 {% block headEnd %}
-    {{ "assets/css/main.min.css" | cssTag | safe }}
+    {{ tags.css | safe }}
 {% endblock %}
 
 {% block bodyOutside %}
 <body>
-    <h1>Lorem ipsum</h1>
-    <p>
-        {# For variable and filter configuration, see "tasks/configuration.ts" #}
+    <h1>Lorem ipsum 2</h1>
 
-        {# turns into "bar" (a variable) #}
-        {{ foo }}
-
-        {# Shortens the left side to n characters (a filter) #}
-        {{ "Lorem ipsum dolor sir amet." | shorten(11) }}
-    </p>
-
-    {# Inserting script tags can be done manually or using: #}
-    {{ "assets/js/main.js" | scriptTag | safe }}
+    {{ tags.scripts.samplepage | safe }}
 </body>
 {% endblock %}
diff --git a/src/scripts/samplepage.ts b/src/scripts/samplepage.ts
@@ -0,0 +1 @@
+console.log("Sample page!");
diff --git a/tasks/configuration.ts b/tasks/configuration.ts
@@ -6,8 +6,8 @@ process.chdir(`${__dirname}/..`);
 
 const basePaths = {
     // Bases
-    srcDirBase: "./src",
-    outputDirBase: "./dist",
+    srcDirBase: path.join(".", "src"),
+    outputDirBase: path.join(".", "dist"),
 
     /**
      * SOURCES
@@ -44,6 +44,7 @@ const basePaths = {
     srcTSDirName: "scripts",
     srcTSEntries: {
         index: "index.ts",
+        samplepage: "samplepage.ts",
     },
 
     srcImagesDirName: "images",
@@ -85,7 +86,7 @@ const basePaths = {
     outputCssDirName: "css",
     outputCssSourcemapsDirName: "sourcemaps",
 
-    outputJsDirName: "scripts",
+    outputJsDirName: "js",
 
     outputImagesDirName: "images",
 
@@ -148,7 +149,7 @@ const mainConfig = {
         entries: Object.fromEntries(Object.entries(basePaths.srcTSEntries).map(
             (item) => [
                 item[0],
-                path.join(basePaths.srcDirBase, basePaths.srcTSDirName, item[1]),
+                `./${path.join(basePaths.srcDirBase, basePaths.srcTSDirName, item[1])}`,
             ],
         )),
         srcDir: path.join(basePaths.srcDirBase, basePaths.srcTSDirName),
@@ -180,11 +181,11 @@ nunjucksGlobals = {
     ...nunjucksGlobals,
 
     tags: {
-        css: path.join(
+        css: nunjucksFilters.cssTag([
             basePaths.outputAssetsDirName,
             basePaths.outputCssDirName,
             `${getFilepathFilenameNoExt(basePaths.srcCssEntry)}.min.css`,
-        ),
+        ].join("/")),
         // Dynamic ready script tags
         scripts: Object.fromEntries(
             Object.entries(mainConfig.js.entries).map(

diff --git a/tasks/index.ts b/tasks/index.ts
@@ -22,15 +22,17 @@ export const otherAssets = taskCopyOtherAssets;
 export const images = taskImages;
 
 export const clean = taskClean;
-export const build = gulp.parallel(scripts, css, html, otherAssets, images);
+export const build = gulp.series(
+    clean,
+    gulp.parallel(scripts, css, html, otherAssets, images),
+);
 export const watch = gulp.parallel(
     watchCss, watchHtml, watchImages,
     watchOtherAssets, watchScripts,
 );
 
 // noinspection JSUnusedGlobalSymbols
 export default gulp.series(
-    clean,
     build,
     gulp.parallel(
         watch,

diff --git a/tasks/task-clean.ts b/tasks/task-clean.ts
@@ -4,8 +4,8 @@
 import del from "del";
 import { AsyncTask } from "async-done";
 
-import { mainConfig } from "./configuration";
+import { basePaths } from "./configuration";
 
 export default function cleanOutputDir(): ReturnType<AsyncTask> {
-    return del(mainConfig.outputDirBase);
+    return del(basePaths.outputDirBase);
 }
diff --git a/tasks/webpack.config.ts b/tasks/webpack.config.ts
@@ -1,14 +1,15 @@
 /**
  * Webpack Configuration
  */
+import path from "path";
 import { Configuration } from "webpack";
 import { mainConfig } from "./configuration";
 
 const webpackConfig: Configuration = {
     mode: mainConfig.isProductionEnv ? "production" : "development",
     entry: mainConfig.js.entries,
     output: {
-        path: mainConfig.js.outputDir,
+        path: path.resolve(mainConfig.js.outputDir),
         filename: "[name].js",
     },
     target: "browserslist",