Ответ 1
Итак, как это сделать (скомпилируйте по сборке и неэлементному компиляции при сохранении):
Шаг 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.
Ура, теперь меньше файлов будет скомпилировано, и мы (я) узнаем о хрюке, которая кажется действительно мощной.
Шаг 5: Компиляция с сохранением
Я до сих пор не работаю на свое удовлетворение, но вот что у меня до сих пор:
Как и выше, добавьте еще один пакет NPM grunt-contrib-watch (добавьте в package.json, затем восстановите пакеты).
Затем добавьте раздел watch в файле 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"],
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 в верхнем меню), и все готово. я ожидал бы, что вам придется закрыть и повторно открыть проект/решение, чтобы заставить его влезть, иначе вы можете вручную запустить задачу.