I'm dabbling into Grunt. I'm trying to write a task that autoprefix automatically my css.
Here is my Gruntfile
module.exports = function(grunt) {
'use strict';
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
autoprefixer: {
options: {
browsers: ['last 8 versions']
},
files: {
'css/styles.css': 'css/styles.css'
}
},
watch: {
sass: {
files: ['sass/**/*.{scss,sass}','sass/_partials/**/*.{scss,sass}'],
tasks: ['sass:dist', 'autoprefixer']
},
livereload: {
files: ['*.html', '*.php', 'js/**/*.{js,json}', 'css/*.css','img/**/*.{png,jpg,jpeg,gif,webp,svg}'],
options: {
livereload: true
}
}
},
sass: {
dist: {
files: {
'css/styles.css': 'sass/styles.scss'
}
}
}
});
grunt.registerTask('default', ['sass:dist', 'autoprefixer', 'watch']);
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-watch');
};
When i run grunt, It says it's running the task fine but when i check the css files, nothing is processed.
Am i missing something? ( answer is yes but I'd like to know what :) )
livereload
within the watch
task is very picky about path. Look at my answer to this question.