Grunt + Postcss + autoprefixer not adding vendor prefixes - gruntjs

Something is definitely wrong somewhere. My test file 'dist/css/prefixedpostcss-main.min.css' is well created but no vendor prefix are added :(
Thanks for advance,
spending lot of time on searching, reading… need the help of the community!
Here is below my Gruntfile.js
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
/* grab the Bootstrap js and combine it with my custom scripts
The goal is to limit the number of http requests to increase load time
*/
// JS Concatenation Plugin
concat: {
options: {
stripBanners: false,
sourceMap: true,
banner: '',
},
scripts: {
src: ['bower_components/bootstrap-sass/assets/javascripts/bootstrap.min.js', 'js/plugins.js', 'js/main.js'],
dest: 'dist/js/scripts.js',
},
},
// JS Minification
uglify: {
defer: {
src: ['js/defer.js'], //input
dest: 'dist/js/defer.min.js' //output
},
scripts: {
src: ['dist/js/scripts.js'], //input
dest: 'dist/js/scripts.min.js' //output
},
},
// Sass to CSS
sass: {
dist: {
files: {
'dist/css/main.css': 'sass/globals.scss' // this is our main scss file
}
},
options: {
compass: true,
style: 'compressed',
sourceMap: true
}
},
// Post CSS (autoprefixer, mqpacker, cssnano)
postcss: {
options: {
map: true,
// Load plugins
processors: [
require('autoprefixer')({browsers: ['last 1 version']}),// Runs Post CSS Autoprefixer
//require('postcss-flexbugs-fixes'),
]
},
dist: {
src: 'dist/css/main.css',
dest: 'dist/css/prefixedpostcss-main.min.css'
}
},
/* Auto Update the scripts and styles when working */
watch: {
grunt: { files: ['Gruntfile.js'] },
js: {
files: ['js/*.js'],
tasks: ['jshint', 'concat', 'uglify'],
options: {
spawn: false,
},
},
sass: {
files: ['sass/**/*.scss'],
tasks: ['sass', 'postcss'],
options: {
spawn: false,
},
},
options: {
livereload: false,
spawn: false
}
},
browserSync: {
dev: {
bsFiles: {
src: [
'sass/*.scss',
'js/*.js',
'*.html',
'templates/*.html'
]
},
options: {
watchTask: true,
server: './'
}
}
},
htmlbuild: {
dist: {
src: 'src/index.html',
dest: 'dist/',
options: {
beautify: true,
relative: true,
basePath: false,
sections: {
layout: {
header: 'templates/header.html',
footer: 'templates/footer.html'
}
},
}
}
},
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: 'img/',
src: ['**/*.{png,jpg,gif}'],
dest: 'dist/img/build/'
}]
}
},
jshint: {
files: {
src: ['*.js', 'js/*.js']
},
options: {
'curly': true,
'eqeqeq': true,
'eqnull': true,
'immed': true,
'noarg': true,
'quotmark': 'single',
'trailing': true,
'undef': true,
'unused': false,
'node': true,
'jquery': true,
'browser': true,
'devel': true,
}
},
});
// END GRUNT
// Load the plugins
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-postcss');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-browser-sync');
grunt.loadNpmTasks('grunt-html-build');
grunt.loadNpmTasks('grunt-notify');
// Default task(s).
//grunt.registerTask('dev', ['browserSync', 'watch']);
//grunt.registerTask('css', ['sass', 'postcss', 'autoprefixer', 'imagein']);
//grunt.registerTask('js', ['jshint', 'concat', 'uglify']);
//grunt.registerTask('default', ['dev', 'css', 'js', 'notify']);
grunt.registerTask('default', ['sass', 'postcss:dist', 'concat', 'uglify', 'browserSync', 'watch']);
};
Here is below my package.json
{
"name": "laurene",
"version": "1.0.0",
"dependencies": {
"grunt-cssnano": "^2.1.0",
"pixrem": "^3.0.2"
},
"devDependencies": {
"autoprefixer": "^6.7.7",
"grunt": "^1.0.3",
"grunt-browser-sync": "^2.2.0",
"grunt-contrib-concat": "^1.0.1",
"grunt-contrib-imagemin": "^3.1.0",
"grunt-contrib-jshint": "^2.0.0",
"grunt-contrib-sass": "^1.0.0",
"grunt-contrib-uglify": "^1.0.1",
"grunt-contrib-watch": "^1.0.0",
"grunt-cssnano": "^2.1.0",
"grunt-html-build": "^0.7.1",
"grunt-notify": "^0.4.5",
"grunt-postcss": "^0.8.0",
"grunt-sass": "^1.2.0",
"grunt-spritesmith": "^6.6.2",
"gulp-autoprefixer": "^6.0.0",
"postcss-cli": "^2.5.2",
"postcss-flexbugs-fixes": "^2.0.0"
}
}

Related

Why it says Task "speak" not found. Use --force to continue

I have a problem with grunt. My Grunt version is:
grunt-cli v1.4.3
grunt v1.4.1
An Error occurs as I run any task.
Warning: Task "speak" not found. Use --force to continue.
This occurs with every function I run (for example grunt css or grunt default function) . I tried to take out whole code and make a test function and it worked... So I can sort out that the global installation is the problem. It must be my Gruntfile that is wrong.
Meanwhile I found out that some tasks were not in the right syntax structure. I changed that. Now it run my default task and other tasks without errors and firstly it looked like all runs fine. But as I tested it. The Changes in SCSS file doesn't show up in the compiled CSS File...
So something must be still wrong. So I added the new Gruntfile and replaced my name in Banner with name (so don't wonder about that). Maybe somebody know this issue... I also not know if it really would make the sourcemaps with this gruntfile code without additional plugins... But most important is that it compiles the scss ... without the whole reason of using grunt is gone...
Does anybody have an idea whats wrong
module.exports = function(grunt) {
grunt.initConfig({
package: grunt.file.readJSON('package.json'),
concat: {
js: {
src: 'scripts/js/**/_*.js',
dest:'scripts/js/app.js'
},
css: {
src: 'scripts/css/**/_*.css',
dest: 'scripts/css/app.css'
},
options: {
stripBanners: true,
banner: '//<%= package.name %> - Minified main Javascript from *Name* - <%= grunt.template.today("yyyy-mm-dd") %>'
}
},
uglify: {
options: {
banner: '//<%= package.name %> - Minified main Javascript from *Name* - <%= grunt.template.today("yyyy-mm-dd") %>',
mangle: {
reserved: 'jQuery'
},
compress: {
global_defs: {
"DEBUG": false
},
},
dead_code: false,
unused: false,
drop_console: true
},
build: {
src: 'scripts/js/app.js',
dest: 'build/scripts/js/app.min.js'
}
},
cssmin: {
options: {
specialComments: 0,
mergeIntoShorthands: false,
roundingPrecision: -1
},
target: {
files: {
'build/scripts/css/app.css': 'scripts/css/app.css'
}
}
},
sass: {
build: {
options: {
style: 'expanded',
debugInfo: true,
sourcemap: true
},
files: [{
expand: true,
cwd: 'scripts/css/',
src: ['scripts/scss/**/_*.scss'],
dest: 'scripts/css/',
ext: '.css'
}]
}
},
watch: {
js: {
files: ['scripts/js/_*.js'],
tasks: ['concat', 'uglify']
},
css: {
files: ['scripts/scss/_*.scss'],
tasks: ['concat', 'sass', 'cssmin']
},
php: {
files: ['*.html'],
tasks: ['htmlmin']
}
},
htmlmin: {
options: {
collapseWhitespace: true
},
target: {
files: {
src: '*.html',
dest: 'build/index.html'
}
}
}
});
//Load Plugins of Grunt
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-htmlmin');
grunt.loadNpmTasks('grunt-contrib-cssmin');
//Grunt Tasks
grunt.registerTask('default', ['sass', 'concat', 'cssmin', 'uglify']);
grunt.registerTask('all', ['sass', 'concat', 'cssmin','uglify']);
grunt.registerTask('css', ['sass', 'concat', 'cssmin']);
grunt.registerTask('js', 'uglify');
grunt.registerTask('publish', ['sass', 'concat', 'cssmin', 'uglify', 'htmlmin']);
grunt.registerTask('speak', function() {
console.log('I am running!');
});
};
Packages installes for grunt in package.json:
"devDependencies": {
"debug": "^4.3.1",
"grunt": "^1.4.1",
"grunt-cli": "^1.4.3",
"grunt-contrib-concat": "^1.0.1",
"grunt-contrib-copy": "^1.0.0",
"grunt-contrib-sass": "^2.0.0",
"grunt-contrib-uglify": "^5.0.1",
"grunt-contrib-watch": "^1.1.0",
"webpack": "^5.40.0",
"webpack-cli": "^4.7.2"
}
}

PostCSS not compiling but executes successfully

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

Grunt - nodemon + watch

i'm new to grunt so i'm guessing i'm doing something simple really wrong. I'm using angular-client-side-auth for my single page app and i wanted to add grunt-contrib-sass and grunt-contrib-watch into Gruntfile.js. Here's the problem, when i start the server using nodemon, the watch never run. I tried concurrent, but no luck.
Here's my Gruntfile.js:
module.exports = function(grunt) {
// Load tasks
grunt.loadNpmTasks('grunt-concurrent');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-mocha-test');
grunt.loadNpmTasks('grunt-env');
grunt.loadNpmTasks('grunt-nodemon');
grunt.loadNpmTasks('grunt-contrib-clean');
//require('load-grunt-tasks')(grunt); // npm install --save-dev load-grunt-tasks
grunt.initConfig({
mochaTest: {
test: {
options: {
reporter: 'spec'
},
src: ['server/tests/**/*.js']
}
},
env : {
options : {
//Shared Options Hash
},
dev : {
NODE_ENV : 'development'
},
test : {
NODE_ENV : 'test'
}
},
nodemon: {
dev: {
script: 'server.js',
}
},
watch: {
//options: { nospawn: true, livereload: true },
sass: {
files: ["client/css/styles.sass"],
tasks: ['sass'],
},
cssmin: {
files: ["client/css/styles.sass"],
tasks: ['cssmin'],
}
},
sass: {
dist: {
files: {
'client/css/styles.css': 'client/css/styles.scss'
}
}
},
cssmin: {
options: {
shorthandCompacting: false,
roundingPrecision: -1
},
target: {
files: [{
expand: true,
cwd: 'client/css',
src: ['styles.css', '!*.min.css'],
dest: 'client/css',
ext: '.min.css'
}]
}
},
concurrent: {
dev: {
options: {
logConcurrentOutput: true
},
tasks: ['watch', 'nodemon:dev']
}
},
clean: ["node_modules", "client/components"]
});
grunt.registerTask('serverTests', ['env:test', 'mochaTest']);
grunt.registerTask('test', ['env:test', 'serverTests']);
grunt.registerTask('dev', ['env:dev', 'concurrent:dev']);
};

GruntJS does not watch all folders in project

Why doesn't the GruntJS watch for the css/ folder?
But it successfully watches for /js folder.
Manual start function by default or any separate function using grunt-cli command grunt or grunt cssmin works correctly too...
My GruntJS code is:
module.exports = function(grunt) {
// 1. Вся настройка находится здесь
var d = new Date();
var y = d.getFullYear();
var bannerText = 'Created by Andrew Dyachenko ' + y + ''
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
dist: {
options: {
banner: '/*' + bannerText + '*/\n'
},
files: {
'js/main.min.js': ['js/main.js']
}
}
},
cssmin: {
target: {
files: [{
expand: true,
cwd: 'css/',
src: ['*.css', '!*.min.css'],
dest: 'css/',
ext: '.min.css'
}]
}
},
watch: {
options: {
livereload: true
},
scripts: {
files: ['js/*.js', 'css/*.css'],
tasks: ['process']
}
}
});
// 3. Тут мы указываем Grunt, что хотим использовать этот плагин
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-newer');
// 4. Указываем, какие задачи выполняются, когда мы вводим «grunt» в терминале
grunt.registerTask('process', ['newer:uglify', 'cssmin']);
grunt.registerTask('default', ['uglify', 'cssmin', 'watch']);
};
I think my problemm was in undefined bug. But now after small rebuild, everythin is working fine.
module.exports = function(grunt) {
var d = new Date();
var y = d.getFullYear();
var bannerText = 'Created by Andrew Dyachenko ' + y + '';
grunt.initConfig({
jshint: {
files: ['js/*.js', '!js/*.min.js'],
options: {
// eqeqeq: false,
// curly: true,
// es3: true,
// es5: true,
// noempty: true,
// shadow: true,
// unused: true,
// boss: true,
// debug: true,
globals: {
jQuery: true
}
}
},
uglify: {
dist: {
options: {
banner: '/*' + bannerText + '*/\n'
},
files: [{
expand: true,
cwd: 'js/',
src: ['*.js', '!*.min.js'],
dest: 'js/',
ext: '.min.js'
}]
}
},
cssmin: {
target: {
files: [{
expand: true,
cwd: 'css/',
src: ['*.css', '!*.min.css'],
dest: 'css/',
ext: '.min.css'
}]
}
},
watch: {
options: {
livereload: true
},
files: ['<%= jshint.files %>', ['css/*.css', '!css/*.min.css']],
tasks: ['process']
}
});
grunt.loadNpmTasks('grunt-newer');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('process', ['newer:jshint', 'uglify', 'cssmin']);
grunt.registerTask('default', ['jshint', 'uglify', 'cssmin', 'watch']);
};

Grunt isn't making changes when watching

Grunt says waiting... but doesn't make changes to sass while watching. I have to run grunt on the command line every time I want it to run and change things. The thing I need it to update the most is the sass to css. But it's not working. Please help.
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// package options
express: {
server: {
options: {
port: 3000,
hostname: 'localhost',
bases: 'public' // the 'public' folder for your project
}
}
},
jshint: {
options: {
jshintrc: '.jshintrc' // jshint config file
},
all: [
'Gruntfile.js',
'js/*.js'
]
},
concat: {
basic: {
src: [
'bower_components/jquery/dist/jquery.js',
'bower_components/foundation/js/foundation/foundation.js',
'dev/js/jquery.royalslider.custom.min.js',
'dev/js/royalslider.js',
'dev/js/megamenu_plugins.js',
'dev/js/megamenu.min.js',
'dev/js/megamenu.js',
'dev/js/app.js'
],
dest: 'dev/tmp/app.js'
},
extras: {
src: [
'bower_components/modernizr/modernizr.js'
],
dest: 'dev/tmp/modernizr.js'
}
},
sass: {
options: {
includePaths: ['bower_components/foundation/scss']
},
dist: {
options: {
outputStyle: 'compressed'
},
files: {
'public/build/css/app.min.css': 'dev/scss/app.scss'
}
}
},
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: 'dev/img/',
src: ['**/*.{png,jpg,gif}'],
dest: 'public/build/img/'
}]
}
},
uglify: {
build: {
files: {
'public/build/js/modernizr.min.js': 'dev/tmp/modernizr.js',
'public/build/js/app.min.js': 'dev/tmp/app.js'
}
}
},
clean: {
dist: [
'tmp/**',
'public/build/img/**'
]
},
watch: {
grunt: {
files: ['Gruntfile.js']
},
css: {
files: ['scss/*.scss'],
tasks: ['newer:sass'],
options: {
spawn: false
}
},
js: {
files: [
'js/*.js'
],
tasks: ['newer:concat', 'newer:uglify'],
options: {
livereload: true,
atBegin: true
}
},
imagemin: {
files: [
'img/**'
],
tasks: ['newer:imagemin'],
options: {
livereload: true,
atBegin: true
}
}
}
});
// Load tasks
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-notify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-express');
grunt.loadNpmTasks('grunt-newer');
// Register default tasks
grunt.registerTask('build', ['sass']);
grunt.registerTask('default', ['build','watch']);
}

Resources