Add CSS minification and source maps for Sass

CHANGELOG.txt

@@ -5,6 +5,7 @@ Changelog
 ~~~~~~~~~~~~~~~~~
 
  * Custom document model is now documented (Emily Horsman)
+ * Use minified versions of CSS in the admin by adding minification to the front-end tooling (Thibaud Colas)
  * Fix: "Open Link in New Tab" on a right arrow in page explorer should open page list (Emily Horsman)
  * Fix: Using `order_by_relevance=False` when searching with PostgreSQL now works (Mitchel Cabuloy)
  * Fix: Inline panel first and last sorting arrows correctly hidden in non-default tabs (Matt Westcott)

circle.yml

@@ -14,4 +14,4 @@ test:
     - npm run lint:css
     - python -u runtests.py
     - npm run test:unit:coverage -- --runInBand
-    - npm run build
+    - npm run dist

docs/releases/1.13.rst

@@ -15,6 +15,7 @@ Other features
 ~~~~~~~~~~~~~~
 
  * :doc:`Custom document model </advanced_topics/documents/custom_document_model>` is now documented (Emily Horsman)
+ * Use minified versions of CSS in the admin by adding minification to the front-end tooling (Thibaud Colas)
 
 
 Bug fixes

gulpfile.js/config.js

@@ -41,5 +41,7 @@ var apps = [
 module.exports = {
     apps: apps,
     srcDir: srcDir,
-    destDir: destDir
-}
+    destDir: destDir,
+    // Determines whether the pipeline is used in production or dev mode.
+    isProduction: process.env.NODE_ENV === 'production',
+};

gulpfile.js/lib/rename-src-to-dest.js

@@ -0,0 +1,19 @@
+var rename = require('gulp-rename');
+var config = require('../config');
+var normalizePath = require('../lib/normalize-path');
+
+/**
+ * Returns a configured gulp-rename to pipe from asset sources to dest.
+ * Usage: .pipe(renameSrcToDest())
+ */
+var renameSrcToDest = function(log) {
+    return rename(function(filePath) {
+        if (log) console.log(filePath.dirname + '/' + filePath.basename + filePath.extname);
+        filePath.dirname = normalizePath(filePath.dirname).replace(
+            '/' + config.srcDir + '/',
+            '/' + config.destDir + '/');
+        if (log) console.log(filePath.dirname);
+    });
+};
+
+module.exports = renameSrcToDest;

gulpfile.js/lib/simplyCopy.js

@@ -3,23 +3,13 @@ var rename = require('gulp-rename');
 var gutil = require('gulp-util');
 var path = require('path');
 var config = require('../config');
-var normalizePath = require('../lib/normalize-path');
+var renameSrcToDest = require('../lib/rename-src-to-dest');
 
 /*
  * Simple copy task - just copoes files from the source to the destination,
  * with no compilation, minification, or other intelligence
  *
  */
