Merge pull request #609 from tralafiti/feature/groundwork

CSS - version based guild folder

config.rb

@@ -7,8 +7,8 @@ require 'compass/import-once/activate'
 
 http_path = "/"
 # project_path = ''
-css_dir = 'public/css'
-sass_dir = 'sass'
+# css_dir = 'public/css'
+# sass_dir = 'sass'
 images_dir = 'public/img'
 generated_images_path = 'img_cache'
 # javascripts_dir = 'javascripts'

gulpfile.js

@@ -24,6 +24,7 @@ let notifier            = require('node-notifier');
 // -- Helper & NPM modules ----------------------------------------------------
 let flatten             = require('flat');
 let padEnd              = require('lodash.padend');
+let merge               = require('lodash.merge');
 let minimist            = require('minimist');
 let slash               = require('slash');
 let fileExtension       = require('file-extension');
@@ -56,8 +57,9 @@ let PATH = {
     }
 };
 
-// Pathfinder config file
-let pathfinderConfigFile = './app/pathfinder.ini';
+// Pathfinder config files
+let pathfinderConfigFileApp = './app/pathfinder.ini';
+let pathfinderConfigFileConf = './conf/pathfinder.ini';
 
 // CLI box size in characters
 let cliBoxLength = 80;
@@ -119,7 +121,7 @@ let brotliOptions = {
 
 let compassOptions = {
     config_file: './config.rb',
-    css: 'public/css',
+    css: 'public/css/#VERSION#',        // #VERSION# will be replaced with version tag
     sass: 'sass',
     time: true,                         // show execution time
     sourcemap: true
@@ -152,19 +154,24 @@ let printError = (title, example) => {
 // parse pathfinder.ini config file for relevant data
 let tagVersion;
 try{
-    let pathfinderIni = ini.parse(fs.readFileSync(pathfinderConfigFile, 'utf-8'));
+    let pathfinderAppIni = ini.parse(fs.readFileSync(pathfinderConfigFileApp, 'utf-8'));
+    let pathfinderConfIni = fs.existsSync(pathfinderConfigFileConf)
+        ?  ini.parse(fs.readFileSync(pathfinderConfigFileConf, 'utf-8'))
+        : {};
+    let pathfinderIni = merge(pathfinderAppIni, pathfinderConfIni);
+
     try{
         tagVersion = pathfinderIni.PATHFINDER.VERSION;
     }catch(err){
         printError(
             err.message,
-            'Missing "PATHFINDER.VERSION" in "' + pathfinderConfigFile + '"');
+            'Missing "PATHFINDER.VERSION" in "' + pathfinderConfigFileApp + '"');
         process.exit(1);
     }
 }catch(err){
     printError(
         err.message,
-        'Check read permissions for "' + pathfinderConfigFile + '"');
+        'Check read permissions for "' + pathfinderConfigFileApp + '"');
     process.exit(1);
 }
 
@@ -189,6 +196,9 @@ let CONF = {
     DEBUG: false
 };
 
+// place version tag into compass options
+compassOptions.css = compassOptions.css.replace('#VERSION#', CONF.TAG);
+
 // == Helper methods ==================================================================================================
 
 /**
@@ -485,7 +495,7 @@ gulp.task('task:cleanJsBuild', () => del([PATH.JS.DIST_BUILD]));
 /**
  * clean CSS build dir
  */
-gulp.task('task:cleanCssBuild', () => del([PATH.ASSETS.DIST + '/css']));
+gulp.task('task:cleanCssBuild', () => del([PATH.ASSETS.DIST + '/css/' + CONF.TAG]));
 
 /**
  * clean JS destination (final) dir
@@ -667,7 +677,7 @@ gulp.task('task:sass', () => {
             trackFile(data, {src: 'startSize', src_percent: 'percent', uglify: 'endSize'});
             return chalk.green('Build CSS file "' + data.fileName + '"');
         }))
-        .pipe(gulp.dest(PATH.ASSETS.DIST + '/css'));
+        .pipe(gulp.dest(PATH.ASSETS.DIST + '/css/' + CONF.TAG));
 });
 
 /**
@@ -679,7 +689,7 @@ gulp.task('task:cleanCss', () => {
             compatibility: '*',
             level: 2
         }))
-        .pipe(gulp.dest(PATH.ASSETS.DIST +'/css'));
+        .pipe(gulp.dest(PATH.ASSETS.DIST +'/css/' + CONF.TAG));
 });
 
 // == Helper tasks ====================================================================================================

public/templates/view/index.html

@@ -50,7 +50,7 @@
 
     <meta name="google-site-verification" content="sHoh0gfMw3x1wiwLTK5OsKsxt7kRgxi69hRgWEGh9DQ" />  {* Youtube verification code *}
 
-    <set pathCSS="{{ @BASE . '/public/css/pathfinder.css?' . @PATHFINDER.VERSION }}" />
+    <set pathCSS="{{ @BASE . '/public/css/' . @PATHFINDER.VERSION . '/pathfinder.css' }}" />
     <set pathJSApp="{{ @BASE . '/' . @tplPathJs . '/app' }}" />
     <set pathJSRequire="{{ @BASE . '/' . @tplPathJs . '/lib/require.js' }}" />
 

sass/_variables.scss

@@ -29,7 +29,7 @@ $link-hover-color:      darken($link-color, 15%);
 //
 //## Font, line-height, and color for body text, headings, and more.
 
-$pf-font-path:            "../fonts" !default;
+$pf-font-path:            "../../fonts" !default;
 
 @font-face {
   font-family: 'Oxygen';
@@ -105,7 +105,7 @@ $headings-color:          inherit;
 //
 //## Specify custom locations of the include Glyphicons icon font. Useful for those including Bootstrap via Bower.
 
-$icon-font-path:          "../fonts/";
+$icon-font-path:          "../../fonts/";
 $icon-font-name:          "glyphicons-halflings-regular";
 $icon-font-svg-id:        "glyphicons_halflingsregular";
 
@@ -805,7 +805,7 @@ $animation-ajax-dropdown: "flipInY";
 //
 //##
 
-$base-url: "../img";
+$base-url: "../../img";
 //urage: background-image: url("#{$base-url}/images/bg.png");
 
 $html-background-image: "";

sass/layout/_images.scss

@@ -8,7 +8,7 @@
 }
 
 .pf-icon-dotlan{
-  background: inline-image("#{$base-url}/icons/dotlan_logo.png");
+  background: inline-image("/icons/dotlan_logo.png");
   width: 17px;
   height: 17px;
   opacity: 0.8;
@@ -16,7 +16,7 @@
 }
 
 .pf-icon-wormhol-es{
-  background: inline-image("#{$base-url}/icons/wormhol_es_logo.png");
+  background: inline-image("/icons/wormhol_es_logo.png");
   width: 17px;
   height: 17px;
   opacity: 0.8;

sass/layout/_map.scss

@@ -232,7 +232,7 @@ $mapWrapperMaxWidth:     $mapWidth + 35px;
 
 // 20x20px grid background
 .pf-grid-small{
-  background: inline-image("#{$base-url}/grid_40x40.png") !important;
+  background: inline-image("/grid_40x40.png") !important;
 }
 
 .pf-map{

sass/library/custom-scrollbar/_mCustomScrollbar.scss

@@ -371,7 +371,7 @@ yx-axis
 .mCSB_scrollTools .mCSB_buttonLeft,
 .mCSB_scrollTools .mCSB_buttonRight{
   //background-image: url(mCSB_buttons.png); /* css sprites */
-  background: inline-image("#{$base-url}/custom-scrollbar/mCSB_buttons.png"); /* css sprites */
+  background: inline-image("/custom-scrollbar/mCSB_buttons.png"); /* css sprites */
   background-repeat: no-repeat;
   opacity: 0.4; filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)";
 }

sass/library/fontawesome/_variables.scss

@@ -1,7 +1,7 @@
 // Variables
 // --------------------------
 
-$fa-font-path:                "../fonts" !default;
+$fa-font-path:                "../../fonts" !default;
 $fa-font-size-base:           16px !default;
 $fa-css-prefix:               fa !default;
 $fa-version:                  "5.0.2" !default;