Last active
April 29, 2016 11:50
-
-
Save hugovk/7648e1f403032c3d87cf to your computer and use it in GitHub Desktop.
Gruntfile for Drupal to compile Less to CSS with source maps
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"node": true, | |
"browser": true, | |
"esnext": true, | |
"bitwise": true, | |
"camelcase": true, | |
"curly": true, | |
"eqeqeq": true, | |
"immed": true, | |
"indent": 4, | |
"latedef": true, | |
"newcap": true, | |
"noarg": true, | |
"quotmark": "single", | |
"undef": true, | |
"unused": true, | |
"strict": true, | |
"trailing": true, | |
"smarttabs": true, | |
"jquery": true | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'use strict'; | |
module.exports = function(grunt) { | |
var globalConfig = { | |
cssBasename: 'style', | |
themeDir: 'sites/all/themes/mysite', | |
sourceMapRootpath: '/mysite/', | |
cssFilename: '<%= globalConfig.themeDir %>/css/<%= globalConfig.cssBasename %>.css', | |
lessFilename: '<%= globalConfig.themeDir %>/less/<%= globalConfig.cssBasename %>.less' | |
}; | |
grunt.initConfig({ | |
globalConfig: globalConfig, | |
less: { | |
development: { | |
options: { | |
compress: true, | |
yuicompress: true, | |
optimization: 2, | |
sourceMap: true, | |
sourceMapFilename: '<%= globalConfig.cssFilename %>.map', | |
sourceMapRootpath: '<%= globalConfig.sourceMapRootpath %>' | |
}, | |
files: { | |
// target.css file: source.less file | |
'<%= globalConfig.cssFilename %>': '<%= globalConfig.lessFilename %>' | |
} | |
} | |
}, | |
autoprefixer: { | |
options: { | |
map: { | |
inline: false | |
}, | |
src: '<%= globalConfig.cssFilename %>', | |
dest: '<%= globalConfig.cssFilename %>' | |
}, | |
}, | |
jshint: { | |
options: { | |
jshintrc: '.jshintrc' | |
}, | |
all: ['Gruntfile.js', '<%= globalConfig.themeDir %>/js/**/scripts.js'] | |
}, | |
watch: { | |
mains: { | |
files: [ // which files to watch | |
'<%= globalConfig.themeDir %>/less/**/*.less', | |
'<%= globalConfig.themeDir %>/js/**/scripts.js', | |
'Gruntfile.js'], | |
tasks: ['jshint', 'less', 'autoprefixer'], | |
options: { | |
nospawn: true | |
} | |
} | |
} | |
}); | |
grunt.loadNpmTasks('grunt-autoprefixer'); | |
grunt.loadNpmTasks('grunt-contrib-jshint'); | |
grunt.loadNpmTasks('grunt-contrib-less'); | |
grunt.loadNpmTasks('grunt-contrib-watch'); | |
grunt.registerTask('default', ['jshint', 'less', 'autoprefixer', 'watch']); | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"devDependencies": { | |
"grunt": "^0.4.5", | |
"grunt-autoprefixer": "^1.0.1", | |
"grunt-contrib-jshint": "^0.11.3", | |
"grunt-contrib-less": "^0.11.4", | |
"grunt-contrib-watch": "^0.6.1" | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Edit: Moved to https://github.com/hugovk/drupal-gruntfile
mysite
in Gruntfile.js for your directory structure and changemain.*
if needed.npm install
grunt
and leave running. It'll update CSS from Less at first run, and whenever the Less files or Gruntfile change. The CSS is minified,autoprefixed, and a CSS sourcemap is created for easier debugging. JS is also linted.