Grunt template. More documentation coming soon.
Place in root directory and run
npm install --save-dev
{
"name": "Caron",
"version": "0.0.0",
"description": "",
"repository": {
"type": "git",
"url": "git@allengerritsen.git.beanstalkapp.com:/allengerritsen/caron-org.git"
},
"author": "",
"dependencies": {
"grunt": "*",
"grunt-contrib-concat": "*",
"grunt-contrib-jshint": "*",
"grunt-contrib-uglify": "*",
"grunt-contrib-watch": "*",
"grunt-contrib-imagemin": "*",
"grunt-text-replace": "*",
"grunt-notify": "*",
"grunt-newer": "*",
"jit-grunt": "*",
"time-grunt": "*",
"node-sass": "*",
"grunt-sass": "*",
"grunt-autoprefixer": "^2.0.0",
"grunt-contrib-cssmin": "^0.10.0",
"grunt-browser-sync": "^1.5.3"
}
}
module.exports = function (grunt) {
"use strict";
// -------------------------------------------------------------------------
// #### Load plugins as needed ####
// Using a 'just in time' approach -- meaning: only load plugins when they
// are needed -- this will automatically find, then load, any and all
// plugins that are needed by the task currently being executed. It will
// scan the devDependencies object, in package.json, and match any of the
// following patterns automatically:
// - grunt-contrib-[task name]
// - grunt-[task name]
// - [task name]
// For any [task name] / [plugin name] pair that can't be found by the above
// patterns, you can find them manually by adding them as a second argument
// using the following pattern:
// - task name: 'plugin name'
// We've done that, below, with "replace: 'grunt-text-replace'", as it does
// not conform to the three patterns that are matched automatically.
// https://github.com/shootaroo/jit-grunt
// -------------------------------------------------------------------------
require('jit-grunt')(grunt, {
replace: 'grunt-text-replace'
});
// -------------------------------------------------------------------------
// #### Display task execution time ####
// This module will display elapsed execution time of grunt tasks when they
// are finished, right on the command line. It's useful for keeping tabs on
// the performance of your Grunt configuration.
// https://github.com/sindresorhus/time-grunt
// -------------------------------------------------------------------------
// require('time-grunt')(grunt);
// -------------------------------------------------------------------------
// #### Project configuration ####
// -------------------------------------------------------------------------
grunt.initConfig({
// ---------------------------------------------------------------------
// #### Variables ####
// ---------------------------------------------------------------------
sassPath: '_sites/Caron/includes/scss/',
cssPath: '_sites/Caron/includes/css/',
jsPath: '_sites/Caron/includes/js/',
bowerPath: '_sites/Caron/includes/vendor/',
imgPath: '_sites/Caron/includes/images/',
imgFileTypes: 'gif,jpg,jpeg,png',
docFileTypes: '.html,.aspx,.ascx',
// ---------------------------------------------------------------------
// #### Get data from package.json ####
// Get data from the package.json file and assign it to a pkg variable.
// ---------------------------------------------------------------------
pkg: grunt.file.readJSON('package.json'),
// ---------------------------------------------------------------------
// #### Task configuration ####
// ---------------------------------------------------------------------
// Task: Sass compiling.
sass: {
// Task-wide options.
options: {
includePaths: ['<%= bowerPath %>foundation/scss']
},
// Target: development.
dev: {
// Target-specific options.
options: {
style: "expanded",
lineNumbers: true,
sourceMap: true
},
// Source file(s), in the order we want to compile them.
src: '<%= sassPath %>style.scss',
// Destination file.
dest: '<%= cssPath %>style.css'
},
// Target: production.
prod: {
// Target-specific options.
options: {
style: "compressed"
},
// Source file(s), in the order we want to compile them.
src: '<%= sassPath %>style.scss',
// Destination file.
dest: '<%= cssPath %>style.css'
}
},
autoprefixer: {
options: {
map: true
},
dist: {
src: '<%= cssPath %>style.css',
dest: '<%= cssPath %>style-prefixed.css'
}
},
// Task: JavaScript hinting.
// https://github.com/gruntjs/grunt-contrib-jshint
jshint: {
// Task-wide options.
options: {},
// Target: all.
all: {
// Target-specific options.
options: {},
// Source file(s), in the order we want to hint them.
src: [
'Gruntfile.js',
'<%= jsPath %>*.js',
'!<%= jsPath %>*.min.js', // ...but not minified files.
'!<%= jsPath %>all.js' // ...but not the concatenated file.
]
}
},
// Task: JavaScript file concatenation.
// https://github.com/gruntjs/grunt-contrib-concat
concat: {
// Task-wide options.
options: {},
// Target: all.
js: {
// Target-specific options.
options: {
// Separate each concatenated script with a semicolon.
separator: ';',
stripBanners: true
},
// Source file(s), in the order we want to concatenate them.
src: [
'<%= bowerPath %>foundation/js/foundation.min.js',
'<%= bowerPath %>slick-carousel/slick/slick.min.js',
'<%= bowerPath %>velocity/velocity.min.js',
'<%= jsPath %>*.js',
'!<%= jsPath %>*.min.js', // ...but not minified files.
'!<%= jsPath %>all.js' // ...but not the concatenated file.
],
// Destination file.
dest: '<%= jsPath %>all.js',
// Warn if a given file is missing or invalid.
nonull: true
},
vendor: {
options: {
sourceMap: true
},
src: [
'<%= bowerPath%>slick-carousel/slick/slick.css',
'<%= bowerPath%>codrops-menu/mlpushmenu.css'
],
dest: '<%= cssPath %>vendor.css',
nonull: true
},
css: {
options: {
sourceMap: true
},
src: [
'<%= cssPath %>vendor.css',
'<%= cssPath %>style-prefixed.css'
],
dest: '<%= cssPath %>all.css',
nonull: true
}
},
// Task: JavaScript minification.
// https://github.com/gruntjs/grunt-contrib-uglify
uglify: {
// Task-wide options.
options: {},
// Target: all.
all: {
// Target-specific options.
options: {
// Report the original vs. minified file-size.
report: 'min',
sourceMap: false
},
// Source file(s), in the order we want to minify them.
src: '<%= jsPath %>all.js',
// Destination file.
dest: '<%= jsPath %>all.min.js'
}
},
cssmin: {
minify: {
src: '<%= cssPath %>all.css',
dest: '<%= cssPath %>all.min.css'
}
},
// Task: image minification.
// https://github.com/gruntjs/grunt-contrib-imagemin
imagemin: {
// Task-wide options.
options: {},
// Target: all.
all: {
// Target-specific options.
options: {},
// Files to minify.
files: [{
// Allow for a dynamically-built file-list.
expand: true,
// The directory to start this task within.
cwd: '<%= imgPath %>',
// Relative to the path defined in "cwd", the sub-
// directories and file type(s) to work on.
src: ['**/*.{<%= imgFileTypes %>}'],
// Destination location.
dest: '<%= imgPath %>'
}]
}
},
// Task: find and replace things in the project.
// https://github.com/yoniholmes/grunt-text-replace
replace: {
removeLivereload: {
// Scan all document file types inside of html/.
src: 'footer.php',
// Replacement(s) to make.
replacements: [{
// From: The full script element needed for Livereload to
// function, plus a line-return.
from: /<script src="\/\/localhost:35729\/livereload\.js"><\/script>\n/m,
// To: Nothing.
to: ''
}],
// Overwrite each file.
overwrite: true
},
// Target: bust cache. This target assumes "?cb=[any number here]"
// has been appended to any file-path you'd like to cache-bust. For
// example, css files, js files, image files, etc.:
// <link rel="stylesheet" href="/lib/css/all.css?cb=1" />
// <script src="/lib/js/all.min.js?cb=1"></script>
// <img src="/lib/img/photo.jpg?cb=1" alt="A photo" />
cacheBust: {
// Scan all document file types inside of html/.
src: ['views/html-header.twig', 'views/base.twig'],
// Replacement(s) to make.
replacements: [{
// From: "?cb=[any number here]".
from: /\?cb=[0-9]*/g,
// To: "?cb=[the current Unix epoch time]"
to: function () {
var uid = new Date().valueOf();
return '?cb=' + uid;
}
}],
// Overwrite each file.
overwrite: true
},
prodCssFile: {
// Scan all document file types inside of html/.
src: 'views/html-header.twig',
// Replacement(s) to make.
replacements: [{
// From: "all.css".
from: /all\.css/,
// To: "all.min.css".
to: 'all.min.css'
}],
// Overwrite each file.
overwrite: true
},
prodJsFile: {
// Scan all document file types inside of html/.
src: 'views/base.twig',
// Replacement(s) to make.
replacements: [{
// From: "all.js".
from: /all\.js/,
// To: "all.min.js".
to: 'all.min.js'
}],
// Overwrite each file.
overwrite: true
}
},
// Task: aside from creating notifications when something fails (which
// is this task's permanent/default behavior), also create the following
// notifications for these custom, non-failure events. The targets below
// are utilized by requesting them via targets found in the watch task.
// https://github.com/dylang/grunt-notify
notify: {
// Target: Sass.
sass: {
options: {
title: 'CSS',
message: 'Compiled successfully.'
}
},
// Target: JavaScript.
js: {
options: {
title: 'JavaScript',
message: 'Hinted and concatenated successfully.'
}
},
// Target: ready for production.
goProd: {
options: {
title: 'Ready for Production',
message: 'Ship it!'
}
},
// Target: ready for development.
goDev: {
options: {
title: 'Ready for Development',
message: 'Make it better!'
}
}
},
// Task: when something changes, run specific task(s).
// https://github.com/gruntjs/grunt-contrib-watch
watch: {
// Task-wide options.
options: {},
// Target: Sass.
sass: {
// Target-specific options.
options: {
},
// Watch all sassFileTypes files inside of sassPath.
files: '<%= sassPath %>**/*.scss',
// Task(s) to run.
tasks: [
'sass:dev',
'autoprefixer',
//'concat:vendor',
'concat:css',
'notify:sass'
]
},
// Target: css.
// css: {
// // Target-specific options.
// options: {
// // Utilize Livereload.
// livereload: true,
// },
// // Watch all .css files inside of cssPath.
// files: '<%= cssPath %>all.css'
// },
// Target: JavaScript.
js: {
// Target-specific options.
options: {
// Utilize Livereload.
},
// Watch all JavaScript files inside of jsPath.
files: [
'<%= jsPath %>*.js',
'<%= jsPath %>includes/*.js',
'!<%= jsPath %>*.min.js', // ...but not minified files.
'!<%= jsPath %>all.js' // ...but not the concatenated file.
],
// Task(s) to run.
tasks: [
'concat:js',
'notify:js'
]
},
docs: {
files: [
'_sites/Caron/**/*.aspx'
]
}
},
browserSync: {
dev: {
bsFiles: {
src: [
'<%= cssPath %>all.css',
'*.aspx',
'_sites/Caron/**/*.aspx',
'_sites/Caron/**/*.ascx',
'<%= jsPath %>all.js' // ...but not the concatenated file.
]
},
options: {
proxy: "local.caron.org",
watchTask: true,
open: false
}
}
}
});
// Task(s) to run when typing only "grunt" in the console.
grunt.registerTask('default', [
'browserSync',
'sass:dev',
'autoprefixer',
'concat:vendor',
'concat:css',
'concat:js',
'watch'
]);
// #### Task alias: "goProd" ####
// Tasks(s) to run when it's time to convert things from development mode to
// production mode.
grunt.registerTask('production', [
'sass:prod',
'autoprefixer',
'concat:vendor',
'concat:css',
'concat:js',
'uglify:all',
'cssmin',
'imagemin:all',
'replace:cacheBust',
'replace:removeLivereload',
'replace:prodCssFile',
'replace:prodJsFile'
]);
};