gruntjs – 如何编译.less文件保存在Visual Studio 2015(预览)

步骤1

打开你的package.json文件(它在项目的根目录下)并添加以下行：

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

显然你可以更改版本号(你会得到有用的智能感知)，这些只是当前的版本。

第2步

右键单击NPM文件夹(在Dependencies下)，然后单击Restore Packages。这将安装较少和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

然后只需到菜单中的视图 – >其他Windows->任务运行浏览器中打开刷新图标/按钮，然后右键单击任务下的更少，转到绑定，并选择后Build。

Hooray，现在较少的文件将编译，我们(我)了解咕噜，这似乎真的很强大。

步骤5：保存时编译

我还没有得到这个工作令我满意，但这里是我到目前为止：

如上所述，添加另一个NPM包grunt-contrib-watch(添加到package.json，然后恢复包)。

然后在gruntfile.js中添加一个观察部分，像这样(显然这也可以用于其他类型的文件)：

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

然后可以简单地将此任务设置为在项目打开运行(右键单击在任务运行器浏览器(它在顶部菜单中的视图 – >其他窗口下的任务下的监视下)，完成，我希望你’ d必须关闭并重新打开项目/解决方案，让它踢，否则你可以手动运行任务。