如何编译保存在Visual Studio 2015中的.less文件（预览） [英] How to compile .less files on save in Visual Studio 2015 (preview)
问题描述
好的，我在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 右键点击 第3步 一旦这些软件包得到恢复，请转至您的 您还需要在 第4步 Hooray，现在编译的文件更少，我们学习了grunt，看起来非常强大。 > 第五步：在保存时编译 我还没有对我的工作满意度，但这是我到目前为止： 如上所述，添加另一个NPM包 然后在gruntfile.js中添加一个watch部分，就像这样（显然这可以用于其他类型的文件）： 所以你现在可以在你的gruntfile.js中找到类似的东西： 然后，您可以简单地将此任务设置为在Project Open上运行（右键单击<$ c $在 Ok, so I've created a new So my question is this: what precisely do I need to do to get my Based on my adventures getting Typescript to work nicely, I will have to use Please help! So here's how to do it (compile on build and non-elegant compile on save): Step 1 Open up your Obviously you can change the version numbers (you'll get helpful intellisense), these are just the current versions. Step 2 Right-click on the Step 3 Once those packages are restored, go to your You'll also need to add this line near the end of Step 4 Then just go to 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 Then add a watch section in gruntfile.js, like this (obviously this can work for other types of files as well): So you'll now have something like this in your gruntfile.js: One can then simply set this task to run on Project Open (right-click on 这篇关于如何编译保存在Visual Studio 2015中的.less文件（预览）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ NPM 文件夹（位于 Dependencies 下）并点击 Restore Packages 。这将安装 less 和 grunt-contrib-less 。
gruntfile.js 文件（再次，在项目的根目录中）。在这里，您需要将以下部分添加到 grunt.initConfig
less：{
development：{
options：{
paths：[importfolder]
}，
files：{
wwwroot / destinationfolder / destinationfilename.css：sourcefolder / sourcefile.less
}
}
}
gruntfile.js 结尾处添加此行：
grunt.loadNpmTasks（ 咕噜-的contrib少）;
然后，在菜单中点击 View->其他Windows->任务运行程序资源管理器，然后点击刷新图标/按钮，然后右键点击<$ c在任务下进行$ c> less 并转到绑定并勾选生成后。
grunt-contrib-watch c> View->其他Windows 在顶部菜单中），你就完成了。我预计你将不得不关闭并重新打开项目/解决方案来启动它，否则您可以手动运行任务。
手表：{
less：{
files：[sourcefolder / * .less]，
任务：[less]，
选项：{
livereload：true
}
}
}
///< ;绑定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）;
};
任务运行资源管理器中（它位于<$ c $下），在任务下监视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..css files generated when I save the .less files?Grunt to accomplish this task, but I am brand-new to Grunt and so I'm not sure how one would do it?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"
NPM folder (under Dependencies) and click Restore Packages. This will install less and grunt-contrib-less.gruntfile.js file (again, in the root of the project). Here, you'll need to add the following section to grunt.initConfigless: {
development: {
options: {
paths: ["importfolder"]
},
files: {
"wwwroot/destinationfolder/destinationfilename.css": "sourcefolder/sourcefile.less"
}
}
}
gruntfile.js:grunt.loadNpmTasks("grunt-contrib-less");
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.grunt-contrib-watch (add to package.json, then restore packages).watch: {
less: {
files: ["sourcefolder/*.less"],
tasks: ["less"],
options: {
livereload: true
}
}
}
/// <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");
};
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.
