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

Posted 2023-03-31

【中文标题】如何在 Visual Studio 2015（预览版）中保存时编译 .less 文件

【英文标题】：How to compile .less files on save in Visual Studio 2015 (preview)

【发布时间】：2015-01-02 00:08:48

【问题描述】：

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

所以我的问题是：当我保存.less 文件时，我需要做什么才能生成我的.css 文件？

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

请帮忙！

【问题讨论】：

另外，我自己也在解决这个问题，所以如果我成功了，我会逐步更新这个答案。

这是一本关于如何在 VS2015 中使用 Grunt 和 Bower 的优秀指南asp.net/vnext/overview/aspnet-vnext/…

【参考方案1】：

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

它肯定不像以前那么优雅了，但是如果你正在使用现有的项目并且想要使用 LESS 的编译器，那么这可能会完成基本的工作。

【讨论】：

这比 gruntfile/package.json 解决方案简单一个数量级，而且效果很好！

自 VS2015 的 RTM 以来一直可用（但在提出此问题时不可用）-但直到最近才开始正确编译 .less 文件（它是 之前使用了一个不完整且略有损坏的编译器）。现在我明白了，我当然更喜欢使用 Grunt 或 Gulp，但 Web Compiler 也是一个不错的选择 :)。

标记为“作为解决方案”的答案比这复杂得多。只需下载扩展安装程序，重新启动 Visual Studio，即可完成。这应该是标记的答案。

【参考方案2】：

所以这里是如何做到这一点（编译时编译和非优雅的保存时编译）：

第 1 步

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

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

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

第 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，点击刷新图标/按钮，然后右键单击Tasks下的less，然后转到Bindings并勾选After Build。

万岁，现在编译的文件更少了，我们（我）了解了 grunt，这似乎真的很强大。

第 5 步：保存时编译

我仍然没有让我满意，但这是我目前所得到的：

如上，添加另一个NPM包grunt-contrib-watch（添加到package.json，然后恢复包）。

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

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

所以现在你的 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");
;

然后可以简单地将此任务设置为在 Project Open 上运行（在Task Runner Explorer 中的Tasks 下右键单击watch（它在顶部菜单中的View->Other Windows 下），你就完成了。我预计您必须关闭并重新打开项目/解决方案才能启动它，否则您可以手动运行任务。

【讨论】：

我没有 package.json 或任何可以描述为“依赖项下”的东西。这篇文章是否遗漏了一些初始步骤？

@braks - package.json 文件在您创建 ASP.Net 5/MVC 6 应用程序后立即创建（如问题中所述）。但是，您可以自己添加一个（Add-New Item... 对话框中的模板名称是 NPM configuration file 在Web/General 下。

我后来发现这只适用于新的 VS2015 项目。 ***.com/questions/32716983/…

@braks - 事实并非如此。我目前正在使用 VS2012 中的解决方案。这是一个 MVC5（最初制作时显然是 MVC4）应用程序，我添加了一个 package.json 文件，并使用 gulp 编译我的 .less 文件。显然，如果你想要一个 MVC6 应用程序，你需要创建一个新项目。

第 1 步中缺少的一件事让我抓狂了好几分钟，那就是您可能还需要将 "grunt": "~0.4.5" 添加到您的依赖项中

【参考方案3】：

（注意：现在有一个新问题被问到here 直接与 sass 相关。我试图更改此问题中的问题和标签以包含 sass，但有人不允许。）

我想为 sass (.scss) 添加相同问题的答案。答案是如此相关，我认为最好将这些答案组合为同一篇文章中的两个答案（如果您不同意，请告诉我；否则，我们可能会在帖子标题中添加“or sass”？ ）。因此，请参阅 Maverick 的回答以获取更多详细信息，以下是 sass 的简述：

（空项目的准备步骤） 如果你从一个空项目开始，首先添加 Grunt 和 Bower：

右键解决方案 -> 添加 -> 'Grunt and Bower to Project' （然后等待一分钟以使其全部安装）

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）

然后：

依赖项 -> 右键单击​​ NPM -> 恢复包。

gruntfile.js

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

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

2) 再次在 gruntfile.js 中，添加初始化配置，如下所示。

警告：我不是此类配置方面的专家。前段时间我在一篇优秀的博文中找到了 sass 配置，目前我无法找到该配置以表谢意。关键是我想在某个文件夹（加上后代）的项目中找到 all 文件。以下是这样做的（注意"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 的说明进行操作。确保关闭并重新打开项目。每次项目启动时，您似乎都必须运行（双击）“watch”（在“Tasks”下）才能让手表观看，但随后它会在后续保存中起作用。