Skip to content

Instantly share code, notes, and snippets.

@wmandrews
Last active August 29, 2015 13:59
Show Gist options
  • Save wmandrews/10595297 to your computer and use it in GitHub Desktop.
Save wmandrews/10595297 to your computer and use it in GitHub Desktop.
Grunt image and video optimize
'use strict';
module.exports = function(grunt) {
// paths used in our tasks
var tmpFolder = '.tmp/';
// src assets
var srcAssets = 'assets/',
srcImages = srcAssets + 'images/',
srcVideos = srcAssets + 'video/';
// publish location
var targetAssets = 'public/_assets/',
targetBigAssets = 'public/_big_assets/',
targetImages = targetBigAssets + 'images/',
targetVideos = targetBigAssets + 'video/',
targetVideoPosters = targetBigAssets + 'poster_images/';
// 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({
yeoman: {
app: 'src',
dist: 'public'
},
jshint: {
options: {
curly: true,
eqeqeq: true,
immed: true,
latedef: true,
newcap: true,
noarg: true,
sub: true,
undef: true,
unused: true,
boss: true,
eqnull: true,
globals: {
jQuery: true
}
},
gruntfile: {
src: 'Gruntfile.js'
},
lib_test: {
src: ['lib/**/*.js', 'test/**/*.js']
},
projectScripts: {
src: 'template/**/*.js'
}
},
clean: {
tmp: {
expand: true,
cwd: tmpFolder,
src: ['**.*']
},
responsiveImagesTarget: {
expand: true,
cwd: targetImages,
src: ['*.{jpg,gif,png}']
},
responsiveVideosTarget: {
expand: true,
cwd: tmpFolder,
src: ['*.{mov,mp4,webm}']
}
},
responsive_images: {
projectImages: {
options: {
sizes: [{
width: 320,
quality: 60
}, {
width: 640,
quality: 60
}, {
width: 1080,
quality: 60
}, {
width: 1564,
quality: 60
}, {
width: 2000,
quality: 60
}]
},
files: [{
expand: true,
src: ['*.{jpg,gif,png}'],
cwd: srcImages,
dest: tmpFolder
}]
}
},
imagemin: {
projectImages: {
options: {
optimizationLevel: 3
},
files: [{
expand: true,
cwd: tmpFolder,
src: ['*.{jpg,gif,png}'],
dest: targetImages
}]
},
videoPosters: {
options: {
optimizationLevel: 3
},
files: [{
expand: true,
cwd: tmpFolder,
src: ['*.{jpg,gif,png}'],
dest: targetVideoPosters
}]
}
},
responsive_videos: {
projectVideos: {
options: {
sizes: [{
width: 540,
poster: false
}],
encodes: [{
webm: [
{'-vcodec': 'libvpx'},
{'-acodec': 'libvorbis'},
{'-q:a': '100'},
{'-quality': 'good'},
{'-cpu-used': '0'},
{'-b:v': '500k'},
{'-qmax': '42'},
{'-maxrate': '500k'},
{'-bufsize': '1000k'},
{'-threads': '0'}
],
mp4: [
{'-vcodec':'libx264'},
{'-acodec': 'libfaac'},
{'-pix_fmt': 'yuv420p'},
{'-q:v': '4'},
{'-q:a': '100'},
{'-threads': '0'}
]
}]
},
files: [{
expand: true,
src: ['*.{mov,mp4}'],
cwd: srcVideos,
dest: tmpFolder
}]
}
},
copy: {
projectVideos: {
files: [{
expand: true,
cwd: tmpFolder,
src: ['*.{webm,mp4}'],
dest: targetVideos
}]
}
}
});
grunt.registerTask('images', 'Generate image crops from source files in ' + srcImages, [
'responsive_images:projectImages',
'clean:responsiveImagesTarget',
'imagemin:projectImages',
'clean:tmp'
]);
grunt.registerTask('videos', 'Generate videos from source files in ' + srcVideos, [
'clean:tmp',
'responsive_videos:projectVideos',
'copy:projectVideos',
'imagemin:videoPosters',
'clean:tmp'
]);
// Default task.
grunt.registerTask('default', ['images']);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment