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

我使用以下作为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并提前休息,然后> npm install grunt-contrib-less然后确保> npm update grunt-contrib-less.

最佳答案
我的工作方式略有不同:

>确保您已全局安装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部署文件).

转载注明原文:css – 使用Grunt grunt-contrib-less)在Visual Studio 2013中编译Bootstrap 3.1 LESS - 代码日志