PostCSS does not read and not print file, from folder "src" to "dest"

[immagimario]

I installed grunt-postcss and autoprefixer plug-in, but when I try to configure PostCSS with metod of the plug-in load-grunt-config, Autoprefixer and other plug-in, do nothing and do not have allert or error.

This is output from console:

$ grunt postcss
Running "postcss:postcss" (postcss) task
Done.

When I configure grunt in the standard way, PostCSS it works correctly.

This is my postcss.js file, put inside of grunt folder:

module.exports = {
  postcss: {
    options: {
      processors: [
        require('autoprefixer')(),
      ]
    },
    dist: {
      src: '<%= project.stylesheets %>/src/main.css',
      dest: '<%= project.stylesheets %>/dest/main.css'
    }
  }
};

You have no idea how to solve it

Thanks for your help

Mario

[SolomoN-ua]

Hi @immagimario,

please, run grunt postcss --debug, grunt --config-debug and provide output of both commands.

Regards, Anatoliy

[immagimario]

Hi and thanks, Anatoly

with this command grunt postcss --debug, the consoole display this:

Running "postcss:postcss" (postcss) task
[D] Task source: /Users/mario.montalto/Progetti/start-web-site/frontend/node_modules/grunt-postcss/tasks/postcss.js
Done.

While with the command grunt --config-debu, the consoole display this:

CONFIG:
==============================
{
  "aliases": {
    "default": [
      "sass",
      "slim",
      "watch"
    ]
  },
  "bowercopy": {
    "jquery": {
      "options": {
        "srcPrefix": "<%= project.bower %>/jquery/dist/",
        "destPrefix": "<%= project.jsvendor %>/"
      },
      "files": [
        {
          "jquery.js": "jquery.js"
        }
      ]
    },
    "jqueryplaceholder": {
      "options": {
        "srcPrefix": "<%= project.bower %>/jquery-placeholder/",
        "destPrefix": "<%= project.jsvendor %>/"
      },
      "files": [
        {
          "jquery.placeholder.min.js": "jquery.placeholder.min.js"
        }
      ]
    },
    "html5boilerplate": {
      "options": {
        "srcPrefix": "<%= project.bower %>/html5-boilerplate/src/",
        "destPrefix": "<%= project.assets %>/"
      },
      "files": [
        {
          "apple-touch-icon.png": "apple-touch-icon.png",
          "favicon.ico": "favicon.ico",
          "crossdomain.xml": "crossdomain.xml",
          "humans.txt": "humans.txt",
          ".editorconfig": ".editorconfig"
        }
      ]
    },
    "bootstrap": {
      "options": {
        "srcPrefix": "<%= project.bower %>/bootstrap-sass/assets/javascripts/",
        "destPrefix": "<%= project.jsvendor %>/bootstrap/"
      },
      "files": [
        {
          "bootstrap.min.js": "bootstrap.min.js"
        }
      ]
    },
    "bootstrapfont": {
      "options": {
        "srcPrefix": "<%= project.bower %>/bootstrap-sass/assets/fonts/bootstrap",
        "destPrefix": "<%= project.fonts %>/bootstrap/"
      },
      "files": [
        {
          "glyphicons-halflings-regular.eot": "glyphicons-halflings-regular.eot",
          "glyphicons-halflings-regular.svg": "glyphicons-halflings-regular.svg",
          "glyphicons-halflings-regular.ttf": "glyphicons-halflings-regular.ttf",
          "glyphicons-halflings-regular.woff": "glyphicons-halflings-regular.woff",
          "glyphicons-halflings-regular.woff2": "glyphicons-halflings-regular.woff2"
        }
      ]
    },
    "foundation": {
      "options": {
        "srcPrefix": "<%= project.bower %>/foundation-sites/js/",
        "destPrefix": "<%= project.jsvendor %>/foundation/"
      },
      "files": [
        {
          "foundation.core.js": "foundation.core.js",
          "foundation.util.box.js": "foundation.util.box.js",
          "foundation.util.keyboard.js": "foundation.util.keyboard.js",
          "foundation.util.mediaQuery.js": "foundation.util.mediaQuery.js",
          "foundation.util.timerAndImageLoader.js": "foundation.util.timerAndImageLoader.js",
          "foundation.util.touch.js": "foundation.util.touch.js",
          "foundation.util.triggers.js": "foundation.util.triggers.js"
        }
      ]
    },
    "motionui": {
      "options": {
        "srcPrefix": "<%= project.bower %>/motion-ui/",
        "destPrefix": "<%= project.jsvendor %>/"
      },
      "files": [
        {
          "motion-ui.js": "motion-ui.js"
        }
      ]
    },
    "whatinput": {
      "options": {
        "srcPrefix": "<%= project.bower %>/what-input/",
        "destPrefix": "<%= project.jsvendor %>/"
      },
      "files": [
        {
          "what-input.min.js": "what-input.min.js"
        }
      ]
    },
    "slick": {
      "options": {
        "srcPrefix": "<%= project.bower %>/slick-carousel/slick/",
        "destPrefix": "<%= project.jsvendor %>/"
      },
      "files": [
        {
          "slick.min.js": "slick.min.js"
        }
      ]
    },
    "slickscss": {
      "options": {
        "srcPrefix": "<%= project.bower %>/slick-carousel/slick/",
        "destPrefix": "<%= project.scssvendor %>/slick/"
      },
      "files": [
        {
          "slick.scss": "slick.scss",
          "slick-theme.scss": "slick-theme.scss"
        }
      ]
    },
    "slickfont": {
      "options": {
        "srcPrefix": "<%= project.bower %>/slick-carousel/slick/fonts/",
        "destPrefix": "<%= project.fonts %>/slick"
      },
      "files": [
        {
          "slick.eot": "slick.eot",
          "slick.svg": "slick.svg",
          "slick.ttf": "slick.ttf",
          "slick.woff": "slick.woff"
        }
      ]
    },
    "slickimg": {
      "options": {
        "srcPrefix": "<%= project.bower %>/slick-carousel/slick/",
        "destPrefix": "<%= project.imgvendor %>/slick"
      },
      "files": [
        {
          "ajax-loader.gif": "ajax-loader.gif"
        }
      ]
    },
    "fontawesome": {
      "options": {
        "srcPrefix": "<%= project.bower %>/font-awesome/fonts/",
        "destPrefix": "<%= project.fonts %>/font-awesome"
      },
      "files": [
        {
          "fontawesome-webfont.eot": "fontawesome-webfont.eot",
          "fontawesome-webfont.svg": "fontawesome-webfont.svg",
          "fontawesome-webfont.ttf": "fontawesome-webfont.ttf",
          "fontawesome-webfont.woff": "fontawesome-webfont.woff",
          "fontawesome-webfont.woff2": "fontawesome-webfont.woff2",
          "FontAwesome.otf": "FontAwesome.otf"
        }
      ]
    },
    "fontawesomescss": {
      "options": {
        "srcPrefix": "<%= project.bower %>/font-awesome/scss/",
        "destPrefix": "<%= project.scssvendor %>/font-awesome"
      },
      "files": [
        {
          "_variables.scss": "_variables.scss",
          "_mixins.scss": "_mixins.scss",
          "_path.scss": "_path.scss",
          "_core.scss": "_core.scss",
          "_larger.scss": "_larger.scss",
          "_fixed-width.scss": "_fixed-width.scss",
          "_list.scss": "_list.scss",
          "_bordered-pulled.scss": "_bordered-pulled.scss",
          "_animated.scss": "_animated.scss",
          "_rotated-flipped.scss": "_rotated-flipped.scss",
          "_stacked.scss": "_stacked.scss",
          "_icons.scss": "_icons.scss",
          "_screen-reader.scss": "_screen-reader.scss",
          "font-awesome.scss": "font-awesome.scss"
        }
      ]
    }
  },
  "modernizr": {
    "dist": {
      "dest": "<%= project.jsvendor %>/modernizr.min.js",
      "parseFiles": true,
      "options": [
        "setClasses",
        "domPrefixes",
        "prefixes",
        "addTest",
        "atRule",
        "hasEvent",
        "mq",
        "prefixed",
        "prefixedCSS",
        "prefixedCSSValue",
        "testAllProps",
        "testProp",
        "testStyles"
      ],
      "uglify": true
    }
  },
  "postcss": {
    "postcss": {
      "options": {
        "map": true,
        "processors": [
          null
        ]
      },
      "dist": {
        "files": [
          {
            "<%= project.stylesheets %>/dist/main.css": "<%= project.stylesheets %>/src/main.css",
            "<%= project.stylesheets %>/dist/vendor.css": "<%= project.stylesheets %>/src/vendor.css"
          }
        ]
      }
    }
  },
  "sass": {
    "development": {
      "options": {
        "loadPath": [
          "<%= project.foundation %>/scss/",
          "<%= project.bootstrap %>/assets/stylesheets",
          "<%= project.bourbon %>/app/assets/stylesheets/",
          "<%= project.susy %>/sass/",
          "<%= project.breakpoint %>/stylesheets/",
          "<%= project.normalize %>/normalize-css/",
          "<%= project.motionui %>/motion-ui/",
          "<%= project.base %>/",
          "<%= project.components %>/",
          "<%= project.helpers %>/",
          "<%= project.layout %>/",
          "<%= project.molecules %>/",
          "<%= project.organism %>/",
          "<%= project.pages %>/",
          "<%= project.themes %>/",
          "<%= project.scssvendor %>/"
        ],
        "style": "expanded",
        "debugInfo": false,
        "lineNumbers": false,
        "sourcemap": "auto"
      },
      "files": {
        "<%= project.stylesheets %>/src/main.css": "<%= project.scss %>/main.scss",
        "<%= project.stylesheets %>/src/vendor.css": "<%= project.scssvendor %>/vendor.scss"
      }
    }
  },
  "slim": {
    "dist": {
      "options": {
        "pretty": true
      },
      "files": [
        {
          "expand": true,
          "cwd": "<%= project.assets %>/slim/",
          "src": [
            "*.slim",
            "base/*.slim",
            "atoms/*.slim",
            "molecules/*.slim",
            "organisms/*.slim",
            "templates/*.slim",
            "pages/*.slim"
          ],
          "dest": "<%= project.assets %>/statics",
          "ext": ".html"
        }
      ]
    }
  },
  "watch": {
    "grunt": {
      "options": {
        "reload": true
      },
      "files": [
        "Gruntfile.js",
        "grunt/*"
      ]
    },
    "slim": {
      "files": "<%= project.slim %>/**/*.slim",
      "tasks": [
        "slim"
      ],
      "options": {
        "spawn": false,
        "livereload": true
      }
    },
    "sass": {
      "files": "<%= project.scss %>/**/*.scss",
      "tasks": [
        "sass"
      ],
      "options": {
        "spawn": false,
        "livereload": true
      }
    }
  },
  "project": {
    "folder": "../",
    "assets": "<%= project.folder %>/assets",
    "img": "<%= project.assets %>/images",
    "fonts": "<%= project.assets %>/fonts",
    "scss": "<%= project.assets %>/scss",
    "stylesheets": "<%= project.assets %>/css",
    "javascripts": "<%= project.assets %>/js",
    "slim": "<%= project.assets %>/slim",
    "statics": "<%= project.assets %>/statics",
    "scssvendor": "<%= project.scss %>/vendor",
    "imgvendor": "<%= project.img %>/vendor",
    "jsvendor": "<%= project.javascripts %>/vendor",
    "styleguide": "<%= project.assets %>/styleguide",
    "base": "<%= project.scss %>/base",
    "components": "<%= project.scss %>/components",
    "helpers": "<%= project.scss %>/helpers",
    "layout": "<%= project.scss %>/layout",
    "molecules": "<%= project.scss %>/molecules",
    "organism": "<%= project.scss %>/organism",
    "pages": "<%= project.scss %>/pages",
    "themes": "<%= project.scss %>/themes",
    "vendors": "<%= project.scss %>/vendors",
    "bower": "bower_components",
    "foundation": "<%= project.bower %>/foundation-sites",
    "bootstrap": "<%= project.bower %>/bootstrap-sass",
    "bourbon": "<%= project.bower %>/bourbon",
    "susy": "<%= project.bower %>/susy",
    "breakpoint": "<%= project.bower %>/breakpoint-sass",
    "motionui": "<%= project.bower %>"
  },
  "package": {
    "name": "start-project-website",
    "version": "1.0.0",
    "description": "Starting the project for the development of a new web site and its relative styleguide",
    "main": "index.php",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "immagimario",
    "license": "MIT",
    "devDependencies": {
      "autoprefixer": "^6.3.6",
      "cssnano": "^3.5.2",
      "grunt": "^1.0.1",
      "grunt-bowercopy": "^1.2.4",
      "grunt-contrib-sass": "^1.0.0",
      "grunt-contrib-watch": "^1.0.0",
      "grunt-modernizr": "^1.0.2",
      "grunt-postcss": "^0.8.0",
      "grunt-slim": "^0.1.0",
      "load-grunt-config": "^0.19.1",
      "pixrem": "^3.0.0"
    }
  }
}

ALIASES:
==============================
default ["sass","slim","watch"]

[SolomoN-ua]

Sorry, my mistake, not grunt postcss --debug but grunt postcss --verbose

[SolomoN-ua]

Also, do you see that:

"processors": [
    null
]

[SolomoN-ua]

Please try to change your postcss.js config file to:

var autoprefixer = require('autoprefixer');

module.exports = {
  postcss: {
    options: {
      processors: [
        autoprefixer({browsers: ['last 2 versions']})
      ]
    },
    dist: {
      src: '<%= project.stylesheets %>/src/main.css',
      dest: '<%= project.stylesheets %>/dest/main.css'
    }
  }
};

[immagimario]

Hi Anatoly thanks your help ;-)

I tried the code you suggested, but it does not change the result.

Below you find output from console after command: $grunt postcss --verbose

Best regards Mario

$ grunt postcss --verbose
Initializing
Command-line options: --verbose

Reading "Gruntfile.js" Gruntfile...OK

Registering Gruntfile tasks.
Initializing config...OK

Registering "grunt-bowercopy" local Npm module tasks.
Reading /Users/mario.montalto/Progetti/start-web-site/frontend/node_modules/grunt-bowercopy/package.json...OK
Parsing /Users/mario.montalto/Progetti/start-web-site/frontend/node_modules/grunt-bowercopy/package.json...OK
Reading bower.json...OK
Parsing bower.json...OK
Loading "bowercopy.js" tasks...OK
+ bowercopy

