Grunt for Wordpress theme
module.exports = function (grunt) {
// 1. All configuration goes here
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// Sass
sass: {
options: {
sourceMap: true
},
dist: {
files: {
'build/css/production.css': 'build/css/main.scss'
}
}
},
// Put all javascript files into one file
concat: {
/*
css: {
src: ['build/css/reset.css', 'build/css/*.css', '!build/css/main.css', '!build/css/responsive.css', 'build/css/main.css', 'build/css/responsive.css'],
dest: 'assets/css/production.css'
},
*/
js: {
src: ['build/js/jquery.js', 'build/js/*.js', '!build/js/main.js', '!build/js/production.js', '!build/js/ajax.js', 'build/js/main.js'],
dest: 'build/js/production.js'
}
},
// Minimize javascript files
uglify: {
options: {
// the banner is inserted at the top of the output
banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n',
mangle: false
},
my_target: {
files: {
'assets/js/production.min.js': ['build/js/production.js'],
'assets/js/ajax.min.js': ['build/js/ajax.js']
}
}
},
// Minify all CSS files into 1 file
cssmin: {
target: {
files: [{
expand: true,
cwd: 'build/css',
src: 'production.css',
dest: 'assets/css',
ext: '.min.css'
}]
}
},
// Optimize images
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: 'build/images/',
src: ['*.{png,jpg,gif}'],
dest: 'assets/images/'
}]
}
},
// Optimize SVGs
svgmin: { //minimize SVG files
options: {
plugins: [
{ removeViewBox: false },
{ removeUselessStrokeAndFill: false }
]
},
dist: {
expand: true,
cwd: 'build/images/icons',
src: ['*.svg'],
dest: 'assets/images/icons/'
}
},
// Dekstop notifications
notify: {
welcome: {
options: {
title: "Grunt", // Note we are outputting the package.json name variable here
message: "Lets roll: <%= pkg.name %>"
}
},
minify: {
options: {
title: "Grunt", // Note we are outputting the package.json name variable here
message: "Minify: <%= pkg.name %>"
}
},
watching: {
options: {
title: "Grunt", // Note we are outputting the package.json name variable here
message: "Watching: <%= pkg.name %>"
}
},
another: {
options: {
title: "Grunt",
message: "All good! :)"
}
}
},
// Watch file changes, file deletions or file additions
watch: {
scripts: {
files: ['build/js/*.js'],
tasks: ['concat:js', 'uglify'],
options: {
spawn: false
}
},
css: {
files: ['build/css/*.{css,scss}', 'build/css/**/*.{css,scss}'],
tasks: ['sass', 'cssmin'],
options: {
spawn: false
}
},
images: {
files: ['build/images/*.{png,jpg,gif}'],
tasks: ['imagemin']
},
svgs: {
files: ['build/images/icons/*.svg'],
tasks: ['svgmin']
},
notify: {
files: ['build/css/*.*', 'build/js/*.*', 'build/images/*.*'],
tasks: ['notify:another']
}
}
});
// 3. Where we tell Grunt we plan to use this plug-in.
grunt.loadNpmTasks('grunt-sass'); // Sass
grunt.loadNpmTasks('grunt-contrib-concat'); // Merge JS files
grunt.loadNpmTasks('grunt-contrib-uglify'); // Minify JS files
grunt.loadNpmTasks('grunt-contrib-imagemin'); // Image optimization
grunt.loadNpmTasks('grunt-contrib-cssmin'); // Minify CSS files into 1 file
grunt.loadNpmTasks('grunt-svgmin'); // Minify SVGs
grunt.loadNpmTasks('grunt-contrib-watch'); // Watch changes
grunt.loadNpmTasks('grunt-notify'); // Desktop notifications
// 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask('default', ['notify:watching','watch']);
grunt.registerTask('minify', ['notify:minify', 'sass', 'concat', 'uglify', 'cssmin', 'imagemin', 'svgmin']);
};
{
"name": "ARI Wordpress Theme",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-concat": "^0.5.1",
"grunt-contrib-cssmin": "^0.13.0",
"grunt-contrib-imagemin": "^0.9.4",
"grunt-contrib-jshint": "^0.11.2",
"grunt-contrib-sass": "^0.9.2",
"grunt-contrib-uglify": "^0.9.1",
"grunt-contrib-watch": "^0.6.1",
"grunt-notify": "^0.4.1",
"grunt-sass": "^1.2.1",
"grunt-svgmin": "^3.3.0"
}
}