問題タブ [gulp-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.
javascript - Gulpless 処理が適切に行われず、インクルードされた変数が定義されていません
私はlessとGruntを使用しており、gulpに移行しています。
私の少ない作品。私が実行すると:
エラーなしで作業出力が得られます。インクルードを含む私のすべてのレスは、パブリック/レスにあります。これが私のgulpfileです:
gulp を実行すると、次のようになります。
@brightblue は、myapp.less の開始時にインポートされたファイルで定義されています。
- gulp がインクルードを取得しないのはなぜですか? less に「paths」オプションを指定すると機能するはずですが、修正されていません。
- これをデバッグする良い方法は何ですか? たとえば、行番号がありません。
- gulp を機能させる方法はありますか?
concatenation - gulp-minified CSS を使用するように HTML を書き直す方法はありますか
私は次のことに苦労しています:
私の gulpfile.js は、すべての .less をコンパイルし、縮小して、すべての CSS を ./dist/all.min.css に連結します。
HTML ファイルを書き直し、すべてのスタイル タグを削除して、縮小された CSS をロードするスタイル タグを 1 つだけ挿入する方法はありますか?
gulp - gulp.watch がファイルを正しく処理しない
HAML と LESS を PHP と CSS に変換する単純なスクリプトを実行しています。また、gulp.watch を使用して、行ったすべての変更を確認しています。
問題: gulp-less と gulp-haml はファイルを正しく処理します。しかし、gulp.watch がファイルの変更を検出すると、ファイルは空になります。gulp.watch は、php ファイルを正常に作成したのとまったく同じタスクを使用しています。
gulp - Gulp-less で Gulp を起動すると、フォルダ構造が維持されます
私は今日、少ないファイルなどをコンパイルするために gulp.js を調べ始めました。
タスクで起動して実行しましたが、コンパイルされたファイルはすべて同じフォルダーに配置され、ソース階層は維持されません。
出力が元のファイル構造を維持していることを確認する方法はありますか?
私はgulpが初めてなので、これを正しく行っていない可能性があります。
これが私のgulpファイルです(Lessに関連する部分):
ソース テーマ フォルダの Less ファイルを宛先テーマ フォルダに置きたいと思います。不足しているオプションは何ですか?
これらを個別のタスクとして実行する必要がありますか?
ありがとう
更新: 提案された投稿を見て、パスを次のように変更しました。
また、ディレクトリ変数を次のように変更しました。
themes
しかし、それは私が期待しているフォルダを生成しません。
javascript - gulpを使用してbootstrap.lessファイルをメインのbootstrap.cssにコンパイルしますか?
私は gulpjs が本当に好きで、それは私の選択したタスク マネージャーでしたが、数か月前にタスク マネージャーについて知っていて、主にサポートのために gruntjs に参加したかったのです。gulpjs の場合、特定の事柄に関する情報を見つけるのは困難です。
私の質問は、gulpfile.js
特に .bootstrap.less ファイルを編集できるように設定する方法ですvariables.less
。「 gulp-less 」をインストールし、以下のように実装しました。
を実行した後、以下のエラーが発生しますgulp less
。
events.js:72
throw er; // Unhandled 'error' event
^
Error: EEXIST, mkdir 'C:\wamp\www\myproj\source\css\bootstrap.css'
私は sass タスク コードが適切にセットアップされているとは思わない。私が達成したいことのコードをカットします。
編集: Googleでこれに適したキーワードをいくつか見つけています。これに関する最近の投稿をいくつか見つけました。ここに1つがあります。Gulpを使用せずにGulpを開始すると、フォルダ構造を維持するため、読む必要がある良い答えがあるようには見えません.
追加:ドキュメントのコードを使用するときに忘れていました。alerts.less でエラーが発生しました。
エラー
stream.js:94
throw er; // Unhandled stream error in pipe.
^
[gulp] Error in plugin 'gulp-less': variable @alert-padding is undefined in file C:\wamp\www\myproj\source\less\alerts.less line
no. 10
その行を削除しても、新しいエラーが見つかり続けます。
編集:ドキュメントには次のように書かれていますが、それは私には意味がありません.
エラー処理
デフォルトでは、gulp タスクは失敗し、エラーが発生するとすべてのストリームが停止します。この動作を変更するには、こちらのエラー処理ドキュメントを確認してください
google-chrome - ソース マップは絶対パスですが、Chrome DevTool はそれを URL と見なします
gulpjs ビルドで gulp-less 経由で LESS コンパイラを使用しています。sourceMap の生成を有効にしましたが、うまくいきました。適切なファイル名と行番号があります。
ソース マップで LESS を生成する gulp 行は非常に単純です。
唯一の問題は、ソース マップに元の .less ファイルへの URL が含まれており、ファイル システムへの絶対パスとして生成されることです/Users/myuser/projects/project/web/css/myfile.less
。
開発中は、Apache 経由でサイトを提供しています。Chrome DevTools でサイトを開くと、要素を調べることができmyfile.less
、[スタイル] パネルに正しい行番号が含まれていることを確認できるため、ソース マップが機能しています。ただし、Chrome はより少ないファイルを読み込もうとしており、ソースマップ出力であるフルパスを使用していますが、それが私のサイトへの相対 URL であると想定しているため、http://localhost/Users/myuser/projects/project/web/css/myfile.less
存在しないものを読み込もうとします。
ワークスペースを使用して修正しようとしましたが、実際には管理できませんでした。この設定に何か問題がありますか?何か不足していますか?
gulp - @import が存在する場合、gulp-less は空白の css ファイルを生成します
gulp を使用して、より少ないファイルを css にコンパイルしようとしています。これは別のプロジェクトで作業していますが、このプロジェクトでは作業していません。
私のタスクはgulpfile.js
次のようになります。
gulpfile.js
私のedgc-styles.less
ファイルには が含まれており、次のよう@import
に が含まれて@import
います。
ファイルでは、次のbootstrap.less
ように始まります。
私の出力では、bootstrap.less ファイルの先頭にあるコメントとその後の空白だけが得られます。
gulp (Windows マシン上) でエラーをログに記録して何が起こっているのかを確認する方法を理解できませんが、インポートしようとして失敗していると仮定しvariables.less
ます。これは有効なファイルで、bootstrap.less と同じディレクトリに存在します。
gulp 構成で欠落しているディレクティブは何ですか? 私はgulpが初めてなので、すべての機能とディレクトリを適切にトラバースする方法がわかりません。
どんな助けでも大歓迎