Registering "grunt-contrib-sass" local Npm module tasks.
Reading /Users/mario.montalto/Progetti/start-web-site/frontend/node_modules/grunt-contrib-sass/package.json...OK
Parsing /Users/mario.montalto/Progetti/start-web-site/frontend/node_modules/grunt-contrib-sass/package.json...OK
Loading "sass.js" tasks...OK
+ sass

Registering "grunt-contrib-watch" local Npm module tasks.
Reading /Users/mario.montalto/Progetti/start-web-site/frontend/node_modules/grunt-contrib-watch/package.json...OK
Parsing /Users/mario.montalto/Progetti/start-web-site/frontend/node_modules/grunt-contrib-watch/package.json...OK
Loading "watch.js" tasks...OK
+ watch

Registering "grunt-modernizr" local Npm module tasks.
Reading /Users/mario.montalto/Progetti/start-web-site/frontend/node_modules/grunt-modernizr/package.json...OK
Parsing /Users/mario.montalto/Progetti/start-web-site/frontend/node_modules/grunt-modernizr/package.json...OK
Loading "modernizr.js" tasks...OK
+ modernizr

Registering "grunt-postcss" local Npm module tasks.
Reading /Users/mario.montalto/Progetti/start-web-site/frontend/node_modules/grunt-postcss/package.json...OK
Parsing /Users/mario.montalto/Progetti/start-web-site/frontend/node_modules/grunt-postcss/package.json...OK
Loading "postcss.js" tasks...OK
+ postcss

Registering "grunt-slim" local Npm module tasks.
Reading /Users/mario.montalto/Progetti/start-web-site/frontend/node_modules/grunt-slim/package.json...OK
Parsing /Users/mario.montalto/Progetti/start-web-site/frontend/node_modules/grunt-slim/package.json...OK
Loading "slim.js" tasks...OK
+ slim
Loading "Gruntfile.js" tasks...OK
+ default

Running tasks: postcss

Running "postcss" task

Running "postcss:postcss" (postcss) task
Verifying property postcss.postcss exists in config...OK
File: [no files]
Options: processors=[null], map, diff=false, safe=false, failOnError=false, writeDest

Done.

[SolomoN-ua]

Hi @immagimario, ok I've checked your https://github.com/immagimario/start-web-site and found a reason: you have mistake in your postcss.js config file, please remove dist, so it should look something like this:

 module.exports = {
  postcss: { // please note: in this case this is target name not plugin name (so you can put any keyword, like: foo or dist or production etc.)
    options: {
      processors: [
        require('autoprefixer')(),
      ]
    },
    src: '<%= project.stylesheets %>/src/main.css',
    dest: '<%= project.stylesheets %>/dest/main.css'
  }
};

Regards, Anatoliy

[immagimario]

Hello Anatoliy It works!!! I thank you very much for availability ;-)

And congratulations for the great plugin !!!

Have a good day Mario

[immagimario]

Hello Anatoliy having the need to re-compile multiple files, I tried to find the solution inserting them in "files", written as follows:

module.exports = {
  postcss: { // please note: in this case this is target name not plugin name (so you can put any keyword, like: foo or dist or production etc.)
    options: {
      processors: [
        require('autoprefixer')({browsers: ['last 2 versions']}),
      ]
    },
        files: {
            '<%= project.stylesheets %>/dest/main.css': '<%= project.stylesheets %>/src/main.css',
            '<%= project.stylesheets %>/dest/vendor.css': '<%= project.stylesheets %>/src/vendor.css',
    }
  }
};

Have a good day Mario

[SolomoN-ua]

Hi @immagimario, is there any problems with it, I believe that it should works with files: {} also. :)

[immagimario]

Thanks Anatoliy, it works!