Question

好的，所以我在Visual Studio 2015 Preview中创建了一个新的ASP.Net 5 / MVC 6项目。为了与我们当前的做事方法保持一致，为了造型，我想使用.less个文件。创建文件非常简单，但Web Essentials不再编译它们。

所以我的问题是：在保存.css文件时，我需要做些什么才能获得.less个文件？

根据我的冒险经历使得Typescript工作得很好，我将不得不使用Grunt来完成这项任务，但我对Grunt来说是全新的，所以我不确定如何做到这一点？

请帮忙！

Answer 1

使用VS 2015 Web Essential split into multiple extensions即可下载来自here的Web编译器扩展，它还有关于如何使用它的详细信息。

它当然不像过去那样优雅，但是如果你正在使用现有的项目并且想要使用LESS的编译器，那么这可以完成基本工作。

Answer 2

所以这里是如何做到的（在构建时编译，在保存时编译非优雅编译）：

第1步

打开您的package.json文件（它位于项目的根目录中）并添加以下行：

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

显然你可以更改版本号（你会得到有用的intellisense），这些只是当前的版本。

第2步

右键点击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("grunt-contrib-less");

第4步

然后只需转到菜单中的View->Other Windows->Task Runner Explorer点击刷新图标/按钮，然后右键点击less下的Tasks，然后转到Bindings并勾选{{ 1}}。

<\ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n \ n很高兴

第5步：在保存时进行编译

我仍然没有让我感到满意，但到目前为止我已经得到了这些：

如上所述，添加另一个NPM包After Build（添加到package.json，然后恢复包）。

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

grunt-contrib-watch

所以你现在在你的gruntfile.js中有这样的东西：

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下的Tasks（位于顶部菜单中的Task Runner Explorer下）并且你已经完成了。我希望你必须关闭并重新打开项目/解决方案才能启动它，否则你可以手动运行任务。

Answer 3

（注意：现在有一个新问题here直接询问了sass。我试图改变这个问题中的问题和标签以包括sass，但有人不允许它。）

我想为 sass（.scss） 添加相同问题的答案。答案是如此相关我认为这些可能最好在同一篇文章中合并为两个答案（如果你不同意，请告诉我;否则，我们可能会在帖子标题中添加＆＃34;或sass＆＃34; ？）。因此，请参阅Maverick的答案以获取更全面的细节，这里是sass的简单说明：

（空项目的预处理步骤） 如果您从一个空项目开始，首先添加Grunt和Bower：

右键点击解决方案 - ＆gt;添加 - ＆gt; ＆＃39; Grunt和Bower to Project＆＃39; （然后等待一分钟让它全部安装）

<强> 的package.json：

"devDependencies": {
    "grunt": "^0.4.5",
    "grunt-bower-task": "^0.4.0",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-contrib-sass": "^0.9.2"
}

（仅供参考：grunt-contrib-sass link）

然后：

依赖关系 - ＆gt;右键单击NPM - ＆gt;恢复包。

<强> gruntfile.js

1）添加或确保这三条线在底部附近注册（作为NPM任务）：

grunt.loadNpmTasks("grunt-bower-task");
grunt.loadNpmTasks("grunt-contrib-watch");
grunt.loadNpmTasks("grunt-contrib-sass");

2）再次在gruntfile.js中，添加init配置，如下所示。

{警告：我不是这种配置的专家。我前段时间在一篇优秀的博客文章中找到了sass配置，我现在无法找到它以获得荣誉。关键是我想在某个文件夹（加上后代）中找到项目中的所有文件。以下内容（注意"someSourceFolder/**/*.scss"和see important related note here）。 }

// ... after bower in grunt.initConfig ...
"default": {
    "files": [
        {
            "expand": true,
            "src": [ "someSourceFolder/**/*.scss" ],
            "dest": "wwwroot/coolbeans", // or "<%= src %>" for output to the same (source) folder
            "ext": ".css"
        }
    ]
},
"watch": {
    "sass": {
        "files": [ "someSourceFolder/**/*.scss" ],
        "tasks": [ "sass" ],
        "options": {
            "livereload": true
        }
    }
}

现在按照其他答案中给出的Task Runner Explorer的说明进行操作。确保关闭并重新打开项目。看来你必须跑（双击）＆＃39;观看＆＃39; （在＆＃39;任务＆＃39;）每次启动项目以观看手表，然后它适用于后续保存。

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

3 个答案: