livereload
within the watch
task is very picky about path. Look at my answer to this question.
Grunt autoprefixer not prefixing
-
18-10-2022 - |
Question
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 :) )
La solution 2
Autres conseils
I'd like to offer and alternative easier solution to this question. The accepted answer is overkill for this posters problem. What is going on with the OP's question is that the autoprefixer task is missing a target, such as dist:
, before the files it is supposed to convert. Thus:
autoprefixer: {
options: {
browsers: ['last 8 versions']
},
files: {
'css/styles.css': 'css/styles.css'
}
},
Should be:
autoprefixer: {
options: {
browsers: ['last 8 versions']
},
dist: { // Target
files: {
'css/styles.css': 'css/styles.css'
}
}
},
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow