Grunt、Less和文件监视

Question

我正在尝试使用grunt完成一些操作。我的项目看起来像这样:

/app
    /assets
        /components
        /stylesheets
            /less
                /file1.less
                /file2.less
                /file3.less
                /importAll.less
            /css

我希望当保存file1、file2或file3时，将importAll.less文件编译为css并放入/css/style.css中。目前只完成了这一步。

less: {
    development: {
        options: {
            paths: ["./assets/stylesheets/less"],
            yuicompress: true
        },
        files: {
            "./assets/stylesheets/css/style.css": "./assets/stylesheets/less/importAll.less"
        }
    }
}

我不确定如何让文件监视器起作用。

- ThomasReggi

Answer 1

我用以下方法解决了这个问题！

module.exports = function(grunt) {
    grunt.initConfig({
        less: {
            development: {
                options: {
                    paths: ["./assets/stylesheets/less"],
                    yuicompress: true
                },
                files: {
                    "./assets/stylesheets/css/style.css": "./assets/stylesheets/less/style.less"
                }
            }
        },
        watch: {
            files: "./assets/stylesheets/less/*",
            tasks: ["less"]
        }
    });
    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.loadNpmTasks('grunt-contrib-watch');
};

- ThomasReggi

---

对于像我这样的新手，可能需要提醒一下，要想只运行 grunt 命令，你需要定义默认任务，例如 grunt.registerTask('default','watch');。参考文献请见文档。 - Victor Häggqvist

当less {}块中有多个任务时，它如何知道运行less:development？ - Pete

要仅运行“开发”部分，请使用 grunt less:development。grunt less 将运行所有在 less 下的内容。 - tivnet

新手提示（像我一样） - 为使任务更改生效，需要停止当前的观察任务并重新启动它（按CTRL + C停止）。 - Jerreck