Могу ли я изменить .less на a.min.css с исходной картой и все еще иметь возможность просматривать бездействующие файлы в Dev Tools?

Question

Я использую этот файл grunt, чтобы изменить файл .less на .css-файлы.

module.exports = function (grunt) { 
    grunt.initConfig({ 

     less: { 
      development: { 
       files: [{ 
        expand: true, 
        cwd: 'assets/less', 
        src: ['*.less'], 
        dest: 'wwwroot/content/css/', 
        ext: '.css' 
       }] 
      }, 
      production: { 
       files: { 
        "wwwroot/content/css/script.css": ["assets/less/*.less"] 
       }, 
       options: { 
        cleancss: true 
       } 
      } 
     } 
    }); 
    grunt.loadNpmTasks("grunt-contrib-less"); 
}; 

Для моего развития строить, если у меня есть десять .less файлов, то это создаст десять .css файлов, а затем я буду иметь возможность просматривать их в инструменты Chrome развития и легко отлаживать.

Причина, по которой я делаю это, так что я смогу отлаживать и просматривать эти десять файлов .css в инструментах разработки Chrome.

Является ли мое рассуждение правильным? Я слышал об исходных картах, но как я мог использовать их в своей сборке разработки , и если бы я использовал их, то мог ли я по-прежнему видеть исходные имена файлов .css или даже лучше десяти бездействующих файлов?

Answer 1

TL; DR да на все ваши вопросы;)

Для использования карты источника с Gruntfile, просто добавьте параметр как этого

less: { 
    development: { 
     options: { 
      sourceMap: true 
     }, 
     files: [{ 
      expand: true, 
      cwd: 'assets/less', 
      src: ['*.less'], 
      dest: 'wwwroot/content/css/', 
      ext: '.css' 
     }] 
    }, 

См grunt-contrib-less страницы для получения дополнительной информации об опции доступна , Возможно, в зависимости от вашей рабочей среды вы должны добавить параметр sourceMapRootpath, чтобы указать, где находятся ваши файлы. В конце ваш .css-файл должен иметь длинную прокомментированную строку в конце. Это исходная карта.

Есть два бит старого, но-большое введение исходных карт: Debug LESS With Chrome Developer Tools и Introduction to JavaScript Source Maps