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

好的，我在Visual Studio 2015预览版中创建了一个新的

ASP.Net 5

/

MVC 6

项目。为了与我们当前的工作方法保持一致，对于样式设置，我希望使用

.less

文件。创建文件很简单，但Web Essentials不再编译这些文件

所以我的问题是：当我保存

.less

文件时，我需要做什么才能生成

.css

文件

基于我让Typescript很好地工作的经历，我将不得不使用

Grunt

来完成这项任务，但我对Grunt是全新的，所以我不确定人们会怎么做

请帮忙

下面是如何做到这一点（编译基于构建，非优雅编译基于保存）：

步骤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"
        }
    }
}

您还需要在

grunfile.js

末尾附近添加这一行：

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

步骤4

然后只需进入菜单中的

View->Other Windows->Task Runner Explorer

，点击刷新图标/按钮，然后右键单击

Tasks

下的

less

，进入

Bindings

并在构建后勾选

万岁，现在编译的文件越来越少，我们（我）也了解了grunt，它看起来非常强大

步骤5：保存时编译

我仍然没有让这项工作达到我满意的程度，但到目前为止，我已经做到了以下几点：

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

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

现在，您的GrunFile.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");
};

//
//该文件位于定义grunt任务和使用grunt插件的主入口点中。
//单击此处了解更多信息。http://go.microsoft.com/fwlink/?LinkID=513275&clcid=0x409
module.exports=函数（grunt）{
grunt.initConfig({
鲍尔：{
安装：{
选项：{
targetDir:“wwwroot/lib”，
布局：“按组件”，
cleanTargetDir:false
}
}
},
观察：{
减：{
文件：[“less/*.less”]，
任务：[“更少”]，
选项：{
利弗雷罗德：没错
}
}
},
减：{
发展：{
选项：{
路径：[“更少”]
},
档案：{
“wwwroot/css/style.css”：“less/style.less”
}
}
}
});
//此命令注册将bower软件包安装到wwwroot/lib中的默认任务
registerTask（“default”[“bower:install”]）；
//下一行加载grunt插件。
//这一行必须在这个文件的末尾。
grunt.loadNpmTasks（“grunt-bower任务”）；
grunt.loadNpmTasks（“grunt contrib less”）；
grunt.loadNpmTasks（“grunt contrib watch”）；
};

然后，您可以简单地将此任务设置为在Project Open（右键单击
任务运行器资源管理器中
任务
下的
查看
（位于顶部菜单中的
视图->其他窗口下）下运行您已经完成了。我希望您必须关闭并重新打开项目/解决方案才能启动此任务，否则您可以手动运行此任务。
（注意：现在有一个新问题直接询问了有关sass的问题。我试图将此问题中的问题和标记更改为包含sass，但有人不允许。）

我想为sass（.scss）的同一个问题添加答案。答案是如此相关，我认为在同一篇文章中，最好将这两个答案合并为两个答案（如果你不同意，请让我知道；否则，我们可能会在文章标题中添加“或sass”）.因此，更多细节请参见Maverick的答案，以下是sass的要点：

（空项目的预步骤）
如果以空项目开始，请首先添加Grunt和Bower：

右键单击解决方案->添加->“Grunt and Bower to Project”（然后等待一分钟，让它全部安装）

package.json:

（供参考：）

然后：

依赖项->右键单击NPM->还原包

grunfile.js

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

2） 同样在gruntfile.js中，添加init配置，如下所示

{注意：我不是这类配置的专家。不久前，我在一篇优秀的博客文章中发现了sass配置，为了给大家留下印象，我现在找不到它。关键是我想在某个文件夹中找到项目中的所有文件（加上子体）。下面是这样做的（注意
“someSourceFolder/***.scss”
，和）。}

/。。。在grunt.initConfig中的bower之后。。。
“默认值”：{
“文件”：[
{
“扩展”：没错，
“src”：[“someSourceFolder/***.scss”]，
“dest”：“wwwroot/coolbeans”、//或“”，用于输出到同一（源）文件夹
“ext”：“.css”
}
]
},
“看
/// <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");
};

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

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

// ... 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
        }
    }
}