Question

我在Visual Studio 2013中使用以下作为预构建事件来编译Bootstrap 3.0并根据this answer进行隐藏，并且它有效

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并提前休息，然后＆gt; npm install grunt-contrib-less然后确保＆gt; 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的分步指南：

删除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构建输出中删除一些控制字符）
构建您的项目，然后启用show all files，并将项目中的两个已编译的css文件包含在内（以便Web部署将它们选中）。

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

1 个答案: