40

Итак, я создал новый проект в Visual Studio 2015 Preview. В соответствии с нашим текущим методом делать вещи, для стилизации я хочу использовать файлы .less. Создание файлов прост, но Web Essentials больше не компилирует их.Как скомпилировать бездействующие файлы при сохранении в Visual Studio 2015 (предварительный просмотр)

Итак, мой вопрос: что именно мне нужно сделать, чтобы получить мои файлы .css, сгенерированные при сохранении файлов .less?

Основываясь на моих приключениях, чтобы работать с машинописным текстом, мне нужно будет использовать Grunt для выполнения этой задачи, но я совершенно новый для Grunt, и поэтому я не уверен, как это сделать?

Пожалуйста, помогите!

+0

Кроме того, я сам работаю над этим, поэтому, если я успешно это сделаю, я обновлю это пошаговым ответом. – Maverick

+0

Это превосходное руководство по использованию Grunt and Bower в VS2015. Http://www.asp.net/vnext/overview/aspnet-vnext/grunt-and-bower-in-visual-studio-2015 –

ответ

40

Так вот, как это сделать (собрать на сборки и не элегантной компиляции файла):

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

+0

У меня нет package.json или что-либо, что можно охарактеризовать как «под зависимостями». Есть ли какие-то первые шаги, которые были пропущены в этом посте? – braks

+0

@braks - файл package.json создается сразу после создания приложения ASP.Net 5/MVC 6 (как упоминалось в вопросе). Однако вы можете просто добавить один из них (имя шаблона в диалоговом окне «Add-New Item ...» - это «файл конфигурации NPM» под 'Web/General'. – Maverick

+0

С тех пор я узнал, что это работает только на новом VS2015. Http://stackoverflow.com/questions/32716983/gulp-bower-support-in-vs2015-for-an-upgraded-project – braks

8

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

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

(Pre-шаг назад Проектов) Если вы начали с пустым проектом, добавьте Grunt и Бауэр:

правого решение кнопки -> Добавить -> 'Grunt и Бауэр к 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 link)

Тогда:

Зависимости -> правой кнопкой мыши НПМ -> Восстановление пакетов.

gruntfile.js

1) Добавить или убедиться, что эти три линии регистрируются в нижней части (как задачи НПМ):

grunt.loadNpmTasks("grunt-bower-task"); 
grunt.loadNpmTasks("grunt-contrib-watch"); 
grunt.loadNpmTasks("grunt-contrib-sass"); 

2) Опять же в gruntfile. js, добавьте конфигурации init, что-то вроде следующего.

{Предостережение: Я не являюсь экспертом в таких конфигурациях. Некоторое время назад я нашел конфигурацию sass на отличном блоге, который я не могу найти в это время, чтобы дать кредит. Ключом я хотел найти все файлы в проекте в определенной папке (плюс потомки).Это делается (см. "someSourceFolder/**/*.scss" и see important related note here). }

// ... 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 
     } 
    } 
} 

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

39

С VS 2015 Web Essential split into multiple extensions вы можете загрузить расширение веб-компилятора от here, а также подробную информацию о том, как его использовать.

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

+6

. Это на порядок меньше сложнее, чем файл/пакет grunt .json и отлично работает! – nuander

+0

Это было доступно после RTM VS2015 (но не было доступно, когда задавался этот вопрос) - но только недавно началось правильно компилировать '.less' файлы (он * был * с использованием неполного и слегка сломанного компилятора раньше). Теперь, когда я это понимаю, я определенно предпочитаю использовать Grunt или Gulp, но Web Compiler также является надежным вариантом :). – Maverick

+0

Ответ, обозначенный как «решение», намного сложнее, чем это. Просто скачайте программу установки расширений, перезагрузите визуальную студию, и все готово. Это должен быть заметный ответ. – Porschiey

Смежные вопросы