How to integrate Gulp with SilverStripe

Questions
1

Silverstripe Version: 4.12

Question:

I have a bootstrap 5 template I’m keen to integrate with SilverStripe. It comes all set up with gulp and I can customise it with scss etc. It currently takes static html pages and will scan those for css js use etc and create .min files from what is used. This all works fine, but I’d like to be able to use this functionality on the SilverStripe .ss files (rather than static html), just not sure how to do this as I’m very new to gulp.

Any advice on how to best use gulp with SilverStripe would be much appreciated, or at least some tops on where to start looking and how to best set up folder structure to work for both.

3

@GuySartorelli thanks for the feedback. In the meantime I’ve managed to get this working…

In response to your questions:

  1. actually a bit of both - the Bootstrap theme I have is already set up and optimised for the quickest load time using gulp, so I’m keen to make use of that feature. A motivator was also to make use of the gulp browser-sync.
  2. I’ve managed to set gulp up to scan .ss files instead of .html files, was actually pretty simple in the end. It picks up every .ss file in my templates directory, so form field and email styles etc all get scanned for css/js/asset etc usage. I added a dummy .ss page with all the required .js and .css files I have in PageController requirements to ensure they’re added in by gulp. Then .env and PageController are set up to use dev version or live version of theme (which gulp compiles), so I can easily switch between them and check the optimised resources are working correctly too. And best bit is that when I make any change to a .ss file or .scss gulp will automatically refresh the browser. The one bit I’m missing is what command to put in composer.json to tell it what resources to expose in dev mode vs live mode - is there something like “expose-dev” or only “expose”?

For anyone else interested, to get gulp browser-sync working, you need gulp connect-php

To use it with Browser Sync:

var gulp = require('gulp'),
    connect = require('gulp-connect-php'),
    browserSync = require('browser-sync');
 
gulp.task('connect-sync', function() {
  connect.server({}, function (){
    browserSync({
      proxy: '127.0.0.1:8000' // eg. 'http://localhost:8888 if using MAMP'
    });
  });
 
  gulp.watch('**/*.php').on('change', function () {
    browserSync.reload();
  });
});
2

This is gonna be a hard road - I think you’ll find in the end it’s probably not worthwhile especially as I’m not sure what problem you’d be solving with this… but here’s some things to consider:

  1. Are you just trying to build min files of js/css/etc that’s included in your theme or your module - or do you want to create some file that combines all of the required js from the page into one file? If the former… it’s probably easier to just build these out in a more traditional way. If the latter… what specific benefit do you foresee this giving you? Specifically with http 2.0, it’s actually more efficient to keep these files separate.
  2. From what you’ve said above, gulp is gonna be looking through html files to identify what css/js is used. To use that as-is you’ll need to render out either every page on your site, or else find out what permutations of content include their own js/css and render out only dummy pages with those permutations. This is easier if you’re only including your own theme/module resources since you are the one declaring when those resources should be included.