Grunt config for Pattern Lab

config.ini

/*
 * Configuration Options for Pattern Lab
 * If config.ini doesn't exist Pattern Lab will try to create a new version
 */

v  = "0.7.12"

// file extensions to ignore when building or watching the source dir, separate with a comma
ie = "scss,DS_Store,ruby-version,tmp,map"

// directories and files to ignore when building or watching the source dir, separate with a comma
id = ".sass-cache,sass,config.rb,Gemfile,Gemfile.lock,no-mq.css,admin_menu.css,admin_menu_toolbar.css,shortcut.css,toolbar.css,sidebar.css,three-column.css,pattern-lab.css"

grunt-config-pattern-lab.md

• use PL's native Watch and Live Reload feature to watch for markup and CSS updates & regenerate
• separate task for Sass changes
• optional task to copy (rsync) public files to theme directory
• config.ini file mods: ignore sourcemap files and prevent live reload from triggering until last CSS file is compiled (specific to Gesso theme)

Gruntfile.js

module.exports = function (grunt) {

  // Load grunt tasks automatically
  require('load-grunt-tasks')(grunt);

  // Time how long tasks take. Can help when optimizing build times
  require('time-grunt')(grunt);

  // Define the configuration for all the tasks
  grunt.initConfig({

    // Compiles Sass to CSS and generates debug files if requested
    compass: {
      options: {
        assetCacheBuster: false,
        cssDir: 'css',
        debugInfo: true,
        fontsDir: 'fonts',
        force: true,
        generatedImagesDir: 'images',
        imagesDir: 'images',
        javascriptsDir: 'js',
        noLineComments: false,
        outputStyle: 'expanded',
        raw: 'Sass::Script::Number.precision = 10\n',
        relativeAssets: false,
        require: ['breakpoint', 'sass-globbing', 'singularitygs', 'singularity-extras'],
        sassDir: 'source/sass',
        sourcemap: true,
      },
      patternlab: {
        options: {
          // settings here override config.rb
          // http://compass-style.org/help/documentation/configuration-reference
          basePath: 'patternlab/',
          bundleExec: true,  // use Bundler specified versions
          config: 'config.rb',  // use Compass config file for most settings
          outputStyle: 'expanded',
          sourcemap: true,
        },
      },
    },

    // Watch for changes & run each task asynchronously
    concurrent: {
      patternlab: {
        tasks: [
          'shell:patternlabWatchReload',
          'watch'
        ],
        options: {
          logConcurrentOutput: true
        }
      },
    },

    shell: {
      // Copy Pattern Lab's public directory to theme directory
      patternlabCopy: {
        command:
          'rsync -r public/* ../public/sites/all/themes/gesso/pattern-lab'
      },
      // Generate patterns & use native watch/live reload feature
      patternlabWatchReload: {
        command: [
          'php patternlab/core/builder.php -wr',
        ].join('&&')
      },
    },

    // Watch files for changes and runs tasks based on the changed files
    watch: {
      patternlabSass: {
        files: ['patternlab/source/sass/**/*.scss'],
        tasks: ['compass:patternlab'],
        options: {
          //livereload: true,
        },
      }
    },

  });

  grunt.registerTask('patternlab', [
    'concurrent:patternlab',
  ]);

};