Так вот, как это сделать (собрать на сборки и не элегантной компиляции файла):
Шаг 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
a nd tick After Build
.
Ура, теперь меньше файлов будет скомпилировано, и мы (я) узнаем о хрюке, который кажется действительно мощным.
Шаг 5: Компиляция на экономии
Я до сих пор не получил эту работу к моему удовольствию, но вот то, что у меня до сих пор:
Как указано выше, добавьте еще один пакет НПМ grunt-contrib-watch
(добавить в пакет.json, а затем восстановить пакеты).
Затем добавьте секцию часов в gruntfile.js, как это (очевидно, что это может работать для других типов файлов, а):
watch: {
less: {
files: ["sourcefolder/*.less"],
tasks: ["less"],
options: {
livereload: true
}
}
}
Так вы теперь есть что-то подобное в вашем gruntfile. ЯШ:.
/// <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 (щелкните правой кнопкой мыши на watch
под Tasks
в Task Runner Explorer
(это под View->Other Windows
в верхнем меню) и вы сделали, я бы ожидать вы бы e, чтобы закрыть и снова открыть проект/решение, чтобы заставить его вступить, иначе вы можете вручную запустить задачу.
Кроме того, я сам работаю над этим, поэтому, если я успешно это сделаю, я обновлю это пошаговым ответом. – Maverick
Это превосходное руководство по использованию Grunt and Bower в VS2015. Http://www.asp.net/vnext/overview/aspnet-vnext/grunt-and-bower-in-visual-studio-2015 –