I am a grunt newbie...
Please read through my grunt file bellow. Everything executes successfully, however the PostCSS function doesn't do it's job. If I remove the expanded and compressed calls within it and just use the options and dist then it works, but when I try to double up on the calls it doesn't work. What do I need to do?
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
scripts_jquery: {
options: {
beautify: false,
mangle: false
},
files: {
'js/vendor/jquery-1.12.4.min.js': ['js/vendor/jquery-1.12.4.js']
}
},
scripts_functions: {
options: {
beautify: false,
mangle: false
},
files: {
'js/functions.min.js': ['js/functions.js']
}
},
scripts_expanded: {
options: {
beautify: true,
mangle: false,
sourceMap: true,
sourceMapName: 'js/scripts.js.map'
},
files: {
'js/scripts.js': ['js/plugins/**/*.js']
}
},
scripts_compressed: {
options: {
beautify: false,
mangle: false,
sourceMap: true,
sourceMapName: 'js/scripts.min.js.map'
},
files: {
'js/scripts.min.js': ['js/plugins/**/*.js']
}
}
},
sass: {
compile: {
options: {
indentType: 'tab',
indentWidth: 1,
linefeed: 'crlf',
sourceMap: false
},
files: {
'css/styles.css': 'css/styles.scss',
'css/styles.min.css': 'css/styles.scss'
}
}
},
postcss: {
css_expanded: {
options: {
map: {
inline: false,
annotation: 'css/'
},
processors: [
require('autoprefixer')({
browsers: 'last 2 versions'
})
]
},
dist: {
src: 'css/styles.css'
}
},
css_compressed: {
options: {
map: {
inline: false,
annotation: 'css/'
},
processors: [
require('autoprefixer')({
browsers: 'last 2 versions'
}),
require('cssnano')()
]
},
dist: {
src: 'css/styles.min.css'
}
}
},
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: 'img/',
src: ['img/**/*.{png,jpg,gif}'],
dest: 'img/'
}]
}
},
svgmin: {
options: {
plugins: [{
removeViewBox: false
}, // don't remove the viewbox atribute from the SVG
{
removeEmptyAttrs: false
} // don't remove Empty Attributes from the SVG
]
},
dist: {
files: [{
expand: true,
cwd: 'img/',
src: ['img/**/*.svg'],
dest: 'img/'
}]
}
},
svgstore: {
options: {
prefix: 'icon-',
cleanup: true,
includedemo: true,
svg: {
viewBox: '0 0 100 100',
xmlns: 'http://www.w3.org/2000/svg'
}
},
dist: {
files: {
'svg/svg-sprite.svg': ['img/**/*.svg']
},
}
},
watch: {
scripts: {
files: ['js/plugins/**/*.js', 'js/vendor/jquery-1.12.4.js', 'js/functions.js'],
tasks: ['uglify'],
options: {
livereload: true,
},
},
css: {
files: ['css/**/*.scss'],
tasks: ['sass', 'postcss'],
options: {
livereload: true,
},
},
images: {
files: ['img/**/*.{png,jpg,gif}'],
tasks: ['imagemin'],
options: {
livereload: true,
},
},
svgs: {
files: ['img/**/*.svg'],
tasks: ['svgmin', 'svgstore'],
options: {
livereload: true,
},
}
},
});
require('load-grunt-tasks')(grunt);
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-postcss');
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-svgmin');
grunt.loadNpmTasks('grunt-svgstore');
// Default task(s).
grunt.registerTask('default', ['watch']);
};
You don't need the dist property inside each target. dist is a name for the default target. Remove it and the task should work:
postcss: {
css_expanded: {
options: {
map: {
inline: false,
annotation: 'css/'
},
processors: [
require('autoprefixer')({
browsers: 'last 2 versions'
})
]
},
src: 'css/styles.css'
},
css_compressed: {
options: {
map: {
inline: false,
annotation: 'css/'
},
processors: [
require('autoprefixer')({
browsers: 'last 2 versions'
}),
require('cssnano')()
]
},
src: 'css/styles.min.css'
}
},
There is actually a thread on this here: https://github.com/nDmitry/grunt-postcss/issues/67