6

gulpjs ビルドで gulp-less 経由で LESS コンパイラを使用しています。sourceMap の生成を有効にしましたが、うまくいきました。適切なファイル名と行番号があります。

ソース マップで LESS を生成する gulp 行は非常に単純です。

var less = require('gulp-less');

// [...]

gulp.src('web/css/**/*.less')
    .pipe(less({
        sourceMap: true
    }))
    .pipe(gulp.dest('dist/css'));

唯一の問題は、ソース マップに元の .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存在しないものを読み込もうとします。

ワークスペースを使用して修正しようとしましたが、実際には管理できませんでした。この設定に何か問題がありますか？何か不足していますか？

4

5 に答える 5

1

私自身の質問に答えるために、これを行う適切な方法は、LESS プラグインにプロパティを渡す代わりに、gulp パイプでgulp-sourcemapsを使用することです。したがって、次の構文が機能します。

gulp.src('web/css/**/*.less')
  .pipe(sourcemaps.init())
  .pipe(less())
  .pipe(sourcemaps.write())
  .pipe(gulp.dest('dist/css'));
于 2014-10-12T02:24:21.877 に答える
1

これらの最終ステップが欠けていると思います：

  1. サイトのワークスペースを作成します。Chrome をシステム上のサイトのルート ディレクトリにポイントします。
  2. [ソース] パネルでソース マップされた less ファイルを右クリックし、[ファイル システム リソースにマップ...] を選択します。ファイルシステムでより少ないソースファイルを選択します。

開発ツールをリロードすると (プロンプトが表示されます)、うまくいくはずです。これで、[スタイル] パネルの をクリックすると、foo.less:45のその場所に移動するはずですfoo.less。ワークスペースをセットアップしたので、開発ツールで変更を保存すると、ソースのないファイルに保持されます。良い！

Chrome にはかなり大きなバグがあることに注意してください。おそらくすぐに気付くでしょう。開発ツールを使用してスタイル ルールを追加しようとすると、ソース マッピングが無効になります: https://github.com/less/less.js/issues/1050#issuecomment-26195595

これが役立つかどうか教えてください。必要に応じて、後でスクリーンショットを投稿することもできます。

于 2014-05-21T19:16:09.510 に答える
0

typescript ソース マップで同様の問題が発生していました。マップ内のパスは、src が出力ディレクトリと同じレベルにある '../src/file.ts' として生成されます。
dir |- src/*.ts |- output/*.js

私のWebサーバーは出力でまっすぐ実行されるため、クロムはht​​tp ://localhost/src/file.tsから既存のソースファイルをダウンロードしようとしていました
私の解決策は、出力フォルダー内にシンボリックリンク「src」を作成することでした。本当の「修正」ではありませんが、問題を解決します。

于 2015-11-05T16:02:23.357 に答える
-1

以下を試してください：

gulp.src('web/css/**/*.less')
    .pipe(less({
       sourceMap: true
       sourceMapBasepath: './my_less_path'
    }))
于 2014-03-26T20:22:18.770 に答える