Skip to content

Instantly share code, notes, and snippets.

@jshawl
Last active January 18, 2023 13:52
Show Gist options
  • Save jshawl/6225945 to your computer and use it in GitHub Desktop.
Save jshawl/6225945 to your computer and use it in GitHub Desktop.
Grunt + Sass + Autoprefixer
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"
}
}
@dimitriadisg
Copy link

Following up on @EdmundoJr's comment, autoprefixer-core has been deprecated as well, use autoprefixer instead (just replace autoprefixer-core with autoprefixer)

@petertwise
Copy link

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...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment