用Grunt編譯更少的文件

Question

在這里完成對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']);

};

Answer 1

您根本不需要調用LESS任務。 要調用它，請在已注冊的任務中添加任務名稱

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

請參閱文檔以了解有關任務注冊的更多信息： http : //gruntjs.com/creating-tasks

編輯：

我看到您創建了一個watch任務，因此，如果您不是手動調用LESS任務而是通過監視文件，請確保在修改文件之前已在終端中執行grunt watch （並且未關閉終端窗口）

Answer 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"]); 

Answer 3

將所有較少的文件移動到一個文件，如下所示：

Somefile.less：

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

並嘗試以下操作：

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