使用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。和它工作

 凹槽$（ProjectDir）Content\bootstrap \bootstrap.less--compress> $（ProjectDir）Content\bootstrap-compiled.css
  

Bootstrap 3.1.1，他们说 Grunt 会做它。我试过：

  grunt-contrib-less$（ProjectDir）Content\bootstrap \bootstrap.less - 压缩> $（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 ，并定义一个目标来做任何更少的编译（例如更少）


• 添加调用grunt少到你的预构建事件（如果您没有指定CALL，那么进程不会在grunt之后返回）

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

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

1. 删除引导程序并安装引导程序：

    卸载软件包bootstrap 
    Install-Package Twitter.Bootstrap.less 
    



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


3. p>确保grunt-cli在全球安装：

     npm install -g grunt-cli 
     




4. 创建package.json文件：

     npm init 
     



5. 在本地安装grunt和grunt-安装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 
   }，
   文件：{
   'Content / bootstrap.debug.css'：'Content / bootstrap / bootstrap.less'，
   } 
   }，
    production：{
    options：{
    cleancss：true，
    compress：true，
    relativeUrls：true 
   }，
   文件：{
   'Content / bootstrap.css'：'Content / bootstrap / bootstrap.less'，
   } 
   } 
   }，
    $ b b}）; 
    
    grunt.loadNpmTasks（'grunt-contrib-less'）; 
    
    //默认任务。 
    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构建输出中删除一些控制字符）

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




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)Content\bootstrap\bootstrap.less" --compress > "$(ProjectDir)Content\bootstrap-compiled.css"

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

grunt-contrib-less "$(ProjectDir)Content\bootstrap\bootstrap.less" --compress > "$(ProjectDir)Content\bootstrap-compiled.css"

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

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:

• 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)

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.

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

1. Remove bootstrap and install bootstrap less:

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

2. Open a command prompt and cd to your project directory

3. Ensure grunt-cli is installed globally:

   npm install -g grunt-cli
   

4. Create a package.json file:

   npm init
   

5. Install grunt and grunt-contrib-less locally: npm install grunt grunt-contrib-less`

6. Create a file in your project called Gruntfile.js with the following contents:

   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. Edit your Visual Studio pre-build event to include:

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

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

8. Build your project, then enable show all files, and incldue the two compiled css files in your project (so that web deploy picks them up).

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