如何使用Grunt为LESS配置sourceMaps？ [英] How to configure sourceMaps for LESS using Grunt?

问题描述

我使用grunt 0.4.2和grunt-contrib-less 0.9.0。

我的LESS文件位于 public / less ，主要的是 main.less 。

编译 public /less/main.less 转换为 public / css / main.css 的作品，但源地图无效。

下面的Grunt配置出了什么问题？

  {
 less：{ 
 dev：{
 options：{
 compress：true，
 yuicompress：true，
优化：2，
 sourceMap：true，
 sourceMapFilename：public / css / main.css.source-map.json，//将源地图用给定的文件名写入单独的文件。 
 sourceMapBasepath：public / less，//设置源地图中Less文件路径的基本路径。 
 sourceMapRootpath：///将此路径添加到源地图中的Less文件路径。 
}，
文件：{
public / css / main.css：public / less / main.less
} 
} 
 }，
 watch：{
 styles：{
 files：[public / less / *]，
 tasks：['less']，
 options： {
 livereload：true，
 nospaces：true 
} 
} 
} 
} 
  

我不想在我的 / public / less 文件夹中创建我的CSS;我想把它放到 / public / css 中。否则，我可以使用这个工作的其他配置：

  {
 less：{
 dev： {
 options：{
 compress：true，
 yuicompress：true，
优化：2，
 sourceMap：true，
 sourceMapFilename：public / less / main.css.map，/ /我不希望这里的CSS映射
 sourceMapBasepath：public / less，//设置源地图中Less文件路径的基本路径。 
}，
文件：{
public / less / main.css：public / less / main.less//我不想要这里的CSS 
} 
} 
}，
 watch：{
 styles：{
 files：[public / less / *]，
 tasks：['less ']，
选项：{
 livereload：true，
 nospaces：true 
} 
} 
} 
} 
  

解决方案

我发现LESS网站的文档更加清楚grunt-

LESS：命令行用法
http://lesscss.org/usage/#command-line-usage-installing-lessc

NPM：grunt-contrib-less
https：//www.npmjs .ORG /包/咕噜-重大贡献b-less

文件结构：

  laravel /gruntfile.js 
 laravel / public / less / main.less 
 laravel / public / css / main.css 
 laravel / public / css / main.css.map 
  

文件'main.css.map'注意：

• 如果你愿意，你可以重新命名为：main.css.source-map.json


• 我猜你有一些不服务器*的服务器规则设置。从'css'文件夹正确映射文件

压缩注释：

• cleancss：true =将从main.css中删除sourceMappingURL注释
  
• yuicompress：true =不会从main.css中删除sourceMappingURL注释
  
  
  

  Gruntfile.js

  
  
  

    less：{
   dev：{
   options：{
   compress：true，
   yuicompress：true，
  优化：2，
   sourceMap：true，
   sourceMapFilen ame：'public / css / main.css.map'，//生成并定位文件
   sourceMapURL：'/css/main.css.map'，//完整的url和filename放入编译css文件
   sourceMapBasepath：'public'，//设置sourcemap基本路径，默认为当前工作目录。 
   sourceMapRootpath：'/'，//将此路径添加到源图文件名和更少的文件路径
  }，
  文件：{
  'public / css / main.css'： 'public / less / main.less'，
  } 
  } 
  }，
   
   watch：{
   styles：{
   files： [public / less / *]，
  任务：['less']，
  选项：{
   livereload：true，
   nospaces：true 
  } 
  } 
  }，
    

  
  
  

  laravel / public / css / main.css h3>
  
  

    .class {编译后的css here} / *＃sourceMappingURL = / css / main.css.map * / 
    

  
  
  

  laravel / public / css / main.css.map

  
  
  

    {version：3，sources：[/ less / main.less]等... 
    

  
  

  I'm using grunt 0.4.2 and grunt-contrib-less 0.9.0. I want my LESS to be compiled into CSS with support for source maps.

  My LESS files are in public/less, and the main one is called main.less.

  The compiling of public/less/main.less into public/css/main.css works, but source maps don't work.

  What is wrong with my Grunt config below?

  {
      less: {
          dev: {
              options: {
                  compress: true,
                  yuicompress: true,
                  optimization: 2,
                  sourceMap: true,
                  sourceMapFilename: "public/css/main.css.source-map.json", //Write the source map to a separate file with the given filename.
                  sourceMapBasepath: "public/less", //Sets the base path for the Less file paths in the source map.
                  sourceMapRootpath: "/"//Adds this path onto the Less file paths in the source map.
              },
              files: {
                  "public/css/main.css": "public/less/main.less"
              }
          }
      },
      watch: {
          styles: {
              files: ["public/less/*"],
              tasks: ['less'],
              options: {
                  livereload: true,
                  nospaces: true
              }
          }
      }
  }
  

  I don't want to have my CSS created in my /public/less folder; I want to put it into /public/css. Otherwise, I could use this other config, which works:

  {
      less: {
          dev: {
              options: {
                  compress: true,
                  yuicompress: true,
                  optimization: 2,
                  sourceMap: true,
                  sourceMapFilename: "public/less/main.css.map", //I DO NOT WANT THE CSS MAP HERE
                  sourceMapBasepath: "public/less", //Sets the base path for the Less file paths in the source map.
              },
              files: {
                  "public/less/main.css": "public/less/main.less"//I DO NOT WANT THE CSS HERE
              }
          }
      },
      watch: {
          styles: {
              files: ["public/less/*"],
              tasks: ['less'],
              options: {
                  livereload: true,
                  nospaces: true
              }
          }
      }
  }
  

  解决方案

  I found the LESS site documentation to be more clear regarding params used by grunt-contrib-less.

  LESS: Command Line Usage http://lesscss.org/usage/#command-line-usage-installing-lessc

  NPM: grunt-contrib-less https://www.npmjs.org/package/grunt-contrib-less

  File structure:

  laravel/gruntfile.js
  laravel/public/less/main.less
  laravel/public/css/main.css
  laravel/public/css/main.css.map
  

  File 'main.css.map' note:

  • If you wish, you can rename to: main.css.source-map.json
  • I guess you have some server rule setup that doesn't server *.map files properly from the 'css' folder

  Compression notes:

  • cleancss: true = will remove sourceMappingURL comment from main.css
  • yuicompress: true = will NOT remove sourceMappingURL comment from main.css

  Gruntfile.js

  less: {
      dev: {
          options: {
              compress: true,
              yuicompress: true,
              optimization: 2,
              sourceMap: true,
              sourceMapFilename: 'public/css/main.css.map', // where file is generated and located
              sourceMapURL: '/css/main.css.map', // the complete url and filename put in the compiled css file
              sourceMapBasepath: 'public', // Sets sourcemap base path, defaults to current working directory.
              sourceMapRootpath: '/', // adds this path onto the sourcemap filename and less file paths
          },
          files: {
              'public/css/main.css': 'public/less/main.less',
          }
      }
  },
  
  watch: {
      styles: {
          files: ["public/less/*"],
          tasks: ['less'],
          options: {
              livereload: true,
              nospaces: true
          }
      }
  },
  

  laravel/public/css/main.css

  .class{ compiled css here } /*# sourceMappingURL=/css/main.css.map */
  

  laravel/public/css/main.css.map

  {"version":3,"sources":["/less/main.less"], etc...
  

  这篇关于如何使用Grunt为LESS配置sourceMaps？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！