Hosting Drulma depenencies locally + minimizing CSS/JS

README.md

How to host all drulma dependencies locally + minimize the CSS/JS

The steps in this guide enabled me to avoid using any CDNs and shrink my bulma CSS to just 19 KB. It also shrinks BulmaJS from 100+ Kb to ~20 Kb with a custom fork of BulmaJS that only builds the navbar, file, and dropdown components.

First, we have to create a subtheme of drulma.

Next, we override the drulma libraries.

Add the following lines to mydrulmasubtheme.info.yml:

libraries-override:
  # drulma
  drulma/global: false
  drulma/drulmajs: mydrulmasubtheme/drulmajs
  drulma/bulmajs: mydrulmasubtheme/bulmajs
  drulma/bulma: false

Next, mydrulmasubtheme.libraries.yml:

global:
  css:
    theme:
      css/style.min.css: {}

bulmajs:
  js:
    js/bulma.min.js: {} # only includes dropdown, file, navbar

drulmajs:
  js:
    js/drulma.min.js: {}
  dependencies:
    - mydrulmasubtheme/bulmajs
    - core/drupal

The js files are the three components used by Drumla. Ideally, they would be combined into a single file as described in the bulmajs documentation, but I don't know how to do that yet. (VizuaaLOG/BulmaJS#100)

Next, I installed bulma with npm. You will need to install npm somehow; I won't document it here.

You can use the package.json below as an example.

Next make a style.scss file and put it in mydrulmasubtheme/sass/bulma_sass.

It could look like this:

@charset "utf-8";

// @import "node_modules/bulma/bulma.sass";
// import components individually
// TODO: eliminate unneeded components
@import "bulma_sass/utilities/_all";
@import "bulma_sass/base/_all";
@import "bulma_sass/elements/_all";
@import "bulma_sass/form/_all";
@import "bulma_sass/components/_all";
@import "bulma_sass/grid/_all";
@import "bulma_sass/layout/_all";

@import "../../contrib/drulma/css/bulma-overrides";
@import "../../contrib/drulma/css/drupal-overrides";
@import "../../contrib/drulma/css/tweaks";

To get this to work, you need to symlink the bulma sass directory installed by node (ln -s ../node_modules/bulma/sass/ bulma_sass) or adjust the path accordingly.

Then you can compile with Gulp.

An example gulpfile is included below. This gulpfile was modified from the one provided with the Bootstrap SASS theme. To use the gulpfile, you will need to create an src directory in your drulma subtheme and then symlink the drulma_js (ln -s ../../../conrib/drulma/js drulma_js).

This gulpfile uses UnCSS, which automatically removes CSS that is not used on the site. This makes the stylesheet very small but it means you have to have a style guide on your site; otherwise, all the CSS will be stripped. You should configure uncss to go to at least one page of each content type, etc. on your website.

You can also use the Simple Styleguide module to easily generate a basic style guide for your site.

gulpfile.js

let gulp = require('gulp'),
  sass = require('gulp-sass'),
  sourcemaps = require('gulp-sourcemaps'),
  cleanCss = require('gulp-clean-css'),
  rename = require('gulp-rename'),
  postcss = require('gulp-postcss'),
  autoprefixer = require('autoprefixer'),
  browserSync = require('browser-sync').create(),
  cssnano = require('gulp-cssnano'),
  purge = require('gulp-css-purge'),
  uncss= require('uncss'),
  minify = require('gulp-minify'); // for js
const paths = {
  scss: {
    src: './scss/style.scss',
    dest: './css',
    watch: './scss/**/*.scss',
  },
  js: {
    bulmajs: 'node_modules/@vizuaalog/bulmajs/dist/bulma.js',
    drulmajs: 'src/drulma_js/*.js',
    dest: './js'
  }
}

const uncss_options = {
  html: [
    // homepage
    'https://www.example.com',
    'https://www.example.com/simple-styleguide',
    'https://www.example.com/other-pages',
    'https://www.example.com/user/login'
  ],
  // https://www.homebrik.com/posts/2019-10-30-shaking-bulma-in-eleventy/
  ignore: [
    /\.navbar-menu.is-active/,
    /\.navbar-burger/
  ]
}

const autoprefixer_options = {
  browsers: [
    'Chrome >= 35',
    'Firefox >= 38',
    'Edge >= 12',
    'Explorer >= 10',
    'iOS >= 8',
    'Safari >= 8',
    'Android 2.3',
    'Android >= 4',
    'Opera >= 12'
  ]
}

// Compile sass into CSS & auto-inject into browsers
function styles () {
  return gulp.src([paths.scss.src])
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(cssnano()) // minify CSS
    .pipe(postcss([require('autoprefixer')(autoprefixer_options)]))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(paths.scss.dest))
    .pipe(cleanCss())
    .pipe(postcss([require('postcss-uncss')(uncss_options)]))
    .pipe(purge({
      trim : true,
      shorten : true,
      verbose : true
    }))
    .pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest(paths.scss.dest))
    .pipe(browserSync.stream())
}

// Move the javascript files into our js folder
function js () {
return gulp.src([paths.js.bulmajs, paths.js.drulmajs])

    .pipe(minify({ ext: { min: '.min.js' }, noSource: true}))
    .pipe(gulp.dest(paths.js.dest))
    .pipe(browserSync.stream())
}

// Static Server + watching scss/html files
function serve () {
  browserSync.init({
    proxy: 'https://mysite.lndo.site',
  })

  gulp.watch([paths.scss.watch], styles).on('change', browserSync.reload)
}

const build = gulp.series(styles, gulp.parallel(js, serve))

exports.styles = styles
exports.js = js
exports.serve = serve
exports.default = build

package.json

{
  "name": "drulma_sass",
  "version": "1.0.0",
  "description": "Drulma SASS implementation",
  "main": "sass/drulma.scss",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 2"
  },
  "license": "MIT",
  "dependencies": {},
  "devDependencies": {
    "@vizuaalog/bulmajs": "github:ptmkenny/BulmaJS#drulma",
    "browser-sync": "^2.24.7",
    "bulma": "^0.8.2",
    "del": "^3.0.0",
    "gulp": "^4.0.0",
    "gulp-autoprefixer": "^4.1.0",
    "gulp-clean-css": "3.9.4",
    "gulp-concat": "^2.6.1",
    "gulp-css-purge": "^3.0.9",
    "gulp-cssnano": "^2.1.3",
    "gulp-html-replace": "^1.6.2",
    "gulp-minify": "^3.1.0",
    "gulp-postcss": "^8.0.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^4.0.1",
    "gulp-scss-lint": "^1.0.0",
    "gulp-sourcemaps": "^2.6.4",
    "gulp-uglify": "^3.0.0",
    "merge-stream": "^1.0.1",
    "postcss-uncss": "^0.17.0",
    "uncss": "^0.17.3"
  }
}