-
-
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" | |
} | |
} |
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...
Solution
enable sourcemaps in sass:
update sourcemaps with autoprefixer: