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

Posted 2023-03-06

【中文标题】使用 Grunt grunt-contrib-less) 在 Visual Studio 2013 中编译 Bootstrap 3.1 LESS

【英文标题】：Using Grunt grunt-contrib-less) for compiling Bootstrap 3.1 LESS in Visual Studio 2013

【发布时间】：2014-04-30 12:00:09

【问题描述】：

我在 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。

【参考方案1】：

我的工作方式略有不同：

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

您可以根据需要向开发和生产构建过程添加不同的目标。您还可以为其他任务设置更多目标 - 我有一个，因此如果我编辑较少的文件，我可以运行 grunt watch 来自动重新编译我的 CSS。

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

移除 bootstrap 并安装 bootstrap less：

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

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

确保全局安装 grunt-cli：

npm install -g grunt-cli

创建一个 package.json 文件：

npm init

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

在您的项目中创建一个名为 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']);
;

编辑您的 Visual Studio 预构建事件以包括：

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

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

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

【讨论】：

谢谢@Richard，因为我对这个问题不太熟悉，你认为同样的预构建事件会起作用吗？知道是否有其他资源/示例？

没有名为grunt-contrib-less 的程序——它是一个节点模块，必须通过它执行。最简单的方法是在 Gruntfile.js 中定义您的任务 - 请参阅 Grunt-contrib-less page 指南以获取此文件中内容的示例。然后，您需要将预构建事件修改为我上面的示例。

我添加了一个完整的演练，将 Visual Studio 入门项目转换为使用 less 和 grunt 来编译它。希望您可以根据自己的需要进行调整。

哦，非常感谢您的努力.. 将尝试并让您知道。顺便说一句，我发现 VS WebEssentials 只需保存较少的内容，但还不确定结果。

prebuild 事件中的 cd 命令和 call grunt 命令之间应该有一个换行符。