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

Question

我在 Visual Studio 2013 中使用以下内容作为预构建事件，根据this answer 编译带有凹槽的 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。

Answer 1

我的工作方式略有不同：

• 确保您已全局安装 grunt-cli (npm install -g grunt-cli)
• 在您的项目或解决方案中创建一个 Gruntfile.js，并定义一个目标以执行所需的更少编译（例如更少）
• 将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 部署选择它们）。