Browsersync, Gulp, Docker4Drupal and my new theme

This website is using the Magazin Lite theme. It’s a nice looking theme, but I don’t like the way it's structured and coded. There are just too many things that slow down the page load, so I need a new theme.

For example, magazine_lite.libraries.yml has more than 1000 lines. That's way too many libraries in my opinion. There are 9 subfolders in the JS folder, with who knows how many javascript files.

So, I decided that I need a new theme. I need something that looks nice and at the same time minimalistic. I didn’t find anything like this on drupal.org or anywhere else, so I will create a new theme from scratch.

This is also a good opportunity to test the page load time, so here are some speed tests.

To be able to work efficiently on a theme, without reloading the page each time I change something in my Sass files I’ll use Browsersync. For local development, I’m using Docker4Drupal, and to make all this work nice together I created a gulp file that looks like this:

var gulp = require('gulp');
var sass = require('gulp-sass');
var cleanCSS = require('gulp-clean-css');
var sassGlob = require('gulp-sass-glob');
var browserSync = require('browser-sync').create();

gulp.task('build:sass', function () {
  return gulp
    .src('css/src/**/*.scss')
    .pipe(sassGlob())
    .pipe(sass({}).on('error', sass.logError))
    .pipe(cleanCSS())
    .pipe(gulp.dest('css/dist/'))
    .pipe(browserSync.stream());
});

gulp.task('browser:sync', function () {
  browserSync.init({
    open: false,
    proxy: {
      target: 'http://nginx'
    }
  });

  return gulp
    .watch('css/src/**/*.scss', gulp.series('build:sass'));
});

gulp.task('default', gulp.series('build:sass', 'browser:sync'));

As you can see I don't plan to write Javascript. There are no JS related Gulp tasks.

You also have to enable the node service in docker-compose.yml and update the working_dir path to point to your theme directory. By default, this service is commented out. The node service will install all required packages and then run the default Gulp task.

node:
    image: wodby/node:$NODE_TAG
    container_name: "${PROJECT_NAME}_node"
    working_dir: /var/www/html/web/themes/custom/gn2021
    ports:
      - "3000:3000"
      - "3001:3001"
    labels:
      - 'traefik.backend=${PROJECT_NAME}_node'
      - 'traefik.port=3000'
      - 'traefik.frontend.rule=Host:${PROJECT_BASE_URL}'
    expose:
      - "3000"
    volumes:
      - ./:/var/www/html
    command: sh -c 'yarn install && yarn run gulp'

Soon after you execute docker-compose up -d command, you'll be able to see your browsersync enabled site at: drupal.docker.localhost:3000

This is how my package.json file looks like. As you can see I’m using only a few packages, nothing fancy here.

{
  "name": "GN2021",
  "author": "Goran Nikolovski",
  "version": "1.0.0",
  "private": true,
  "devDependencies": {
    "gulp": "^4.0.0",
    "gulp-sass": "^4.0.0",
    "gulp-clean-css": "^4.3.0",
    "gulp-sass-glob": "^1.1.0",
    "browser-sync": "^2.26.0"
  }
}

As soon as I finish my new theme I’ll post the speed tests. It’ll be interesting to see how much faster my site will be.

I was also thinking to make my new theme open source, I'm not yet sure about that.