Move all static assets to static_src, compile to static

The fonts were also relocated out of the `scss/fonts` directory to their
own `fonts` directory.

All the `static` directories are now ignored, and are completely
generated from the compilation process.

gulpfile.js

@@ -2,68 +2,118 @@ var gulp = require('gulp');
 var gutil = require('gulp-util');
 var rename = require('gulp-rename');
 var path = require('path');
-var join = path.join;
 
 
 gulp.task('default', ['watch']);
-gulp.task('build', ['styles']);
+gulp.task('build', ['styles', 'javascript', 'images', 'fonts']);
 
-var scssFiles = {
-	'wagtail/wagtailadmin/static': [
-		'wagtailadmin/scss/core.scss',
-		'wagtailadmin/scss/layouts/login.scss',
-		'wagtailadmin/scss/layouts/home.scss',
-		'wagtailadmin/scss/layouts/page-editor.scss',
-		'wagtailadmin/scss/layouts/preview.scss',
-		'wagtailadmin/scss/panels/rich-text.scss',
-		'wagtailadmin/scss/userbar.scss',
-		'wagtailadmin/scss/normalize.scss',
-		'wagtailadmin/scss/userbar_embed.scss',
-	],
-	'wagtail/wagtailimages/static': [
-		'wagtailimages/scss/add-multiple.scss',
-		'wagtailimages/scss/focal-point-chooser.scss',
-	],
-	'wagtail/wagtailusers/static': [
-		'wagtailusers/scss/groups_edit.scss',
-	],
-	'wagtail/contrib/wagtailstyleguide/static': [
-		'wagtailstyleguide/scss/styleguide.scss',
-	],
+
+var sourceDirName = 'static_src';
+var destDirName = 'static';
+var renameSrcToDest = function() {
+	return rename(function(filePath) {
+		filePath.dirname = filePath.dirname.replace(
+			'/' + sourceDirName + '/',
+			'/' + destDirName + '/');
+	});
 };
 
+var flatten = function(arrOfArr) {
+	return arrOfArr.reduce(function(flat, more) {
+		return flat.concat(more);
+	}, []);
+};
+
+
+// A Wagtail app that contains static files
+var App = function(dir, options) {
+	this.dir = dir;
+	this.options = options || {};
+	this.appName = this.options.appName || path.basename(dir);
+	this.sourceFiles = path.join('.', this.dir, sourceDirName);
+};
+App.prototype = Object.create(null);
+App.prototype.scssIncludePaths = function() {
+	return [this.sourceFiles];
+};
+App.prototype.scssSources = function() {
+	if (!this.options.scss) return [];
+
+	return this.options.scss.map(function(file) {
+		return path.join(this.sourceFiles, file);
+	}, this);
+};
+
+
+// All the Wagtail apps that contain static files
+var apps = [
+	new App('wagtail/wagtailadmin', {
+		'scss': [
+			'wagtailadmin/scss/core.scss',
+			'wagtailadmin/scss/layouts/login.scss',
+			'wagtailadmin/scss/layouts/home.scss',
+			'wagtailadmin/scss/layouts/page-editor.scss',
+			'wagtailadmin/scss/layouts/preview.scss',
+			'wagtailadmin/scss/panels/rich-text.scss',
+			'wagtailadmin/scss/userbar.scss',
+			'wagtailadmin/scss/userbar_embed.scss',
+		],
+	}),
+	new App('wagtail/wagtaildocs'),
+	new App('wagtail/wagtailembeds'),
+	new App('wagtail/wagtailforms'),
+	new App('wagtail/wagtailimages', {
+		'scss': [
+			'wagtailimages/scss/add-multiple.scss',
+			'wagtailimages/scss/focal-point-chooser.scss',
+		],
+	}),
+	new App('wagtail/wagtailsnippets'),
+	new App('wagtail/wagtailusers', {
+		'scss': [
+			'wagtailusers/scss/groups_edit.scss',
+		],
+	}),
+	new App('wagtail/contrib/wagtailstyleguide', {
+		'scss': [
+			'wagtailstyleguide/scss/styleguide.scss'
+		],
+	}),
+];
+
 
 /*
  * Watch - Watch files, trigger tasks when they are modified
  */
 gulp.task('watch', ['build'], function () {
-	for (var appPath in scssFiles) {
-		gulp.watch(join(appPath, '*/scss/**'), ['styles']);
-	}
+	apps.forEach(function(app) {
+		gulp.watch(path.join(app.sourceFiles, '*/scss/**'), ['styles:sass']);
+		gulp.watch(path.join(app.sourceFiles, '*/css/**'), ['styles:css']);
+		gulp.watch(path.join(app.sourceFiles, '*/js/**'), ['javascript']);
+		gulp.watch(path.join(app.sourceFiles, '*/images/**'), ['images']);
+		gulp.watch(path.join(app.sourceFiles, '*/fonts/**'), ['fonts']);
+	});
 });
 
 
 /*
- * SASS - Compile and move sass
+ * Styles
 **/
+gulp.task('styles', ['styles:sass', 'styles:css']);
 
-gulp.task('styles', function () {
+// SASS - Compile and move sass
+gulp.task('styles:sass', function () {
 	var sass = require('gulp-sass');
 	var autoprefixer = require('gulp-autoprefixer');
 
 	// Wagtail Sass files include each other across applications,
-	// e.g. wagtailimages Sass files will include wagtailadmin/scss/mixins.scss
+	// e.g. wagtailimages Sass files will include wagtailadmin/sass/mixins.scss
 	// Thus, each app is used as an includePath.
-	var includePaths = Object.keys(scssFiles);
+	var includePaths = flatten(apps.map(function(app) { return app.scssIncludePaths() }))
 
-	// Not all files in a directory need to be compiled, so globs can not be used.
-	// Each file is named individually by joining its app path and file name.
-	var sources = Object.keys(scssFiles).reduce(function(allSources, appPath) {
-		var appSources = scssFiles[appPath];
-		return allSources.concat(appSources.map(function(appSource) {
-			return join(appPath, appSource);
-		}));
-	}, []);
+	// Not all files in a directory need to be compiled, so each app defines
+	// its own Sass files that need to be compiled.
+	var sources = flatten(apps.map(function(app) { return app.scssSources(); }));
 
 	return gulp.src(sources)
 		.pipe(sass({
@@ -78,7 +128,33 @@ gulp.task('styles', function () {
 		.pipe(gulp.dest(function(file) {
 			// e.g. wagtailadmin/scss/core.scss -> wagtailadmin/css/core.css
 			// Changing the suffix is done by Sass automatically
-			return file.base.replace('/scss/', '/css/');
+			return file.base
+				.replace('/static_src/', '/static/')
+				.replace('/scss/', '/css/');
 		}))
 		.on('error', gutil.log);
 });
+
+
+/*
+ * Simple copy tasks - these just copy files from the source to the destination,
+ * with no compilation, minification, or other intelligence
+ *
+**/
+var rename = require('gulp-rename');
+var simpleCopyTask = function(glob) {
+	return function() {
+		var sources = apps.map(function(app) {
+			return path.join(app.sourceFiles, app.appName, glob);
+		});
+
+		return gulp.src(sources, {base: '.'})
+			.pipe(renameSrcToDest())
+			.pipe(gulp.dest('.'))
+			.on('error', gutil.log);
+	};
+};
+gulp.task('styles:css', simpleCopyTask('css/**/*'));
+gulp.task('javascript', simpleCopyTask('js/**/*'));
+gulp.task('images', simpleCopyTask('images/**/*'));
+gulp.task('fonts', simpleCopyTask('fonts/**/*'));

wagtail/contrib/wagtailstyleguide/.gitignore

@@ -0,0 +1 @@
+static/

wagtail/contrib/wagtailstyleguide/static/wagtailstyleguide/css/.gitignore

@@ -1 +0,0 @@
-styleguide.css

wagtail/contrib/wagtailstyleguide/static_src/wagtailstyleguide/scss/styleguide.scss

@@ -102,4 +102,4 @@ section{
 
 .timepicker{
     height:150px;
-}
+}

wagtail/utils/setup.py

@@ -29,11 +29,11 @@ class assets(Command):
 class check_bdist_egg(bdist_egg):
 
     # If this file does not exist, warn the user to compile the assets
-    sentinel_file = 'wagtail/wagtailadmin/static/wagtailadmin/css/core.css'
+    sentinel_dir = 'wagtail/wagtailadmin/static/'
 
     def run(self):
         bdist_egg.run(self)
-        if not os.path.isfile(self.sentinel_file):
+        if not os.path.isdir(self.sentinel_dir):
             print("\n".join([
                 "************************************************************",
                 "The front end assets for Wagtail are missing.",

wagtail/wagtailadmin/.gitignore

@@ -0,0 +1 @@
+static

wagtail/wagtailadmin/static/wagtailadmin/css/.gitignore

@@ -1,9 +0,0 @@
-core.css
-layouts/home.css
-layouts/login.css
-layouts/page-editor.css
-layouts/preview.css
-normalize.css
-panels/rich-text.css
-userbar.css
-userbar_embed.css

wagtail/wagtailadmin/static/wagtailadmin/scss/fonts.scss

@@ -1,83 +0,0 @@
-@font-face {
-    font-family: "Open Sans";
-    src:url("#{$css-root}fonts/OpenSans-Light-webfont.eot");
-    src:url("#{$css-root}fonts/OpenSans-Light-webfont.eot?#iefix") format("embedded-opentype"),
-        url("#{$css-root}fonts/OpenSans-Light-webfont.ttf") format("truetype"),
-        url("#{$css-root}fonts/OpenSans-Light-webfont.svg#opensans_italic_webfont") format("svg"),
-        url("#{$css-root}fonts/OpenSans-Light-webfont.woff") format("woff");
-    font-weight: 300;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: "Open Sans";
-    src:url("#{$css-root}fonts/OpenSans-Regular-webfont.eot");
-    src:url("#{$css-root}fonts/OpenSans-Regular-webfont.eot?#iefix") format("embedded-opentype"),
-        url("#{$css-root}fonts/OpenSans-Regular-webfont.ttf") format("truetype"),
-        url("#{$css-root}fonts/OpenSans-Regular-webfont.svg#opensans_regular_webfont") format("svg"),
-        url("#{$css-root}fonts/OpenSans-Regular-webfont.woff") format("woff");
-    font-weight: 400;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: "Open Sans";
-    src:url("#{$css-root}fonts/OpenSans-Semibold-webfont.eot");
-    src:url("#{$css-root}fonts/OpenSans-Semibold-webfont.eot?#iefix") format("embedded-opentype"),
-        url("#{$css-root}fonts/OpenSans-Semibold-webfont.ttf") format("truetype"),
-        url("#{$css-root}fonts/OpenSans-Semibold-webfont.svg#opensans_semibold_webfont") format("svg"),
-        url("#{$css-root}fonts/OpenSans-Semibold-webfont.woff") format("woff");
-    font-weight: 600;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: "Open Sans";
-    src:url("#{$css-root}fonts/OpenSans-Bold-webfont.eot");
-    src:url("#{$css-root}fonts/OpenSans-Bold-webfont.eot?#iefix") format("embedded-opentype"),
-        url("#{$css-root}fonts/OpenSans-Bold-webfont.ttf") format("truetype"),
-        url("#{$css-root}fonts/OpenSans-Bold-webfont.svg#opensans_bold_webfont") format("svg"),
-        url("#{$css-root}fonts/OpenSans-Bold-webfont.woff") format("woff");
-    font-weight: 700;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: "Bitter";
-    src: url("#{$css-root}fonts/Bitter-Regular.eot");
-    src: url("#{$css-root}fonts/Bitter-Regular.eot?#iefix") format("embedded-opentype"),
-       url("#{$css-root}fonts/Bitter-Regular.ttf") format("truetype"),
-       url("#{$css-root}fonts/Bitter-Regular.svg#Bitter-Regular") format("svg"),
-       url("#{$css-root}fonts/Bitter-Regular.woff") format("woff");
-    font-weight:400;
-    font-style:normal;
-}
-
-@font-face {
-    font-family: "Bitter";
-    src: url("#{$css-root}fonts/Bitter-Bold.eot");
-    src: url("#{$css-root}fonts/Bitter-Bold.eot?#iefix") format("embedded-opentype"),
-       url("#{$css-root}fonts/Bitter-Bold.ttf") format("truetype"),
-       url("#{$css-root}fonts/Bitter-Bold.svg#Bitter-Bold") format("svg"),
-       url("#{$css-root}fonts/Bitter-Bold.woff") format("woff");
-    font-weight:700;
-    font-style:normal;
-}
-
-@font-face {
-    font-family: "wagtail";
-    src:url("#{$css-root}fonts/wagtail.eot");
-    src:url("#{$css-root}fonts/wagtail.eot?#iefix") format("embedded-opentype"),
-        url("#{$css-root}fonts/wagtail.ttf") format("truetype"),
-        url("#{$css-root}fonts/wagtail.svg#wagtail") format("svg"),
-        url("#{$css-root}fonts/wagtail.woff") format("woff");
-    font-weight: normal;
-    font-style: normal;
-}
-/* fix to make chrome on windows use svg, which renders better */
-@media screen and (-webkit-min-device-pixel-ratio:0) {
-    @font-face {
-        font-family: "wagtail";
-        src: url("#{$css-root}fonts/wagtail.svg#wagtail") format("svg");
-    }
-}