Gulpfile to use with Elixir and Foundation Sites

  • Hi all, just getting started with my first AsgardCMS project.

    I'd like to set up my workflow properly, so that my theme's sass files are compiled, and then published, both as part of a manual run, and under gulp watch. This is what I have so far...

    var gulp = require('gulp');
    var $    = require('gulp-load-plugins')();
    var shell = require('gulp-shell');
    var elixir = require('laravel-elixir');
    var themeInfo = require('./theme.json');
    var sassPaths = [
    var Task = elixir.Task;
    elixir.extend('stylistPublish', function() {
      new Task('stylistPublish', function() {
        return gulp.src("").pipe(shell("php ../../artisan stylist:publish " +;
    elixir(function(mix) {
            includePaths: sassPaths,
            outputStyle: 'compressed' // if css compressed **file size**
              .on('error', $.sass.logError))
            browsers: ['last 2 versions', 'ie >= 9']

    .. but when I do gulp watch the process runs as though I has run it manually and exits i.e. it doesn't continue watching the files.

    Any ideas? Thanks in advance.

    Also, for what its worth, this is my theme's directory structure. if you spot anything wrong please do let me know...

      - assets
          - css
          - js
      - bower_components
      - etc
      - node_modules
      - scss
      - views

  • admin

    Hello and welcome!

    To make sure we're talking about the same thing, make sure you're running this inside your Theme's folder.

    Next, since a recent release in asgardcms v2, the built-in themes no use the newer and maintained laravel mix over the old laravel elixir.

    You can read more on the laravel docs, or view an example on the Flatly theme.

  • @nWidart
    Hi, thanks. Yes this is being run inside my theme's directory.

    I have updated the workflow to use mix now, and this is my webpack.mix.js...

    let mix = require('laravel-mix');
    const WebpackShellPlugin = require('webpack-shell-plugin');
    const themeInfo = require('./theme.json');
    var sassPaths = [
    mix.sass('resources/scss/app.scss', 'assets/css', { includePaths: sassPaths});
     * Concat scripts
    ], 'assets/js/all.js');
     * Copy Font directory
     * Publishing the assets
        plugins: [
            new WebpackShellPlugin({onBuildEnd:['php ../../artisan stylist:publish ' +]})

    All works fine when i do npm run dev, but if i do npm run watch then it seems the artisan stylist:publish command isn't being executed.

    Any ideas? Thanks again.

  • admin

    Hm strange I don't recall having this issue.

    I'm not really good at frontend though, maybe else could chime in. @motchju

  • I had a look into what artisan stylist:publish actually does - am I right in thinking it just copies files from Themes/mytheme/assets to public/themes/mytheme?

    I've updated my webpack.mix.js so that it outputs files straight to public/themes/mytheme, and have commented out the WebpackShellPlugin code. Everything now works fine and dandy, i just hope it's not skipping an important step?!

  • admin

    Yup that's right it only does a copy.

    Good idea, I'll probably do something similar at some point for themes / modules as well.

Log in to reply

Looks like your connection to AsgardCms was lost, please wait while we try to reconnect.