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',
]);
};```
Written by Laura Davis-Robeson
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Compass
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#