Menu

Sherri Flemings

Software Swiss Army Knife • Textile Hobbyist • Gamer • Foodie •

Creating a theme for AsgardCMS

Before I create a theme I like to get the asset pipeline set up and working. I had expected this to be one or two commands away from being done since AsgardCMS includes scaffolding and docs for creating a theme. Unfortunately the process wasn't as automated as I had hoped, but luckily it was pretty easy to add in the missing bits I needed. 

Use Elixir

Since I'm used to using Laravel Elixir I wanted to pull it into my theme. I just grabbed the default gulpfile.js and package.json that comes with a fresh install of Laravel. AsgardCMS provided a little snippet to help publish a theme when using Elixir, but it didn't work for me so I made a few edits.

gulpgile.js


var gulp = require("gulp");
var shell = require('gulp-shell');
var elixir = require('laravel-elixir');
var themeInfo = require('./theme.json');

// Configure Elixir to point to paths relative to the theme folder
elixir.config.assetsPath = 'resources';
elixir.config.publicPath = 'assets';
elixir.config.appPath = '../../app';

elixir.extend('stylistPublish', function( theme ){

    new elixir.Task('stylistPublish', function() {
        return gulp.src('').pipe(shell([
            'php ../../artisan stylist:publish ' + theme
        ]));
    });
});


elixir(function (mix) {

    /**
     * Compile less
     */
    mix.less([
        "app.less", '.'
    ])
        .stylistPublish( themeInfo.name );

});

package.json


{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "gulp": "*",
    "laravel-elixir": "*"
  }
}

Now I can just use gulp the way I normally do with Elixir and all my theme files will get published to the correct locations to work with AsgardCMS.

Extending the Workshop Module

I added some functionality to the Workshop Module which adds an option to include Elixir as part of the ThemeScaffold. It basically just copies in the above 2 files so you don't have to do it manually. Here's a short screenshare of it in action

Unfortunately I ran into a bunch of issues with PHP Coding Standards Fixer so my PR failed the test :( Hopefully I'll have time to get back to it and troubleshoot that issue. 

Time to finish adding my CSS/JS and get this added to my build script.

comments powered by Disqus