問題タブ [grunt-contrib-less]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
gruntjs - 各ディレクトリのすべての .less を .css に Grunt コンパイルします
そのため、モジュールを使用するようにサイトをセットアップしました。各モジュールには、.css にコンパイルする必要がある独自の .less ファイルがあります。
フォルダ構造:
/common/modules/{module-name}/style.less
すべての style.less ファイルを同じディレクトリ内の style.css ファイルに変換する必要があります。例えば:
/common/modules/clock/style.less
にコンパイルする必要があります/common/modules/clock/style.css
各モジュールを grunt ファイルに個別に追加する必要はありません。これを動的に行う方法はありますか?
javascript - 動的 Grunt ウォッチの構成
私のサイトのファイル構造は次のようなものです。
にコンパイル/app/less/themes/{{ themeName }}/*.less
され/public/themes/{{ themeName }}/css/*.css
ます。
Grunt Less タスクを動的にセットアップし、正常に動作しています。例:grunt less:compileTheme:modern
しかし、Grunt Watch タスクを機能させる方法がわかりません。理想的には、テーマ フォルダー名が表示され、次のように grunt タスクが実行されgrunt less:compileTheme:{{ themeName }}
ます。
これは可能ですか?および/またはこれを行うべきより良い方法はありますか?
package - インライン LESS sourceMap が壊れたのはなぜですか?
私のpackage.jsonでgrunt-contrib-less(バージョン0.11.4)依存関係を使用し、gruntfileで初期化して、LESSを数週間楽しく使用しています。マップは、最終的に縮小された styles.css の最後にインラインで生成されます。
私はこのプロジェクトから数週間離れていましたが、戻ってきたとき、突然ブラウザのどれも LESS の行番号を表示できなくなり、すべてのスタイルが行 1 (より正確には、生成された行 5) にマップされます。ファイルの先頭に数行あります)。
CSS は正常にコンパイルされ、ソースマップは明らかにファイルの最後にありますが、ブラウザーの開発ツールで LESS ファイルを検査およびデバッグすることはできなくなりました。
私は最初に gruntfile を設定するために外部の助けを借りましたが、残念ながらその助けはもう利用できません。私は Grunt と JSON に不慣れで、公式には頭がいっぱいです。一体どうやってこれを壊したのですか?含まれているコードを実際にいじったわけではありませんが、他に何が sourceMap の問題を引き起こしているのかわかりません。
ここに私のうなり声ファイルコードがあります:
そして package.json:
開発ツールで LESS が表示されない原因となる、ある種のよくある間違いを犯したことを願っています。ガイダンスはありますか?
gruntjs - grunt-contrib-less が機能しない (エラーはないが出力 CSS がない)
grunt がインストールされたフォルダーからより少ないファイルへの相対パスが存在する、より少ないコンパイルの grunt タスクがあります。raw/less/source_map/
ここにグラントファイルがあります。
Gruntfile: (編集: @Yogesh Khatri のコードに変更しても同じ問題)
それを実行すると、コマンドラインが表示されます
しかし、style.css の出力はありません。オプションなしで最も単純な単調なタスクを作成しました。誰でもこれの何が悪いのか指摘できますか。
gruntjs - grunt-contrib-less 使用時の CSS ソースマップ出力先の設定方法
より少ないファイルをコンパイルするために grunt-contrib-less を使用しています。
プロジェクトフォルダーのルートにローカルにインストールされたグラントがあります。
css ファイルはqa1/avinash/html5/phase1/css/
、プロジェクト フォルダーのルートからのパスにあります。
したがって、これは私が指定しているパスcwd
(現在の作業ディレクトリ)src
とdest
、うなり声の少ないタスクのパラメーターです。CSS とソース マップのコンパイルに問題はありません。
私が直面する唯一の問題は、ソースマップが gruntfile の同じフォルダーに生成されることです。しかし、生成されたcssはdest
指定したパスにあります。css とソース マップは別の場所にあるため、ソース マップ内の少ないパス参照を手動で編集し、生成された css ディレクトリに移動する必要があります。またはsourceMapURL
、ソース マップの場所を指定するために使用します../../../../../style.css.map
(後方)。どちらの方法も便利ではありません。
生成されたcssの宛先パスに指定するように、ソースマップの出力宛先パスを指定する方法を誰でも手伝ってもらえますか
--
現在使用されているGruntfile.js:
javascript - ソース マップを使用して .less を a.min.css に変更しても、Dev Tools で .less ファイルを表示できますか?
この gruntfile を使用して、.less ファイルを .css ファイルに変更しています。
私の開発ビルドでは、10 個の .less ファイルがある場合、これにより 10 個の .css ファイルが作成され、Chrome 開発ツールでこれらを表示して簡単にデバッグできます。
これを行う理由は、Chrome 開発ツールでこれら 10 個の .css ファイルをデバッグして確認できるようにするためです。
私の推論は正しいですか?ソース マップについて聞いたことがありますが、開発ビルドでこれらをどのように使用できますか? また、これらを使用した場合でも、ソース .css ファイル名または 10 個の .less ファイルを表示できますか?
gruntjs - ソース マップのパス プレフィックスの変更
私の設定
私の構造
そのため、grunt less:server を呼び出した後
私は .tmp/styles/main.css.map をどこでも src/ プレフィックスの attr "sources" で取得していますが、サーバーは src/* から開始するため、src/ なしでしたいです
どうすれば変更できますか?