Implement assets generator

We're coming up to having 5 JS files now. 2 years ago, the argument
to leave them unminified was that someone would be able to debug
JS problems on live site. Doesn't seem practical to me any more.
No reason to punish thousands of docs readers, for years, with extra
bandwidth and HTTP requests, on an off chance we'll save this
mythical "debugger" 20 seconds of not having to clone the repo and
run the dev web app that caters unminified assets.

.gitignore

@@ -2,8 +2,7 @@
 index.data
 *~
 html/*.html
-html/css/style.css
-html/css/style.css.map
+html/css/app.css
 html/perl6.xhtml
 html/routine/
 html/type/
@@ -13,12 +12,12 @@ html/programs/
 html/syntax/
 html/images/type-graph*
 html/js/search.js
+html/js/app.js
 .precomp
 precompiled
 assets/assetpack.db
 assets/cache
 .sass-cache/
-html/css/style.css.map
 links.txt
 links.tmp
 xt/aspell.pws

Makefile

@@ -5,14 +5,14 @@ DOCKER_HOST_PORT     ?= 3000
 DOCKER_SELINUX_LABEL ?= 0
 SELINUX_OPT          := $(shell [ $(DOCKER_SELINUX_LABEL) -eq 1 ] && echo ':Z' || echo '' )
 
-.PHONY: html init-highlights html-nohighlight sparse sass webdev-build bigpage \
-	test xtest ctest help run clean-html clean-examples clean-images \
+.PHONY: html init-highlights html-nohighlight sparse assets webdev-build \
+	bigpage test xtest ctest help run clean-html clean-examples clean-images \
 	clean-search clean test-links extract-examples push \
 	docker-image docker-htmlify docker-test docker-xtest docker-ctest docker-testall docker-run
 
 html: bigpage htmlify
 
-htmlify: init-highlights sass
+htmlify: init-highlights assets
 	perl6 htmlify.p6 --parallel=1
 
 init-highlights:
@@ -27,8 +27,8 @@ html-nohighlight:
 sparse:
 	perl6 htmlify.p6 --no-highlight --sparse=10
 
-sass:
-	./util/compile-sass.sh
+assets:
+	./app.pl assets
 
 webdev-build:
 	perl6 htmlify.p6 --no-highlight --sparse=200
@@ -54,6 +54,7 @@ help:
 	@echo "Options:"
 	@echo "   html:             generate the HTML documentation"
 	@echo "   html-nohighlight: generate HTML documentation without syntax highlighting"
+	@echo "   assets:           generate CSS/JS assets"
 	@echo " sparse:             generate HTML documention, but only every 10th file"
 	@echo "webdev-build:        generate only a few HTML files (useful for testing website changes)"
 	@echo "bigpage:             generate HTML documentation in one large file (html/perl6.xhtml)"

app-start

@@ -1,3 +1,3 @@
 #!/bin/sh
-morbo -w assets app.pl
+morbo -w assets/sass -w assets/js app.pl
 

app.pl

@@ -3,26 +3,20 @@
 use File::Spec::Functions 'catfile';
 use Mojolicious 7.31;
 use Mojolicious::Lite;
+use File::Copy;
 use Mojo::File qw/path/;
+use File::Temp qw/tempfile/;
 
-app->static->paths(['html']);
+my $mode = shift || 'dev';
+app->mode($mode eq 'assets' ? 'production' : 'development');
 
+app->static->paths(['html']);
 if ( eval { require Mojolicious::Plugin::AssetPack; 1; } ) {
     unless ( eval { require CSS::Sass } ) {
         app->log->debug('CSS::Sass not loaded. Relying on `sass` program'
             . ' to process SASS');
     }
-
-    plugin AssetPack => { pipes => [qw/Sass JavaScript Combine/] };
-    app->asset->process('app.css' => 'sass/style.scss' );
-
-    my $style_sheet = catfile qw{html css style.css};
-    app->log->debug(
-        "Processing SASS and copying the results over to $style_sheet..."
-    );
-    path($style_sheet)->spurt(
-        app->asset->processed('app.css')->map("content")->join);
-    app->log->debug('...Done');
+    gen_assets();
 }
 else {
     app->log->debug( 'Install Mojolicious::Plugin::AssetPack to enable SASS'
@@ -49,4 +43,39 @@
     $self->reply->static("/$dir.html");
 };
 
-app->start;
+$mode eq 'assets' and app->start(qw/eval exit/) or app->start;
+
+
+sub gen_assets {
+    my $app = shift;
+
+    app->plugin(AssetPack => { pipes => [qw/Sass JavaScript Combine/]});
+
+    app->asset->process(
+        'app.css' => qw{
+            /sass/style.scss
+        },
+    );
+    app->asset->process(
+        'app.js' => qw{
+            /js/jquery-3.1.1.min.js
+            /js/jquery-ui.min.js
+            /js/main.js
+        },
+    );
+
+    app->log->info('Copying assets...');
+    my ($temp_css, $temp_js) = ((tempfile)[1], (tempfile)[1]);
+    Mojo::File->new($temp_css)->spurt(
+        app->asset->processed('app.css')->[0]->content
+    );
+    Mojo::File->new($temp_js)->spurt(
+        app->asset->processed('app.js')->[0]->content
+    );
+    copy $temp_css, 'html/css/app.css'
+        or app->log->warn("Copying CSS failed: $!");
+    copy $temp_js,  'html/js/app.js'
+        or app->log->warn("Copying JS failed: $!");
+    app->log->info('...done');
+
+}

cpanfile

@@ -1,3 +1,13 @@
-requires "Mojolicious";
-requires "CSS::Sass";
-requires "Mojolicious::Plugin::AssetPack";
+requires      'CSS::Minifier::XS'                => '0.09';
+requires      'CSS::Sass'                        => '3.4.10';
+requires      'File::Copy'                       => '0';
+requires      'File::Temp'                       => '0.2304';
+requires      'File::Spec::Functions'            => '0';
+requires      'IO::Socket::SSL'                  => '2.056';
+requires      'JavaScript::Minifier::XS'         => '0.11';
+requires      'Mojo::File'                       => '0';
+requires      'Mojolicious'                      => '7.31';
+requires      'Mojolicious::Lite'                => '0';
+requires      'Mojolicious::Plugin::AssetPack'   => '1.42';
+requires      'strict'                           => '0';
+requires      'warnings'                         => '0';

template/footer.html

@@ -22,7 +22,5 @@
   </p>
 </footer>
 
-<script type="text/javascript" src="/js/jquery-3.1.1.min.js?v=1"></script>
-<script type="text/javascript" src="/js/jquery-ui.min.js?v=1"></script>
+<script type="text/javascript" src="/js/app.js?v=1"></script>
 <script type="text/javascript" src="/js/search.js?v=3"></script>
-<script type="text/javascript" src="/js/main.js?v=3"></script>

template/head.html

@@ -1,4 +1,4 @@
 <meta name=viewport content="width=device-width, initial-scale=1">
 <link rel="icon" href="/favicon.ico" type="image/x-icon" />
-<link rel="stylesheet" type="text/css" href="/css/style.css?v=7" media="screen" title="default" />
+<link rel="stylesheet" type="text/css" href="/css/app.css?v=7" media="screen" title="default" />
 <noscript> <style> #search { visibility: hidden; } </style> </noscript>