Grunt less 不会替换 css 文件答案

【问题标题】：Grunt less won't replace css fileGrunt less 不会替换 css 文件
【发布时间】：2016-02-02 05:34:44
【问题描述】：

我使用 grunt-contrib-less 和 grunt-contrib-watch 在更改时自动编译我的 less 文件。当 css 不存在时，grunt 编译它就可以了。当一个 css 已经存在并且 watch 看到 less 文件被改变时， css 文件不会被修改。我每次都必须删除它，让 grunt 通过修改重新创建它。

更少的配置：

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'
    }
},

我在 Windows 10 下，每个用户都有权修改/删除我的 dist 文件夹中的文件。如何让 grunt 修改 css 文件？

编辑

观看配置

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' ]
    }
}

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

Grunt 输出（详细）

>> 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.

【问题讨论】：

标签： gruntjs less grunt-contrib-less

【解决方案1】：

发生了什么：

你修改menu.less
watch 检测到并运行newer:less:dev
less:dev 使用文件 main.less 作为唯一来源（不是 menu.less）
那个文件没有改变，所以newer 断定它不需要再次运行任务

我想main.less 包括menu.less，但newer 不知道。所以我建议的解决方法是去掉 newer 部分。

【讨论】：

你是对的，如果我在 main.less 中添加一个 css 行，它就可以工作。所以我摆脱了新的手表任务，一切都很好。谢谢！

【解决方案2】：

您是否为 less 添加了正确的手表配置？

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

使用您的个人资料运行 grunt：grunt.registerTask('myprofile', ['less:dev', 'watch']);

【讨论】：

嗨，我用 gruntfile 中的元素编辑了我的问题。
你确定 livereload 工作正常吗？例如，如果您更改了一个 html，请观看重新加载它？我也不明白什么是“新”任务。
不，我不使用 livereload。但是 watch 工作正常，当我更改我的 less 文件时它会做出反应，如果 css 文件不存在，它会创建它。
我在更新 less 文件时添加了 grunt 的详细输出