- 
-var renameSrcToDest = function() {
-    return rename(function(filePath) {
-        filePath.dirname = normalizePath(filePath.dirname).replace(
-            '/' + config.srcDir + '/',
-            '/' + config.destDir + '/');
-    });
-};
-
-
 var simpleCopyTask = function(glob) {
     return function() {
         var sources = config.apps.map(function(app) {

gulpfile.js/tasks/styles.js

@@ -1,9 +1,14 @@
+var path = require('path');
 var gulp = require('gulp');
 var sass = require('gulp-sass');
+var cssnano = require('gulp-cssnano');
+var sourcemaps = require('gulp-sourcemaps');
+var size = require('gulp-size');
 var config = require('../config');
 var autoprefixer = require('gulp-autoprefixer');
 var simpleCopyTask = require('../lib/simplyCopy');
 var normalizePath = require('../lib/normalize-path');
+var renameSrcToDest = require('../lib/rename-src-to-dest');
 var gutil = require('gulp-util');
 
 var flatten = function(arrOfArr) {
@@ -12,10 +17,37 @@ var flatten = function(arrOfArr) {
     }, []);
 };
 
-gulp.task('styles', ['styles:sass', 'styles:css']);
+var autoprefixerConfig = {
+    browsers: ['last 3 versions', 'ie 11'],
+    cascade: false,
+};
 
-gulp.task('styles:css', simpleCopyTask('css/**/*'));
+var cssnanoConfig = {
+    discardUnused: {
+        fontFace: false,
+    },
+};
 
+gulp.task('styles', ['styles:sass', 'styles:css', 'styles:assets']);
+
+// Copy all assets that are not CSS files.
+gulp.task('styles:assets', simpleCopyTask('css/**/!(*.css)'));
+
+gulp.task('styles:css', function() {
+    var sources = config.apps.map(function(app) {
+        return path.join(app.sourceFiles, app.appName, 'css/**/*.css');
+    });
+
+    return gulp.src(sources, {base: '.'})
+        .pipe(config.isProduction ? cssnano(cssnanoConfig) : gutil.noop())
+        .pipe(autoprefixer(autoprefixerConfig))
+        .pipe(renameSrcToDest())
+        .pipe(size({ title: 'Vendor CSS' }))
+        .pipe(gulp.dest('.'))
+        .on('error', gutil.log);
+});
+
+// For Sass files,
 gulp.task('styles:sass', function () {
     // Wagtail Sass files include each other across applications,
     // e.g. wagtailimages Sass files will include wagtailadmin/sass/mixins.scss
@@ -27,16 +59,17 @@ gulp.task('styles:sass', function () {
     var sources = flatten(config.apps.map(function(app) { return app.scssSources(); }));
 
     return gulp.src(sources)
+        .pipe(config.isProduction ? gutil.noop() : sourcemaps.init())
         .pipe(sass({
             errLogToConsole: true,
             includePaths: includePaths,
             outputStyle: 'expanded'
         }).on('error', sass.logError))
-        .pipe(autoprefixer({
-            browsers: ['last 3 versions', 'ie 11'],
-            cascade: false
-        }))
-        .pipe(gulp.dest(function(file) {
+        .pipe(config.isProduction ? cssnano(cssnanoConfig) : gutil.noop())
+        .pipe(autoprefixer(autoprefixerConfig))
+        .pipe(size({ title: 'Wagtail CSS' }))
+        .pipe(config.isProduction ? gutil.noop() : sourcemaps.write())
+        .pipe(gulp.dest(function (file) {
             // e.g. wagtailadmin/scss/core.scss -> wagtailadmin/css/core.css
             // Changing the suffix is done by Sass automatically
             return normalizePath(file.base)

package.json

@@ -51,8 +51,10 @@
     "eslint-plugin-react": "^5.2.2",
     "gulp": "^3.9.1",
     "gulp-autoprefixer": "~3.0.2",
+    "gulp-cssnano": "^2.1.2",
     "gulp-rename": "^1.2.2",
     "gulp-sass": "^3.1.0",
+    "gulp-size": "^2.1.0",
     "gulp-sourcemaps": "~1.5.2",
     "gulp-util": "~2.2.14",
     "jest": "^20.0.4",
@@ -81,6 +83,7 @@
   "scripts": {
     "postinstall": "npm --prefix client install",
     "build": "gulp build; webpack --config ./client/webpack/prod.config.js",
+    "dist": "NODE_ENV=production npm run build",
     "watch": "webpack --config ./client/webpack/dev.config.js & gulp watch",
     "start": "npm run watch",
     "lint:js": "eslint --max-warnings 16 ./client",

wagtail/utils/setup.py

@@ -16,7 +16,7 @@ class assets_mixin(object):
 
     def compile_assets(self):
         try:
-            subprocess.check_call(['npm', 'run', 'build'])
+            subprocess.check_call(['npm', 'run', 'dist'])
         except (OSError, subprocess.CalledProcessError) as e:
             print('Error compiling assets: ' + str(e))  # noqa
             raise SystemExit(1)