使用 Grunt grunt-contrib-less) 在 Visual Studio 2013 中编译 Bootstrap 3.1 LESS

我在 Visual Studio 2013 中使用以下内容作为预构建事件，根据以下内容编译 Bootstrap 3.0：这个答案它起作用了

recess "$(ProjectDir)Content\bootstrap\bootstrap.less" --compress > "$(ProjectDir)Content\bootstrap-compiled.css"

现在这对 Bootstrap 3.1.1 不起作用，他们说Grunt会做的。我试过了：

grunt-contrib-less "$(ProjectDir)Content\bootstrap\bootstrap.less" --compress > "$(ProjectDir)Content\bootstrap-compiled.css"

但无法让它发挥作用。关于如何让 Grunt 与 VS 2013 一起工作的任何想法。

注：我已经安装了Node.js早点休息，然后 > npm install grunt-contrib-less 然后确保 >npm update grunt-contrib-less。

我的工作方式略有不同：

• 确保您已全局安装 grunt-cli (npm install -g grunt-cli)
• 在您的项目或解决方案中创建一个 Gruntfile.js，并定义一个目标来执行您想要的任何较少编译（例如 less）
• Add call grunt less到您的预构建事件（如果您不指定 CALL，则进程在 grunt 后不会返回）

如果您愿意，您可以将不同的目标添加到开发和生产构建流程中。您还可以为其他任务设置更多目标 - 我有一个，这样我就可以运行grunt watch如果我编辑的文件较少，会自动重新编译我的 CSS。

将 VS2013 示例项目转换为使用 less 和 Grunt 的分步指南：

1. 删除 bootstrap 并安装 bootstrap less：

   Uninstall-Package bootstrap
   Install-Package Twitter.Bootstrap.less
   

2. 打开命令提示符并 cd 到您的项目目录

3. 确保 grunt-cli 已全局安装：

   npm install -g grunt-cli
   

4. 创建 package.json 文件：

   npm init
   

5. 本地安装 grunt 和 grunt-contrib-less： npm install grunt grunt-contrib-less`

6. 在您的项目中创建一个名为Gruntfile.js包含以下内容：

   module.exports = function (grunt) {
       grunt.initConfig({
           pkg: grunt.file.readJSON('package.json'),
           less: {
               dev: {
                   options: {
                       sourceMap: true,
                       dumpLineNumbers: 'comments',
                       relativeUrls: true
                   },
                   files: {
                       'Content/bootstrap.debug.css': 'Content/bootstrap/bootstrap.less',
                   }
               },
               production: {
                   options: {
                       cleancss: true,
                       compress: true,
                       relativeUrls: true
                   },
                   files: {
                       'Content/bootstrap.css': 'Content/bootstrap/bootstrap.less',
                   }
               }
           },
   
       });
   
       grunt.loadNpmTasks('grunt-contrib-less');
   
       // Default task(s).
       grunt.registerTask('default', ['less']);
       grunt.registerTask('production', ['less:production']);
       grunt.registerTask('dev', ['less:dev']);
   };
   

7. 编辑 Visual Studio 预构建事件以包括：

   cd $(ProjectDir)
   call grunt --no-color
   

   (--no-color从 Visual Studio 构建输出中删除一些控制字符）

8. 构建您的项目，然后启用显示所有文件，并将两个已编译的 css 文件包含在您的项目中（以便 Web 部署拾取它们）。