如何编译保存在Visual Studio 2015中的.less文件（预览）

问题描述

好的，我在Visual Studio 2015中创建了一个新的 ASP.Net 5 / MVC 6 项目预习。按照我们目前的做法，对于样式，我希望使用 .less 文件。创建文件很简单，但Web Essentials不再编译它们。

所以我的问题是：我需要做些什么来获取我的 .css 当我保存 .less 文件时产生的文件？

我的冒险使Typescript很好地工作，我将不得不使用 Grunt 来完成这项任务，但我对Grunt是全新的，所以我不确定一个人会怎么做这样做吗？

请帮助！

解决方案

做到这一点（在构建时编译，在编译时不保存）：

b打开你的 package.json 文件（它在你的项目的根目录下），并添加下面几行：

 grunt-contrib-less：^ 1.0.0，
less：^ 2.1.2
  

显然，您可以更改版本号（您将获得有用的智能感知），但这些只是当前的版本rsions。

第2步 $ b

右键点击 NPM 文件夹（位于 Dependencies 下）并点击 Restore Packages 。这将安装 less 和 grunt-contrib-less 。

第3步

一旦这些软件包得到恢复，请转至您的 gruntfile.js 文件（再次，在项目的根目录中）。在这里，您需要将以下部分添加到 grunt.initConfig

  less：{
 development：{
 options：{
 paths：[importfolder] 
}，
 files：{
wwwroot / destinationfolder / destinationfilename.css：sourcefolder / sourcefile.less
} 
} 
} 
  

您还需要在 gruntfile.js 结尾处添加此行：

  grunt.loadNpmTasks（ 咕噜-的contrib少）; 
  

第4步

然后，在菜单中点击 View->其他Windows->任务运行程序资源管理器，然后点击刷新图标/按钮，然后右键点击<$ c在任务下进行$ c> less 并转到绑定并勾选生成后。

Hooray，现在编译的文件更少，我们学习了grunt，看起来非常强大。 >

第五步：在保存时编译

我还没有对我的工作满意度，但这是我到目前为止：

如上所述，添加另一个NPM包 grunt-contrib-watch


然后在gruntfile.js中添加一个watch部分，就像这样（显然这可以用于其他类型的文件）：



 手表：{
 less：{
 files：[sourcefolder / * .less]，
任务：[less]，
选项：{
 livereload：true 
} 
} 
} 
  

所以你现在可以在你的gruntfile.js中找到类似的东西：

  ///< ;绑定AfterBuild ='打字稿'/> 
 //用于定义grunt任务和使用grunt插件的主入口点中的此文件。 
 //点击这里了解更多信息。 http://go.microsoft.com/fwlink/?LinkID=513275&clcid=0x409 
 
 module.exports = function（grunt）{
 grunt.initConfig（{
 bower：{
 install：{
 options：{
 targetDir：wwwroot / lib，
 layout：byComponent，
 cleanTargetDir：false 
 } 
 $：$ {
}：{less / *。less]，
 tasks：[更少]，
选项：{
 livereload：true 
} 
} 
}，
减：{
开发：{
 options：{
 paths：[less] 
}，
 files：{
wwwroot / css / style.css：less / style.less 
} 
} 
} 
} ）; 
 
 //这个命令记录了将bower软件包安装到wwwroot / lib 
的默认任务grunt.registerTask（default，[bower：install]）; 
 
 //以下行加载grunt插件。 
 //此行需要位于此文件的末尾。 
 grunt.loadNpmTasks（grunt-bower-task）; 
 grunt.loadNpmTasks（grunt-contrib-less）; 
 grunt.loadNpmTasks（grunt-contrib-watch）; 
}; 
  

然后，您可以简单地将此任务设置为在Project Open上运行（右键单击<$ c $在任务运行资源管理器中（它位于<$ c $下），在任务下监视 c> View->其他Windows 在顶部菜单中），你就完成了。我预计你将不得不关闭并重新打开项目/解决方案来启动它，否则您可以手动运行任务。

Ok, so I've created a new ASP.Net 5/MVC 6 project in Visual Studio 2015 Preview. In keeping with our current method of doing things, for styling I want to use .less files. Creating the files is straightforward, but Web Essentials no longer compiles them.

So my question is this: what precisely do I need to do to get my .css files generated when I save the .less files?

Based on my adventures getting Typescript to work nicely, I will have to use Grunt to accomplish this task, but I am brand-new to Grunt and so I'm not sure how one would do it?

Please help!

解决方案

So here's how to do it (compile on build and non-elegant compile on save):

Step 1

Open up your package.json file (it's in the root of your project) and add these lines:

"grunt-contrib-less": "^1.0.0",
"less": "^2.1.2"

Obviously you can change the version numbers (you'll get helpful intellisense), these are just the current versions.

Step 2

Right-click on the NPM folder (under Dependencies) and click Restore Packages. This will install less and grunt-contrib-less.

Step 3

Once those packages are restored, go to your gruntfile.js file (again, in the root of the project). Here, you'll need to add the following section to grunt.initConfig

less: {
    development: {
        options: {
            paths: ["importfolder"]
        },
        files: {
            "wwwroot/destinationfolder/destinationfilename.css": "sourcefolder/sourcefile.less"
        }
    }
}

You'll also need to add this line near the end of gruntfile.js:

grunt.loadNpmTasks("grunt-contrib-less");

Step 4

Then just go to View->Other Windows->Task Runner Explorer in the menu hit the refresh icon/button, then right-click on less under Tasks and go to Bindings and tick After Build.

Hooray, now less files will compile and we (I) learned about grunt, which seems really powerful.

Step 5: Compiling on save

I still haven't got this working to my satisfaction, but here's what I've got so far:

As above, add another NPM package grunt-contrib-watch (add to package.json, then restore packages).

Then add a watch section in gruntfile.js, like this (obviously this can work for other types of files as well):

watch: {
    less: {
        files: ["sourcefolder/*.less"],
        tasks: ["less"],
        options: {
            livereload: true
        }
    }
}

So you'll now have something like this in your gruntfile.js:

/// <binding AfterBuild='typescript' />
// This file in the main entry point for defining grunt tasks and using grunt plugins.
// Click here to learn more. http://go.microsoft.com/fwlink/?LinkID=513275&clcid=0x409

module.exports = function (grunt) {
    grunt.initConfig({
        bower: {
            install: {
                options: {
                    targetDir: "wwwroot/lib",
                    layout: "byComponent",
                    cleanTargetDir: false
                }
            }
        },
        watch: {
            less: {
                files: ["less/*.less"],
                tasks: ["less"],
                options: {
                    livereload: true
                }
            }
        },
        less: {
            development: {
                options: {
                    paths: ["less"]
                },
                files: {
                    "wwwroot/css/style.css": "less/style.less"
                }
            }
        }
    });

    // This command registers the default task which will install bower packages into wwwroot/lib
    grunt.registerTask("default", ["bower:install"]);

    // The following line loads the grunt plugins.
    // This line needs to be at the end of this this file.
    grunt.loadNpmTasks("grunt-bower-task");
    grunt.loadNpmTasks("grunt-contrib-less");
    grunt.loadNpmTasks("grunt-contrib-watch");
};

One can then simply set this task to run on Project Open (right-click on watch under Tasks in the Task Runner Explorer (it's under View->Other Windows in the top menu) and you're done. I would expect you'd have to close and re-open the project/solution to get this to kick in, otherwise you can manually run the task.

这篇关于如何编译保存在Visual Studio 2015中的.less文件（预览）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！