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

Question

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

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

根据我让 Typescript 很好地工作的经历，我将不得不使用 Grunt 来完成这项任务，但我是 Grunt 的新手，所以我不确定如何去做？

请帮忙！

Answer 1

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

步骤 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 点击刷新 icon/button，然后右键单击 Tasks 下的 less 并转到 Bindings并勾选 After Build.

万岁，现在可以编译 less files 并且我们（我）学习了 g运行t，它看起来真的很强大。

第 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");
};

然后可以简单地将此任务设置为运行打开项目（右键单击 Task Runner Explorer 中 Tasks 下的 watch（它位于 View->Other Windows 在顶部菜单中），你就完成了。我希望你必须关闭并重新打开 project/solution 才能启动它，否则你可以手动运行任务.

Answer 2

（注意：现在有一个新问题 here 直接涉及 sass。我试图改变这个问题中的问题和标签以包含 sass，但有人没有允许它。)

我想为 sass (.scss) 添加相同问题的答案。答案是如此相关，我认为这些最好合并为同一个 post 中的两个答案（ 如果您不同意，请告诉我；否则，我们可能会在 "or sass" post 标题？）。因此，请参阅 Maverick 的回答以获取更详细的信息，这是 sass:

的简要说明

（Pre-step 用于空项目） 如果你从一个空项目开始，首先添加 G运行t 和 Bower:

Right click solution -> Add -> 'Grunt and Bower to Project' (then wait for a minute for it to all install)

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）

然后：

Dependencies -> right-click NPM -> Restore Packages.

gruntfile.js

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

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

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

{ 警告：我不是此类配置方面的专家。前段时间在一个优秀的博客post上找到了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'下）才能让手表观看，但随后的保存就可以了。

Answer 3

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

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

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

How to compile .less files on save in Visual Studio 2015 (preview)

gruntjs

less

visual-studio-2015

asp.net-core

asp.net-core-mvc