使用 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

问题描述

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

I used the following as pre-build event in Visual Studio 2013 to compile Bootstrap 3.0 with recess according to this answer and it worked

recess "$(ProjectDir)Contentootstrapootstrap.less" --compress > "$(ProjectDir)Contentootstrap-compiled.css"

现在这不适用于 Bootstrap 3.1.1，他们说 Grunt 会做到的.我试过了:

Now this doesn't work for Bootstrap 3.1.1 and they say Grunt will do it. I've tried:

grunt-contrib-less "$(ProjectDir)Contentootstrapootstrap.less" --compress > "$(ProjectDir)Contentootstrap-compiled.css"

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

But can't get it to work. Any ideas how to get Grunt to work with VS 2013.

注意:我已经安装了 Node.js 并且更早休息，然后 > npm install grunt-contrib-less then to be sure >npm update grunt-contrib-less.

Note: I've Installed Node.js and recess earlier, then > npm install grunt-contrib-less then to be sure >npm update grunt-contrib-less.

推荐答案

我的工作方式略有不同:

I've got this working in a slightly different way:

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

• Ensure you've got grunt-cli installed globally (npm install -g grunt-cli)
• Create a Gruntfile.js in your project or solution, and define a target to do whatever less compiling you want (e.g. less)
• Add call grunt less to your pre-build event (if you don't specify CALL, then the process doesn't return after grunt)

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

You can add different targets to the development and production build processes if you like. You can also set up more targets for other tasks - I have one so I can run grunt watch to automatically recompile my CSS if I edit less files.

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

Step-by-step guide to converting the VS2013 sample project to use less and Grunt:

1. 删除引导程序并减少安装引导程序:

1. Remove bootstrap and install bootstrap less:

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

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

确保全局安装 grunt-cli:

Open a command prompt and cd to your project directory

Ensure grunt-cli is installed globally:

npm install -g grunt-cli

创建一个 package.json 文件:

Create a package.json file:

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 预构建事件以包括:

Edit your Visual Studio pre-build event to include:

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

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

(--no-color removes some of the control characters from the Visual Studio build output)

这篇关于使用 Grunt grunt-contrib-less) 在 Visual Studio 2013 中编译 Bootstrap 3.1 LESS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！