Last Updated: February 25, 2016
·
1.36K
· ldavisrobeson

Grunt config for Pattern Lab: Live Reload, watches Sass & HTML files for changes, uses Compass to compile CSS

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: {
          basePath: 'patternlab/',
        },
      },
    },

    // Run some tasks in parallel to speed up the build process
    concurrent: {
      patternlab: {
        tasks: [
          'shell:patternlabStart',
          'watch'
        ],
        options: {
          logConcurrentOutput: true
        }
      }
    },

    shell: {
      patternlabStart: {
        command: [  // generate patterns & enable live reloading
          'php patternlab/core/builder.php -gp',
          'php patternlab/core/autoReloadServer.php'
        ].join('&&')
      },
      patternlabRegenerate: {
        command: [  // regenerate patterns
          'php patternlab/core/builder.php -gp',
        ].join('&&')
      }
    },

    // Watch files for changes and runs tasks based on the changed files
    watch: {
      gruntfile: {
        files: ['Gruntfile.js']
      },
      html: {
        files: ['patternlab/source/_patterns/**/*.mustache', 'patternlab/source/_patterns/**/*.json', 'patternlab/source/_data/*.json'],
        tasks: ['shell:patternlabRegenerate'],
        options: {
          livereload: true,
        }
      },
      patternlab: {
        files: ['patternlab/source/sass/**/*.scss'],
        tasks: ['compass:patternlab'],
        options: {
          livereload: true,
        },
      }
    },

  });

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

};```