Grunt，Less和File Watching [英] Grunt, Less, and File Watching

问题描述

我试图让咕噜努力去做一些事情。我的项目如下所示：

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

我希望它能在 file1 ，文件2 或 file3 被保存， importAll.less 文件被编译成css和put到 /css/style.css 中。这是我得到的。

  less：{
开发：{
 options：{
 paths：[./assets/stylesheets/less]，
 yuicompress：true 
}，
 files：{
./assets/stylesheets/css/ style.css：./assets/stylesheets/less/importAll.less
} 
} 
} 
  

我不确定如何让文件监视器正常工作。


解决方案

  module.exports = function（grunt）{
 grunt.initConfig（{ 
 less：{
 development：{
 options：{
 paths：[./assets/stylesheets/less]，
 yuicompress：true 
 }，
文件：{
./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'）; 
}; 
  




I'm trying to get grunt working to do something. My project looks like this:

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

I want it so that when file1, file2, or file3 are saved the importAll.less file is compiled into css and put into /css/style.css. This is as far as I got.

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

I'm not sure how to get the file watcher working.

解决方案

I got it working with the following!

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');
};

这篇关于Grunt，Less和File Watching的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！