2017-01-06 19 views
1

私はPugと一緒に作業しており、いくつかのミックスインを作成して、プロジェクト全体で再利用可能なコンポーネントを作ってみたかったのです。 mixinを分離して分類するためにいくつかのファイルを作成したかったのです。この問題は、ミックスインを含むファイルをメインファイルに含めるときに発生します。例:外部ファイルからのPugミックスインが動作しない

body 
    block content 
     include ./components/mixins/_mixins.pug 
     +user_avatar('', '#', 'Daniel') 

これは機能しません(別のファイルからmixinを含める場合)。私は、このエラーました:jade_mixins.user_avatar is not a function

をしかし、私はそれが動作するファイルにミックスインが含まれたとき:それを修正するために何をすべきか

body 
    block content 
     mixin user_avatar(avatar_url, profile_url, name) 
      .user(class='4u 6u(small) 12u(xsmall)') 
       a(href=profile_url) 
        .user-avatar-thumbnail.is-active(style="background-image: url('" + avatar_url + "')") 
        if name 
         span.user-name=name 
     +user_avatar('', '#', 'Daniel') 

任意の手掛かりを?そして、ええ、正しい道です。 pugをコンパイルするには、laravelのエリクシル用にlaravel-elixir-jadeパッケージを使用します。

+0

わからないが、あなたは試してみました:

var elixir = require('laravel-elixir'); require('laravel-elixir-pug'); elixir(function (mix) { mix .pug({ blade: false, src: './views', search: '**/*.pug', pugExtension: '.pug', dest: './html' }); }); 

ルートディレクトリにgulpを実行した後、これは予想通り、次template.html生成['laravel-elixir-pug'](https://github.com/mrkmg/laravel-elixir-pug)パッケージを使用していますか?翡翠はPugに改名されました。おそらく、これを修正した新しいパッケージにいくつかの変更があります... – gandreadis

+0

実際に試しました。私は 'laravel-elixir-pug'パッケージを全く同じ設定(パッケージの説明で有効)で使用しましたが、私のpugコードはコンパイルされませんでした。 Gulpタスクはエラーなしで実行されましたが、ファイルは更新されませんでした。ちょうど私のファイルを見つけることができなかったように。 –

+0

クリーンセットアップで問題を再現しようとしました。下の回答を参照してください。 – gandreadis

答えて

1

私はあなたの問題を再現しようとしましたが、私のマシンでは正常に動作しているようです。私はこのために作った設定を列挙しています。おそらくあなたがあなたのものをこの点から逸脱している箇所を見つけることができます。

私のディレクトリ構造:

|- html/ 
|--- template.html (generated after running gulp) 
|- node_modules/ 
|- views/ 
|--- mixins/ 
|----- util.pug 
|--- template.pug 
|- gulpfile.js 
|- package.json 

マイpackage.json

{ 
    "name": "test", 
    "version": "1.0.0", 
    "main": "gulpfile.js", 
    "license": "MIT", 
    "dependencies": { 
     "gulp": "^3.9.1", 
     "laravel-elixir": "^6.0.0-15", 
     "laravel-elixir-pug": "^1.3.2", 
     "pug": "^2.0.0-beta6" 
    } 
} 

マイtemplate.pug

body 
    block content 
     include mixins/util 
     +test() 

util.pugファイル:

mixin test() 
    p Test 

そしてgulpfile.js:これが原因であるかどうかを

<body> 
    <p>Test</p> 
</body> 
+0

コードが正しいです。私はそれを機能させることができた。パッケージをpugに変更することはやりました。それは私のために働かなかった理由は、私はパグにパッケージを変更したときに時代遅れになったコードだったと私はエラーを見なかった、私はウォッチャーを作ったときに私はそれらを見て、次にタスクが停止したエラー。今は完璧に動作します。 –

+0

ああ、それを聞いて嬉しい助けて! – gandreadis

関連する問題