Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
using grunt-bless to create split css files for ie9 and oldIE with roots theme
// Gruntfile.js
// Discussion at http://discourse.roots.io/t/getting-around-ie9-css-limits/
// applies to https://github.com/roots/roots/tree/1b333d6
// using grunt-bless v0.1.1
'use strict';
module.exports = function(grunt) {
// Load all tasks
require('load-grunt-tasks')(grunt);
// Show elapsed time
require('time-grunt')(grunt);
var jsFileList = [
'assets/vendor/bootstrap/js/transition.js',
'assets/vendor/bootstrap/js/alert.js',
'assets/vendor/bootstrap/js/button.js',
'assets/vendor/bootstrap/js/carousel.js',
'assets/vendor/bootstrap/js/collapse.js',
'assets/vendor/bootstrap/js/dropdown.js',
'assets/vendor/bootstrap/js/modal.js',
'assets/vendor/bootstrap/js/tooltip.js',
'assets/vendor/bootstrap/js/popover.js',
'assets/vendor/bootstrap/js/scrollspy.js',
'assets/vendor/bootstrap/js/tab.js',
'assets/vendor/bootstrap/js/affix.js',
'assets/js/plugins/*.js',
'assets/js/_*.js'
];
grunt.initConfig({
jshint: {
options: {
jshintrc: '.jshintrc'
},
all: [
'Gruntfile.js',
'assets/js/*.js',
'!assets/js/scripts.js',
'!assets/**/*.min.*'
]
},
less: {
dev: {
files: {
'assets/css/main.css': [
'assets/less/main.less'
]
},
options: {
compress: false,
// LESS source map
// To enable, set sourceMap to true and update sourceMapRootpath based on your install
sourceMap: true,
sourceMapFilename: 'assets/css/main.css.map',
sourceMapRootpath: '/app/themes/roots/'
}
},
build: {
files: {
'assets/css/main.min.css': [
'assets/less/main.less'
],
'assets/css/main-ie9.min.css': [
'assets/less/main.less'
],
'assets/css/main-oldIE.min.css': [
'assets/less/main-oldIE.less'
]
},
options: {
compress: true
}
}
},
stripmq: {
options: {
width: '63.75rem'
},
build: {
files: {
'assets/css/main-oldIE.min.css': ['assets/css/main-oldIE.min.css']
}
}
},
concat: {
options: {
separator: ';',
},
dist: {
src: [jsFileList],
dest: 'assets/js/scripts.js',
},
},
uglify: {
dist: {
files: {
'assets/js/scripts.min.js': [jsFileList]
}
}
},
autoprefixer: {
dev: {
options: {
browsers: ['last 2 versions', 'android 2.3', 'android 4', 'opera 12'],
map: {
prev: 'assets/css/'
}
},
src: 'assets/css/main.css'
},
build: {
options: {
browsers: ['last 2 versions', 'android 2.3', 'android 4', 'opera 12'],
},
src: 'assets/css/main.min.css'
},
build_ie9: {
options: {
browsers: ['ie 9']
},
src: 'assets/css/main-ie9.min.css'
},
build_oldIE: {
options: {
browsers: ['ie 8']
},
src: 'assets/css/main-oldIE.min.css'
}
},
bless: {
css: {
files: {
'assets/css/main-ie9.min.css': 'assets/css/main-ie9.min.css',
'assets/css/main-oldIE.min.css': 'assets/css/main-oldIE.min.css'
}
}
},
modernizr: {
build: {
devFile: 'assets/vendor/modernizr/modernizr.js',
outputFile: 'assets/js/vendor/modernizr.min.js',
files: {
'src': [
['assets/js/scripts.min.js'],
['assets/css/main.min.css']
]
},
uglify: true,
parseFiles: true
}
},
version: {
default: {
options: {
format: true,
length: 32,
manifest: 'assets/manifest.json',
querystring: {
style: 'roots_css',
script: 'roots_js'
}
},
files: {
'lib/scripts.php': 'assets/{css,js}/{main,main-ie9,main-oldIE,scripts}.min.{css,js}'
}
}
},
watch: {
less: {
files: [
'assets/less/*.less',
'assets/less/**/*.less'
],
tasks: ['less:dev', 'autoprefixer:dev']
},
js: {
files: [
jsFileList,
'<%= jshint.all %>'
],
tasks: ['jshint', 'concat']
},
livereload: {
// Browser live reloading
// https://github.com/gruntjs/grunt-contrib-watch#live-reloading
options: {
livereload: true
},
files: [
'assets/css/main.css',
'assets/js/scripts.js',
'templates/*.php',
'*.php'
]
}
}
});
// Register tasks
grunt.registerTask('default', [
'dev'
]);
grunt.registerTask('dev', [
'jshint',
'less:dev',
'autoprefixer:dev',
'concat'
]);
grunt.registerTask('build', [
'jshint',
'less:build',
'stripmq:build',
'autoprefixer:build',
'autoprefixer:build_ie9',
'autoprefixer:build_oldIE',
'uglify',
'modernizr',
'bless',
'version'
]);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment