Visual Studio 2015 で Less とSass

投稿者: | 8月 3, 2015

Web Essentials 2015 からLess と Sass のコンパイルや、JavaScriptのミニファイ機能が、切り離されて別製品として提供されるようになりました。

image

Bundler & MinifierWeb Compiler の2種類の製品で提供されています。

Bundler & Minifier

JavaScriptとCSS、HTMLのミニファイとバンドリングするためのVisual Studioの拡張機能です。

  • CSS、JavaScript、HTMLファイルをバンドルし、一つのファイルとして出力します
  • ソースファイルの保存をトリガーに、自動的に再バンドルをします
  • CIシナリオ用にMSBuildに対応しています
  • 言語ごとにミニファイ設定をカスタマイズできます
  • 生成ファイルを開くとウォーターマークが表示されます
  • ソリューションですべてのバンドルを更新するショートカットがあります。

Create bundle

2つ以上の同じ種類のファイルをソリューションエクスプローラーで選択し、バンドルを生成することができます。
バンドル設定は、プロジェクトのルートに、bundleconfig.jsonというファイルで格納されます。

Minify file

ソリューションエクスプローラーで、JavaScript、CSS、HTMLファイルを選択してミニファイできます。オリジナルファイルの配下に、「<ファイル名>.min.拡張子」が作成されます。

Bundle on build

ASP.NET MVC と WebForms プロジェクトで、ビルド処理の一環でバンドルとミニファイをすることができます。bundleconfig.jsonファイルを右クリックして処理できます。

Update all bundles

キーボードショートカットキー「Shift+Alt+i」を押すか、Buildメニューから選択することで、ソリューション内のすべてのbundleconfig.jsonファイルを使用してバンドルを実行できます。

Web Compiler

LESS、Sass、CoffeScriptファイルをコンパイルするためのVisual Studioの拡張機能です。

  • LESS、Sass、CoffeeScriptファイルをコンパイルできます
  • ソースファイルの保存をトリガーに自動再コンパイルすることができます
  • 個別ファイルごとにコンパイルオプションを指定することができます
  • Error一覧に統合されます
  • CIシナリオで、MSBuildに対応します
  • ミニファイしてコンパイル出力します

Compile file

.less、.scss、coffeeファイルを右クリックして、コンパイルを設定できます。

Recompile

compilereconfig.jsonファイルが生成されます。
右クリックして、再コンパイルを実行することができます。

カテゴリー: tool

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください