Grunt less won't replace css file

Question

I use grunt-contrib-less with grunt-contrib-watch to compile my less files automatically upon change. When the css is not present, grunt compiles it ok. When a css already exists and watch sees the less file changed, the css file is not modified. I have to remove it every time and let grunt recreate it with the modifications.

less config:

less: {
    options: {
        banner: '<%= meta.banner %>'
    },
    dev: {
        options: {
            sourceMap: true,
            sourceMapFileInline: true,
            compress: true
        },
        src: '<%= meta.dev.less %>/main.less',
        dest: '<%= meta.prod.css %>/main.css'
    },
    prod: {
        options: {
            plugins: [
                new( require( 'less-plugin-clean-css' ) )( {
                    'advanced': true,
                    'compatibility': 'ie9'
                } )
            ],
        },
        src: '<%= meta.dev.less %>/main.less',
        dest: '<%= meta.prod.css %>/main.css'
    }
},

I'm under Windows 10 and every user have the rights to modifiy/delete the files in my dist folder. How can I let grunt modify the css file?

EDIT

watch config

watch: {
    options: {
        livereload: 6325
    },
    js: {
        files: [ '<%= meta.dev.js %>/main.js', '<%= meta.dev.js %>/plugins/*.js' ],
        tasks: [ 'newer:concat' ]
    },
    images: {
        files: '<%= meta.dev.img %>/**/*.{png,jpg,gif,svg}',
        tasks: [ 'newer:imagemin' ]
    },
    css: {
        files: '<%= meta.dev.less %>/**/*.less',
        tasks: [ 'newer:less:dev' ]
    }
}

Registration

grunt.registerTask( 'default', [ 'less:dev', 'concat', 'imagemin', 'copy', 'watch' ] );

Grunt output (verbose)

>> File "dev\less\elements\menu.less" changed.
Initializing
Command-line options: --verbose

Reading "Gruntfile.js" Gruntfile...OK

Registering Gruntfile tasks.
Reading package.json...OK
Parsing package.json...OK
Initializing config...OK
Loading "Gruntfile.js" tasks...OK
+ default, prod

Running tasks: newer:less:dev

Loading "grunt-newer" plugin

Registering "D:\[...]\static\node_modules\grunt-newer\tasks" tasks.
Loading "newer.js" tasks...OK
+ any-newer, newer, newer-clean, newer-postrun

Running "newer:less:dev" (newer) task
Options: cache="D:\\[...]\\static\\node_modules\\grunt-newer\\.cache", override=undefined
Files: dev/less/main.less -> dist/css/main.css
No newer files to process.

score 2 · Accepted Answer · answered Nov 03 '15 at 20:22

2

Here's what happens:

you modify menu.less
watch detects that and runs newer:less:dev
less:dev uses file main.less as only source (not menu.less)
that file hasn't changed, so newer concludes it doesn't need to run the task again

I suppose main.less includes menu.less, but newer doesn't know it. So my suggested fix would be to get rid of the newer part.

answered Nov 03 '15 at 20:22

Xavier Priour

2,121
1
12
16

You are right, if I add a css line in main.less it works. So I got rid of newer in watch task and everything is fine. Thank you! – Kodiak Nov 04 '15 at 11:25

score 0 · Answer 2 · answered Nov 02 '15 at 16:56

0

Have you added correct watch config for less ?

 watch: {
  less: {
    files: ['less/**/*.less'], // which files to watch
    tasks: ['less'],
    options: {
      nospawn: true
    }
  }
}

To run grunt with your profile : grunt.registerTask('myprofile', ['less:dev', 'watch']);

answered Nov 02 '15 at 16:56

Donald

534
1
10
18

Hi, I edited my question with the elements from my gruntfile. – Kodiak Nov 02 '15 at 17:29
Are you sure that livereload work properly ? For example if you change an html, watch reload it ? I neither understand what's "newer" task. – Donald Nov 03 '15 at 07:54
No, I don't use livereload. But watch works properly, it reacts when I change my less files and less creates the css file if it doesn't exist. – Kodiak Nov 03 '15 at 09:33
I added the verbose output of grunt when I update a less file – Kodiak Nov 03 '15 at 09:41

Grunt less won't replace css file

2 Answers2