-
-
Save jshawl/6225945 to your computer and use it in GitHub Desktop.
| module.exports = function(grunt) { | |
| grunt.initConfig({ | |
| pkg: grunt.file.readJSON('package.json'), | |
| sass: { | |
| dist: { | |
| options:{ | |
| style:'compressed' | |
| }, | |
| files: { | |
| 'css/style.css' : 'scss/style.scss' | |
| } | |
| } | |
| }, | |
| autoprefixer:{ | |
| dist:{ | |
| files:{ | |
| 'css/style.css':'css/style.css' | |
| } | |
| } | |
| }, | |
| watch: { | |
| css: { | |
| files: 'scss/*.scss', | |
| tasks: ['sass', 'autoprefixer'] | |
| } | |
| } | |
| }); | |
| grunt.loadNpmTasks('grunt-contrib-sass'); | |
| grunt.loadNpmTasks('grunt-contrib-watch'); | |
| grunt.loadNpmTasks('grunt-autoprefixer'); | |
| grunt.registerTask('default',['watch']); | |
| } |
| { | |
| "name": "jshawl.com", | |
| "version": "0.1.0", | |
| "devDependencies": { | |
| "grunt": "~0.4.1", | |
| "grunt-contrib-sass": "~0.3.0", | |
| "grunt-contrib-watch": "~0.4.4", | |
| "grunt-autoprefixer": "~0.2.20130806" | |
| } | |
| } |
Sweet
Awesome, thanks man!
This works awesome for us, but we do have a problem with our sourcemaps.
The SASS watcher generates a sourcemap and places a comment in the CSS file.
The Autoprefixer watcher however removes this specific comment at the end of the CSS file.
Solution
enable sourcemaps in sass:
sass: {
dist: {
options: {
sourcemap: true
},
files: {
'style/css/master.css': 'style/sass/master.sass'
}
}
}
update sourcemaps with autoprefixer:
autoprefixer: {
dist: {
options: {
map: true
},
files: {
'style/css/master.css': 'style/css/master.css'
}
}
}
This helped me a lot, thanks! The only change is that I'm using postcss with autoprefixer-core instead of grunt-autoprefixer, which has been deprecated in favour of grunt-postcss:
postcss: {
options: {
processors: require('autoprefixer-core')({browsers: 'last 2 versions'}),
},
dist: {
src: 'css/*.css',
},
},
Very very nice ! Was looking for how to make the three together simply and now that's perfect for it, thanks !
this is awesome! Save me so much time and make grunt less puzzling.
Very helpful, thank you!
Following up on @EdmundoJr's comment, autoprefixer-core has been deprecated as well, use autoprefixer instead (just replace autoprefixer-core with autoprefixer)
Thanks to this gist a few years ago I finally grasped enough to get my sweet Grunt setup running. Thank you!
Here's my updated version for 2018:
https://gist.github.com/squarecandy/a27671c96f3d226e0d4b9a118bfd1314
- using grunt-sass and node-sass to avoid ruby dependency
- using "plain" autoprefixer as suggested above
- spits out valid source maps, which can be a challenge to get working with a sass > autoprefixer pipeline...
Well, this is pretty rad. All I have to do is
$ gruntand: