Question

I’m working with Mac OS X 10.7.5 and I’m using Grunt to concate some js files and minify them. Now I want to also minify my css files. As grunt does not provide any functionality I wanted to install a grunt plugin for that.
According to the instructions i have to cd into my projects root folder and install the plugin with npm. So I did the following:

cd <PROJECT_ROOT>
npm install grunt-contrib-css

The instructions for the plugin are here: https://npmjs.org/package/grunt-contrib-mincss
The I opened my grunt.js file and added

grunt.loadNpmTasks('grunt-contrib-mincss');

But when I try to run grunt I just get

Local Npm module "grunt-contrib-mincss" not found. Is it installed?
<WARN> Task "mincss" not found. Use --force to continue. </WARN>

The installation works without any problem and npm ls does list the module.

Any ideas what I have done wrong? Many Thanks!

UPDATED

When I cd into a project like so

cd ~/Sites/path/to/project

and then install the plugin

sudo npm install grunt-contrib-mincss

the module is actually installed in

~/node_modules/grunt-contrib-mincss

I could hard copy the files into my projects root directory (which works) but it’s kind of strange isn’t it?

UPDATE 2
I’ve updated node and tried it again. Below is the console output.

me:~ Fritz$ node -v
v0.8.10
me:~ Fritz$ npm -v
1.1.62
me:~ Fritz$ mkdir ./Sites/npm-test
me:~ Fritz$ cd ./Sites/npm-test/
me:npm-test Fritz$ sudo npm install grunt-contrib-mincss
Password:
npm http GET https://registry.npmjs.org/grunt-contrib-mincss
npm http 304 https://registry.npmjs.org/grunt-contrib-mincss
npm http GET https://registry.npmjs.org/gzip-js
npm http GET https://registry.npmjs.org/clean-css
npm http GET https://registry.npmjs.org/grunt-contrib-lib
npm http 304 https://registry.npmjs.org/gzip-js
npm http 304 https://registry.npmjs.org/clean-css
npm http 304 https://registry.npmjs.org/grunt-contrib-lib
npm http GET https://registry.npmjs.org/crc32
npm http GET https://registry.npmjs.org/deflate-js
npm http GET https://registry.npmjs.org/optimist
npm http 304 https://registry.npmjs.org/deflate-js
npm http 304 https://registry.npmjs.org/crc32
npm http 304 https://registry.npmjs.org/optimist
npm http GET https://registry.npmjs.org/wordwrap
npm http 304 https://registry.npmjs.org/wordwrap
grunt-contrib-mincss@0.3.0 ../../node_modules/grunt-contrib-mincss
├── grunt-contrib-lib@0.3.0
├── gzip-js@0.3.1 (crc32@0.2.2, deflate-js@0.2.2)
└── clean-css@0.4.2 (optimist@0.3.4)

Why is the plugin installed outside? Or is there a way to define the actual location where it is installed?

Answer 1

This way to install worked for me:

1. cd <PROJECT_ROOT>.
2. Run npm install grunt-contrib-mincss.

3. Created test file in the current dir with the following testing content:

   module.exports = function(grunt) {
   
       grunt.initConfig({
           mincss: {
               compress: {
                   files: {
                       "path/to/output.css": ["path/to/input_one.css", "path/to/input_two.css"]
                   }
               }
           }
       });
   
       grunt.loadNpmTasks('grunt-contrib-mincss');
   
       grunt.registerTask('default', 'mincss');
   
   };
   

4. My directory structure looks like this at this moment (please check this, if some files are not there or in some other folder, then it can be reason why it doesn’t work):

   <PROJECT_ROOT> /
       node_modules /
           grunt-contrib-mincss/
       grunt.js
   

5. Run grunt in terminal.

Script worked.

Possible reasons why it didn’t work in your case:

1. You installed plugin globally (with -g argument).
2. You installed it in some subfolder (grunt.js and node_modules must be in the same folder).

Please check it.