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

Question

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

所以我的问题是:.css在保存.less文件时,我需要做些什么才能生成文件？

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

请帮忙!

Answer 1

使用VS 2015 Web Essential 分为多个扩展,您可以从此处下载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并勾选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");
};

然后可以简单地设置该任务在项目打开运行(右键点击watch下面Tasks的Task Runner Explorer(这是在View->Other Windows顶部菜单),你就大功告成了.我希望你必须关闭并重新打开项目/让这个开始的解决方案,否则你可以手动运行任务.

Answer 3

(注意:现在有一个新问题直接在这里询问sass.我试图改变这个问题中的问题和标签以包括sass,但有人不允许它.)

我想为sass(.scss)添加相同问题的答案.答案是如此相关我认为这些最好在同一篇文章中合并为两个答案(如果你不同意,请告诉我;否则,我们可能会在帖子标题中加上"或sass"？).因此,请参阅Maverick的答案以获得更全面的细节,这里是sass的简单介绍:

(空项目的前置步骤) 如果您从一个空项目开始,首先添加Grunt和Bower:

右键单击解决方案 - >添加 - >'Grunt和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链接)

然后:

依赖关系 - >右键单击NPM - >还原包.

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",并在此处查看重要的相关说明).}

// ... 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'下)以观察手表,但随后它会在后续保存中运行.