web-dev-qa-db-ja.com

Visual Studio 2015（プレビュー）で保存時に.lessファイルをコンパイルする方法

それでは、Visual Studio 2015 Previewで新しいASP.Net 5/MVC 6プロジェクトを作成しました。現在の方法を維持するために、スタイリングには.lessファイルを使用します。ファイルの作成は簡単ですが、Web Essentialsはそれらをコンパイルしなくなりました。

私の質問はこれです：.cssファイルを保存するときに.lessファイルを生成するには、正確に何をする必要がありますか

TypeScriptがうまく動作するようになった私の冒険に基づいて、このタスクを達成するにはGruntを使用する必要がありますが、Gruntはまったく新しいので、どのようにすればよいのかわかりません。

助けてください！

gruntjslessvisual-studio-2015asp.net-coreasp.net-core-mvc
42
Maverick

それを行う方法は次のとおりです（ビルド時にコンパイルし、保存時に非エレガントなコンパイル）：

ステップ1

package.jsonファイルを開き（プロジェクトのルートにあります）、次の行を追加します。

"grunt-contrib-less": "^1.0.0",
"less": "^2.1.2"

明らかに、バージョン番号を変更できます（有用なインテリセンスが得られます）。これらは現在のバージョンです。

ステップ2

NPMフォルダー（Dependenciesの下）を右クリックし、Restore Packagesをクリックします。これにより、lessおよびgrunt-contrib-lessがインストールされます。

ステップ

これらのパッケージが復元されたら、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。

Hooray、今ではコンパイルするファイルが少なくなり、私は（I）うなり声について学びました。

ステップ5：保存時にコンパイル

私はまだこれを満足に機能させることができていませんが、ここに私がこれまでに得たものがあります：

上記のように、別のNPMパッケージgrunt-contrib-watchを追加します（package.jsonに追加してから、パッケージを復元します）。

次に、以下のように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で実行するように設定できます（Task Runner Explorer（トップメニューのView->Other Windowsの下にあるwatchの下のTasksを右クリックします）プロジェクト/ソリューションを閉じて再度開き、これを有効にする必要があります。そうしないと、タスクを手動で実行できます。

40
Maverick

VS 2015 Web Essentialは 複数の拡張機能に分割 からWebコンパイラ拡張機能を here からダウンロードでき、使用方法の詳細も記載されています。

確かに以前のようにエレガントではありませんが、既存のプロジェクトを使用していて、LESSにコンパイラを使用したい場合、これは基本的な仕事をするかもしれません。

42
ndd

（注：現在、sassに関する直接の質問 here があります。sassを含めるようにこの質問の質問とタグを変更しようとしましたが、誰かが許可しませんでした。）

sass（.scss）の同じ質問に答えを追加したいと思います。答えは非常に関連しているので、これらを同じ投稿で2つの回答として組み合わせるのが最適だと思います（同意しない場合はお知らせください。それ以外の場合は、投稿タイトルに「またはsass」を追加しますか？ ）。そのため、詳細についてはMaverickの回答を参照してください。sassの概要は次のとおりです。

（空のプロジェクトの事前ステップ）空のプロジェクトで開始した場合、最初にGruntを追加し、バウアー：

ソリューションを右クリック->追加->「Grunt and Bower to Project」（すべてインストールされるまで1分間待ちます）

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 ）

次に：

依存関係-> NPMを右クリック->パッケージの復元。

gruntfile.js

1）これらの3行が（NPMタスクとして）下部近くに登録されていることを追加または確認します。

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

2）gruntfile.jsで、次のような初期設定を追加します。

{注意：このような構成の専門家ではありません。私はクレジットを与えるために、現時点では見つけることができない素晴らしいブログ投稿でsass設定を見つけました。重要なのは、特定のフォルダー（およびその子孫）内のプロジェクト内のallファイルを検索することでした。以下はそれを行います（通知"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
        }
    }
}

次に、他の回答にあるTask Runner Explorerの指示に従います。必ずプロジェクトを閉じて開き直してください。ウォッチを見るためにプロジェクトを開始するたびに「ウォッチ」（「タスク」の下）を実行（ダブルクリック）する必要があるようですが、その後の保存で動作します。

8
Nicholas Petersen