Make Gulp minify html

Gulpfile.js

@@ -2,6 +2,7 @@
 var gulp = require( 'gulp' );
 var uglify = require( 'gulp-uglify' );
 var rename = require( 'gulp-rename' );
+var htmlmin = require( 'gulp-htmlmin' );
 
 gulp.task( 'scripts', function() {
 	return gulp
@@ -11,12 +12,23 @@ gulp.task( 'scripts', function() {
 		.pipe( gulp.dest( './video2commons/frontend/static/' ) );
 } );
 
+gulp.task( 'html', function() {
+	return gulp
+		.src( [ './video2commons/frontend/**/*.html', '!./video2commons/frontend/**/*.min.html' ] )
+		.pipe( rename( { suffix: '.min' } ) )
+		.pipe( htmlmin( { collapseWhitespace: true, minifyCSS: true } ) )
+		.pipe( gulp.dest( './video2commons/frontend/' ) );
+} );
+
 gulp.task( 'watch', function() {
 	var changeevent = function( event ) {
-		console.log( 'File ' + event.path + ' was ' + event.type + ', running tasks...' );
+		console.log( 'File ' + event.path + ' was ' + event.type + ', running tasks...' );  // eslint-disable-line no-console
 	};
 	gulp.watch( [ './video2commons/frontend/static/*.js', '!./video2commons/frontend/static/*.min.js' ], [ 'scripts' ] )
 		.on( 'change', changeevent );
+
+	gulp.watch( [ './video2commons/frontend/**/*.html', '!./video2commons/frontend/**/*.min.html' ], [ 'html' ] )
+		.on( 'change', changeevent );
 } );
 
-gulp.task( 'default', [ 'scripts', 'watch' ] );
+gulp.task( 'default', [ 'scripts', 'html', 'watch' ] );

package.json

@@ -18,6 +18,7 @@
   "homepage": "https://github.com/Toollabs/video2commons#readme",
   "devDependencies": {
     "gulp": "^3.9.1",
+    "gulp-htmlmin": "^3.0.0",
     "gulp-rename": "^1.2.2",
     "gulp-uglify": "^2.0.0"
   }

video2commons/frontend/static/html/addTask.min.html

@@ -1 +1 @@
-<div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4><span class="glyphicon glyphicon-plus"></span> {{addTask}}</h4> </div> <div class="modal-body" style="padding:40px 50px"></div> <div class="modal-footer"> <button type="button" class="btn btn-danger flip pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> {{cancel}}</button> <button type="submit" class="btn btn-success flip pull-right" id="btn-next">{{next}} <span class="glyphicon glyphicon-chevron-right"></span></button> <button type="button" class="btn btn-warning flip pull-right disabled" id="btn-prev"><span class="glyphicon glyphicon-chevron-left"></span> {{back}}</button> <img class="pull-right" alt="File:Ajax-loader.gif" src="//upload.wikimedia.org/wikipedia/commons/d/de/Ajax-loader.gif" data-file-width="32" data-file-height="32" height="32" width="32" id="dialog-spinner"> </div> </div> </div> 
+<div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal">&times;</button><h4><span class="glyphicon glyphicon-plus"></span> {{addTask}}</h4></div><div class="modal-body" style="padding:40px 50px"></div><div class="modal-footer"><button type="button" class="btn btn-danger flip pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> {{cancel}}</button> <button type="submit" class="btn btn-success flip pull-right" id="btn-next">{{next}} <span class="glyphicon glyphicon-chevron-right"></span></button> <button type="button" class="btn btn-warning flip pull-right disabled" id="btn-prev"><span class="glyphicon glyphicon-chevron-left"></span> {{back}}</button> <img class="pull-right" alt="File:Ajax-loader.gif" src="//upload.wikimedia.org/wikipedia/commons/d/de/Ajax-loader.gif" data-file-width="32" data-file-height="32" height="32" width="32" id="dialog-spinner"></div></div></div>

video2commons/frontend/static/html/confirmForm.min.html

@@ -1 +1 @@
-<form class="form-horizontal" role="form"> <div class="form-group"> <label class="control-label col-sm-2" for="url">URL</label> <div class="col-sm-10"> <p class="form-control-static" id="url"></p> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="extractor">{{extractor}}</label> <div class="col-sm-10"> <p class="form-control-static" id="extractor"></p> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="keep">{{keep}}</label> <div class="col-sm-10"> <p class="form-control-static" id="keep"></p> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="filename">{{filetarget}}</label> <div class="col-sm-10"> <p class="form-control-static" id="filename"></p> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="format">{{transcoding}}</label> <div class="col-sm-10"> <p class="form-control-static" id="format"></p> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="filedesc">{{filedescription}}</label> <div class="col-sm-10"> <textarea class="form-control" rows="5" id="filedesc" readonly dir="ltr"></textarea> </div> </div> <div class="alert alert-info"> {{note}} <ul> <li>{{confirmmsg}}</li> </ul> </div> </form> 
+<form class="form-horizontal" role="form"><div class="form-group"><label class="control-label col-sm-2" for="url">URL</label><div class="col-sm-10"><p class="form-control-static" id="url"></p></div></div><div class="form-group"><label class="control-label col-sm-2" for="extractor">{{extractor}}</label><div class="col-sm-10"><p class="form-control-static" id="extractor"></p></div></div><div class="form-group"><label class="control-label col-sm-2" for="keep">{{keep}}</label><div class="col-sm-10"><p class="form-control-static" id="keep"></p></div></div><div class="form-group"><label class="control-label col-sm-2" for="filename">{{filetarget}}</label><div class="col-sm-10"><p class="form-control-static" id="filename"></p></div></div><div class="form-group"><label class="control-label col-sm-2" for="format">{{transcoding}}</label><div class="col-sm-10"><p class="form-control-static" id="format"></p></div></div><div class="form-group"><label class="control-label col-sm-2" for="filedesc">{{filedescription}}</label><div class="col-sm-10"><textarea class="form-control" rows="5" id="filedesc" readonly="readonly" dir="ltr"></textarea></div></div><div class="alert alert-info">{{note}}<ul><li>{{confirmmsg}}</li></ul></div></form>

video2commons/frontend/static/html/sourceForm.min.html

@@ -1 +1 @@
-<form role="form"> <div class="form-group"> <label for="url"><span class="glyphicon glyphicon-import"></span> URL</label> <input class="form-control" id="url" placeholder="http://example.com/examplevideo" dir="ltr"> </div> <div class="checkbox"> <label><input type="checkbox" value="" checked id="video">{{keepvideo}}</label> </div> <div class="checkbox"> <label><input type="checkbox" value="" checked id="audio">{{keepaudio}}</label> </div> <div class="checkbox"> <label><input type="checkbox" value="" checked id="subtitles">{{importsubtitles}}</label> </div> <div class="alert alert-info"> {{note}} <ul> <li>{{notesplaylists}}</li> <li>{{notesuncheck}}</li> <li>{{notessubtitles}}</li> <li>{{> notesown}}</li> </ul> <b>{{importantnote}}</b> {{> noteslicensing}} </div> </form> 
+<form role="form"><div class="form-group"><label for="url"><span class="glyphicon glyphicon-import"></span> URL</label><input type="text" class="form-control" id="url" placeholder="http://example.com/examplevideo" dir="ltr"></div><div class="checkbox"><label><input type="checkbox" value="" checked="checked" id="video">{{keepvideo}}</label></div><div class="checkbox"><label><input type="checkbox" value="" checked="checked" id="audio">{{keepaudio}}</label></div><div class="checkbox"><label><input type="checkbox" value="" checked="checked" id="subtitles">{{importsubtitles}}</label></div><div class="alert alert-info">{{note}}<ul><li>{{notesplaylists}}</li><li>{{notesuncheck}}</li><li>{{notessubtitles}}</li><li>{{> notesown}}</li></ul><b>{{importantnote}}</b> {{> noteslicensing}}</div></form>

video2commons/frontend/static/html/targetForm.min.html

@@ -1 +1 @@
-<form role="form"> <div class="form-group"> <label for="filename"><span class="glyphicon glyphicon-export"></span> {{filename}}</label> <div class="form-inline"> <input class="form-control" id="filename" placeholder="Example" size="30" dir="ltr"> <p class="form-control-static">.</p> <select class="form-control" id="format" style="max-width:40%" dir="ltr"></select> </div> </div> <div class="form-group"> <label for="filedesc"><span class="glyphicon glyphicon-list"></span> {{filedescription}}</label> <textarea class="form-control" rows="10" id="filedesc" dir="ltr"></textarea> </div> <div class="alert alert-info"> {{note}} <ul> <li>{{extensionmsg}}</li> </ul> </div> </form> 
+<form role="form"><div class="form-group"><label for="filename"><span class="glyphicon glyphicon-export"></span> {{filename}}</label><div class="form-inline"><input type="text" class="form-control" id="filename" placeholder="Example" size="30" dir="ltr"><p class="form-control-static">.</p><select class="form-control" id="format" style="max-width:40%" dir="ltr"></select></div></div><div class="form-group"><label for="filedesc"><span class="glyphicon glyphicon-list"></span> {{filedescription}}</label><textarea class="form-control" rows="10" id="filedesc" dir="ltr"></textarea></div><div class="alert alert-info">{{note}}<ul><li>{{extensionmsg}}</li></ul></div></form>

video2commons/frontend/templates/base.html

@@ -24,6 +24,7 @@
    <div class="container-fluid">
       <div class="navbar-header">
         <a class="navbar-brand" href="#">video2commons</a>
+        (degrading due to <a href="https://phabricator.wikimedia.org/T153488">T153488</a>)
       </div>
         <ul class="nav navbar-nav navbar-{% if lang() is rtl %}left{% else %}right{% endif %}">
           <li><a href="https://commons.wikimedia.org/w/index.php?title=Special:MyLanguage/Commons:Video2commons&amp;uselang={{ lang() }}"><span class="glyphicon glyphicon-book"></span> {{ _('help') }}</a></li>

video2commons/frontend/templates/base.min.html

@@ -1 +1 @@
-<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" dir="{% if lang() is rtl %}rtl{% else %}ltr{% endif %}" lang="{{ lang() }}"> <head> <meta http-equiv="Content-type" content="text/html;charset=UTF-8"> <title>video2commons</title> <link href="//tools-static.wmflabs.org/cdnjs/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> {% if lang() is rtl %} <link href="static/externals/bootstrap-rtl.min.css" rel="stylesheet"> {% endif %} <link href="//tools-static.wmflabs.org/cdnjs/ajax/libs/github-fork-ribbon-css/0.1.1/gh-fork-ribbon.min.css" rel="stylesheet"> {% block jscss %}{% endblock %} <style>body{padding-top:60px}.github-fork-ribbon{background-color:#333}</style> </head> <body> <div class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">video2commons</a> </div> <ul class="nav navbar-nav navbar-{% if lang() is rtl %}left{% else %}right{% endif %}"> <li><a href="https://commons.wikimedia.org/w/index.php?title=Special:MyLanguage/Commons:Video2commons&amp;uselang={{ lang() }}"><span class="glyphicon glyphicon-book"></span> {{ _('help') }}</a></li> {% if loggedin %} <li><a href="{{ url_for('logout') }}"><span class="glyphicon glyphicon-log-out"></span> {{ _('logout') }}</a></li> {% endif %} </ul> </div> </div> <div class="container" id="content"> {% block content %}{% endblock %} </div> <div class="github-fork-ribbon-wrapper {% if lang() is rtl %}left{% else %}right{% endif %}-bottom"> <div class="github-fork-ribbon"> <a href="https://github.com/Toollabs/video2commons">{{ _('forkOnGitHub') }}</a> </div> </div> </body> </html> 
+<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" dir="{% if lang() is rtl %}rtl{% else %}ltr{% endif %}" lang="{{ lang() }}"><head><meta http-equiv="Content-type" content="text/html;charset=UTF-8"><title>video2commons</title><link href="//tools-static.wmflabs.org/cdnjs/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">{% if lang() is rtl %}<!--<link href="//tools-static.wmflabs.org/cdnjs/ajax/libs/bootstrap-rtl/3.1.2/css/bootstrap-rtl.min.css" rel="stylesheet">--><link href="static/externals/bootstrap-rtl.min.css" rel="stylesheet">{% endif %}<link href="//tools-static.wmflabs.org/cdnjs/ajax/libs/github-fork-ribbon-css/0.1.1/gh-fork-ribbon.min.css" rel="stylesheet">{% block jscss %}{% endblock %}<style>body{padding-top:60px}.github-fork-ribbon{background-color:#333}</style></head><body><div class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><a class="navbar-brand" href="#">video2commons</a> (degrading due to <a href="https://phabricator.wikimedia.org/T153488">T153488</a>)</div><ul class="nav navbar-nav navbar-{% if lang() is rtl %}left{% else %}right{% endif %}"><li><a href="https://commons.wikimedia.org/w/index.php?title=Special:MyLanguage/Commons:Video2commons&amp;uselang={{ lang() }}"><span class="glyphicon glyphicon-book"></span> {{ _('help') }}</a></li>{% if loggedin %}<li><a href="{{ url_for('logout') }}"><span class="glyphicon glyphicon-log-out"></span> {{ _('logout') }}</a></li>{% endif %}</ul></div></div><div class="container" id="content">{% block content %}{% endblock %}</div><div class="github-fork-ribbon-wrapper {% if lang() is rtl %}left{% else %}right{% endif %}-bottom"><div class="github-fork-ribbon"><a href="https://github.com/Toollabs/video2commons">{{ _('forkOnGitHub') }}</a></div></div></body></html>

video2commons/frontend/templates/error.min.html

@@ -1 +1 @@
-{% extends "base.min.html" %} {% block content %} <div class="alert alert-danger">{{ message }}</div> {% endblock %} 
+{% extends "base.min.html" %} {% block content %}<div class="alert alert-danger">{{ message }}</div>{% endblock %}

video2commons/frontend/templates/main.min.html

@@ -1 +1 @@
-{% extends "base.min.html" %} {% block jscss %} {% if loggedin %} <script src="//tools-static.wmflabs.org/cdnjs/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="//tools-static.wmflabs.org/cdnjs/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="//tools-static.wmflabs.org/cdnjs/ajax/libs/mustache.js/2.2.1/mustache.min.js"></script> <script src="i18n/{{ lang() }}"></script> <script src="static/video2commons.min.js"></script> {% endif %} {% endblock %} {% block content %} {% if loggedin %} <noscript>{{ _('JavascriptRequired') }}</noscript> {% else %} <form action="{{ url_for('loginredirect') }}"> <center> <input class="btn btn-primary btn-success btn-lg" value="{{ _('loginOnCommons') }}" type="submit"> </center> </form> {% endif %} {% endblock %} 
+{% extends "base.min.html" %} {% block jscss %} {% if loggedin %}<script src="//tools-static.wmflabs.org/cdnjs/ajax/libs/jquery/2.2.0/jquery.min.js"></script><script src="//tools-static.wmflabs.org/cdnjs/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script><script src="//tools-static.wmflabs.org/cdnjs/ajax/libs/mustache.js/2.2.1/mustache.min.js"></script><script src="i18n/{{ lang() }}"></script><script src="static/video2commons.min.js"></script>{% endif %} {% endblock %} {% block content %} {% if loggedin %}<noscript>{{ _('JavascriptRequired') }}</noscript>{% else %}<form method="get" action="{{ url_for('loginredirect') }}"><center><input class="btn btn-primary btn-success btn-lg" value="{{ _('loginOnCommons') }}" type="submit"></center></form>{% endif %} {% endblock %}