Как скомпилировать бездействующие файлы при сохранении в Visual Studio 2015 (предварительный просмотр)

Ответ 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 в верхнем меню), и все готово. я ожидал бы, что вам придется закрыть и повторно открыть проект/решение, чтобы заставить его влезть, иначе вы можете вручную запустить задачу.

Ответ 2

С VS 2015 веб-Essential разделить на несколько расширений вы можете скачать расширение веб-компилятора из здесь, а также подробные сведения о том, как его использовать.

Это, конечно, не изящно, как раньше, но если вы используете существующий проект и хотите использовать компилятор для LESS, это может сделать основное задание.

Ответ 3

(Примечание: теперь есть новый вопрос, заданный здесь непосредственно относительно sass. Я попытался изменить вопрос и теги в этом вопросе, включив sass, но кто-то сделал 't разрешить это.)

Я хотел бы добавить ответ на тот же вопрос для sass (.scss). Ответ так связан. Я думаю, что лучше всего их можно объединить в два ответа в этом же сообщении (если вы не согласны, пожалуйста, дайте мне знать, иначе мы можем добавить "или sass" в заголовке сообщения?). Как таковой, см. Maverick ответ на некоторые более полные детали, здесь ореховая скорлупа для sass:

(предварительный шаг для пустых проектов) Если вы начали с пустого проекта, сначала добавьте Grunt и Bower:

Решение правого клика → Добавить → 'Grunt and 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"
}

(FYI: ссылка 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
        }
    }
}

Теперь следуйте инструкциям для Проводника задач, как указано в другом ответе. Не забудьте закрыть и снова открыть проект. Кажется, вам нужно запускать (дважды щелкнуть) "смотреть" (в разделе "Задачи" ) каждый раз, когда проект запускается, чтобы смотреть часы, но затем он работает при последующих сэкономлениях.