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

Question

我使用以下作为Visual Studio 2013中的预构建事件来根据此答案编译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. 构建项目,然后启用show all files,并将项目中的两个已编译的css文件包含在内(以便web部署它们).