使用 Grunt 编译更少的文件答案

【问题标题】：Compiling less files with Grunt使用 Grunt 编译更少的文件
【发布时间】：2014-07-16 13:37:06
【问题描述】：

在这里完全是 Grunt 的新手，但基本上我正在尝试使用 Grunt 来做一些事情。缩小一个JS文件，将多个LESS文件编译成一个CSS文件。

javascript 位有效，即我的文件 custom.js 压缩为一个名为 custom.min.js 的文件，但是 LESS 位根本不起作用（没有错误，只是无法编译）。谁能看出这是为什么？

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      build: {
        src: 'scripts/custom.js',
        dest: 'scripts/custom.min.js'
      }
    },
    less: {
      build: {
        src: 'less/*.less',
        dest: 'style.css'
      }
    },
    watch: {
        files: ['scripts/custom.js'],
        tasks: ['uglify','less']
    }

  });

  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-less');

  // Default task(s).
  grunt.registerTask('default', ['uglify']);

};

【问题讨论】：

你在运行命令grunt less吗？
我正在运行grunt watch，它应该同时运行这两个任务。问题在于目前的任务较少，因为 JS 任务运行完美

标签： javascript css node.js gruntjs less

【解决方案1】：

您根本不调用 LESS 任务。要调用它，请在已注册的任务中添加任务名称

grunt.registerTask('default', ['uglify','less']);

查看文档以了解有关任务注册的更多信息：http://gruntjs.com/creating-tasks

编辑：

我看到你创建了一个watch任务，所以如果你不手动调用LESS任务而是通过查看文件，请确保在修改之前已经在终端中执行了grunt watch（并且没有关闭终端窗口）文件

【讨论】：

是的，我正在运行grunt watch 命令。 JS 任务完美运行，但 Less 任务根本不运行

【解决方案2】：

您应该在 watch 语句中包含对 less 任务的调用，例如：

         watch: {
            livereload: {
              options: { livereload: true },
              files: ["public/css/main.css", "public/css/less/*.less", "public/html/*.html", "public/js/*.js"]
            },
            scripts: {
                files: ["public/js/*.js"],
                tasks: ["jshint"]
            },
            less: {
                files: ["public/css/*.less", "public/css/less/*.less"],
                tasks: ["less", "csslint"], 
                options: {
                    nospawn: true
                }
            }
        },
        less: {
            development: {
                options: {
                    compress: true,
                    yuicompress: false,
                    optimization: 2,
                    cleancss:false,  
                    paths: ["css"],   
                    syncImport: false,
                    strictUnits:false,
                    strictMath: true,
                    strictImports: true,
                    ieCompat: false    
                },
                files: {
                    "public/css/main.css": "public/css/main.less"
                }
            }
        }

然后也只需使用 watch 注册默认任务：

grunt.registerTask("default", ["express", "open:dev", "watch"]);

【讨论】：

【解决方案3】：

将所有 less 文件移动到一个文件中，如下所示：

Somefile.less:

@import '../bootstrap/bootstrap.less';
@import 'site.less';

然后尝试以下方法：

less: {
  build: {
    files: {
        'style.css': 'less/somefile.less'
    }
  }
}

【讨论】：

我已经有一个名为 style.less 的文件，它可以导入我所有的 less 文件。问题是，如果我更改较少的文件之一，这将不起作用，因为我没有明确更改 style.less 文件 - 只是包含的文件之一。如果这有意义？