Bootstrap "grunt watch" wont create bootstrap.min.css

Question

I am almost absolutely new to grunt. I used grunt with bootstrap 3.1.1 and the grunt watch-command worked out great. My bootstrap.min.css file was compiled every time. (i upload my bootstrap.min.css)

Later on i lost my 3.1.1 grunt file (long story short my computer crashed). So now with Bootstrap 3.2.0 i was going to restablish my grunt-work-flow.

But now when i use grunt watch i only get the "bootstrap.css" and "bootstrap.theme.css" compiled.

I have spent the last hours to figure this out without success.

WHAT I WANT I want grunt watch to compile the minified "bootstrap.min.css" So how do i call the min.css-function on the watch?

I will be glad to get some help.

Answer 1

Grunt watch will only watch the files then run tasks you have set. I am assuming in your gruntfile you ahve something like this:

css: {
    files: [
      'bootstrap.css',
    ],
    tasks: ['less'],
  },

In the less task you should have something like below. Note the cleancss option being set to true:

options: {
      cleancss: true
    },

    files: {
      "dest/bootstrap.min.css": "src/bootstrap.css",
      "dest/bootstrap.theme.min.css": "src/bootstrap.theme.css"
    }

UPDATE:

Based on the file you uploaded you should be running the cssmin:core task when the watch is triggered.

UPDATE 2: To update the watch task you can just add the cssmin:core task to the less subtask:

less: {
        files: 'less/**/*.less',
        tasks: ['less', 'cssmin:core]
      }

Here you are telling it to run the less task, followed by the cssmin task whenever one of the less files is changed while watching.

Answer 2

Your gruntfile.js will have a 'watch' section as below

    watch: {
      src: {
        files: '<%= jshint.core.src %>',
        tasks: ['jshint:src', 'qunit', 'concat']
      },
      test: {
        files: '<%= jshint.test.src %>',
        tasks: ['jshint:test', 'qunit']
      },
      less: {
        files: 'less/**/*.less',
        tasks: 'less'
      }
    },

The tasks under less subsection define the tasks that 'grunt watch' will run. In Bootstrap 3.3.2 (I guess in 3.1.1 also it would be the same) is the 'cssmin' task that minifies the core bootstrap css. So you need to add the task to less so the code above becomes

    watch: {
      src: {
        files: '<%= jshint.core.src %>',
        tasks: ['jshint:src', 'qunit', 'concat']
      },
      test: {
        files: '<%= jshint.test.src %>',
        tasks: ['jshint:test', 'qunit']
      },
      less: {
        files: 'less/**/*.less',
        tasks: ['less', 'cssmin']
      }
    },