matejsvajger / laravel-mix-pug

Laravel Mix Plugin for compiling Pug/Jade templates.
MIT License
21 stars 23 forks source link

Different path for compiled files #7

Open sebszocinski opened 6 years ago

sebszocinski commented 6 years ago

Hi i'm having some trouble setting this up with different folder paths and sub-directories.

My source structure is like this:

image

And I need my compiled dist structure to look like this:

image

so I need to compile from site_root/source/pug/*/*.pug to site_root/site/themes/rkt/*/*.html

I've tried the following:

   .sass('source/sass/rkt.sass', 'css')
   .pug('source/pug/layouts/*.pug', 'layouts')
   .pug('source/pug/partials/*.pug', 'partials')
   .pug('source/pug/templates/*.pug', 'templates')
   .setPublicPath('site/themes/rkt')
   .browserSync('laravelmix.test');

The CSS and JS compile and move fine... but all three Pug compiles fail with this error:


Error: ENOENT: no such file or directory, open '/Users/seb/Dev/Laravel Mix/laravelmix/source/pug/layouts/layouts/default.html'

So then I tried:

.pug('source/pug/layouts/*.pug', 'site/themes/rkt/layouts', {
       exludePath: 'source/pug'
   })

and i'm still getting this error:

Pug Compilation Failed!

Error: ENOENT: no such file or directory, open '/Users/seb/Dev/Laravel Mix/laravelmix/source/pug/layouts/site/themes/rkt/layouts/default.ht
ml'
Fredwared commented 6 years ago
   .pug('src/pug/*.pug', '../../dist',  {           
        pug: {
            pretty: true,
            debug: false
        }
   })
   .setPublicPath('dist');

this works for me

sebszocinski commented 6 years ago

Nup doesn't work for me...

I tried this slight variation:

   .pug('source/pug/*/*.pug', '../../dist',  {
        pug: {
            pretty: true,
            debug: false
        }
    })
   .setPublicPath('site/themes/rkt')

and get this error:

Error: ENOENT: no such file or directory, open '/Users/seb/Dev/Laravel Mix/laravelmix/source/dist/home.html'
sebszocinski commented 6 years ago

It's like its not even obeying this: .setPublicPath('site/themes/rkt')

sebszocinski commented 6 years ago

Hmm ok this works:

   .pug('source/pug/*/*.pug', '../../../site/themes/rkt',  {
        pug: {
            pretty: true,
            debug: false
        }
    })
   .setPublicPath('site/themes/rkt')

But it's just putting all the html files inside site/themes/rkt and not in their folders...how do you do that?

sebszocinski commented 6 years ago

Ok this also works, but isn't ideal... and it seems to be running pug 3 times so compiling is really slow? which seems like its not he right way to do it?

.pug('source/pug/layouts/*.pug', '../../../site/themes/rkt/layouts',  {
        exludePath: 'source/pug/'
})
.pug('source/pug/partials/*.pug', '../../../site/themes/rkt/partials',  {
    exludePath: 'source/pug/'
})
.pug('source/pug/templates/*.pug', '../../../site/themes/rkt/templates',  {
    exludePath: 'source/pug/'
})
matejsvajger commented 6 years ago

Hey, sorry I'm a bit stuffed at the moment with my day job, but I will setup a test case and try to reproduce your problem.

In the mean time, can you try the glob operator ** if it works:

.pug('source/pug/**/*.pug', '../../../site/themes/rkt',  {
        exludePath: 'source/pug/'
})
sebszocinski commented 6 years ago

Yeah I've tried that as well but I need my compiled directory to follow the same sub folder structure as the source. How can I do this?

Cheers,

On Thu, May 3, 2018 at 7:22 PM, Matej Svajger notifications@github.com wrote: Hey, sorry I'm a bit stuffed at the moment with my day job, but I will setup a test case and try to reproduce your problem.

In the mean time, can you try the glob operator ** if it works:

.pug('source/pug/*/.pug', '../../../site/themes/rkt', { exludePath: 'source/pug/' })```

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub [https://github.com/matejsvajger/laravel-mix-pug/issues/7#issuecomment-386244434] , or mute the thread [https://github.com/notifications/unsubscribe-auth/AFNqRtVH0O_Yp4SMELs3SsnPZHaR6qyjks5tutNygaJpZM4TrpK_] .

matthewjumpsoffbuildings commented 6 years ago

any news on this? i'd like to be able to use pug with mix but this issue is still occuring

matthewjumpsoffbuildings commented 6 years ago

@matejsvajger i found a fork that seems to address this issue - https://github.com/rivergod/laravel-mix-pug

have you seen it?

heres the commit in question: https://github.com/rivergod/laravel-mix-pug/commit/c5658a2420a7a05f10dfb586d4ad9c61552363e2

matthewjumpsoffbuildings commented 6 years ago

@matejsvajger @sebszocinski I just tested the @rivergod fork and it seems to work

for example

mix.js('src/js/app.js', 'dist/js')
    .sass('src/sass/app.sass', 'dist/css')
    .pug('src/pug/**/*.pug', 'dist', {
        excludePath: 'src/pug'
    })
    .setPublicPath('dist');

put any folders i had in my src/pug folder into the output dist directory correctly

juniorgarcia commented 6 years ago

I was having the same problem. After debugging I realized that by now the plugin outputs the compiled files to the relative path we configure to get the templates from. Let's say that the templates are at src/templates/myfile.pug. The output file will be src/template/<my_dist_folder>/myfile.html. Even calling mix.setPublicPath didn't solve the problem form me.

My solution was to calculate the relative from the template filte path to the public folder:

// ...
mix.pug('src/templates/*.pug', path.relative('src/templates', 'dist'), {});
// ...
matthewjumpsoffbuildings commented 5 years ago

@juniorgarcia yep that works for me too, cheers

mikemartin commented 5 years ago

Thanks everyone. I've forked the latest from matejsvajger/laravel-mix-pug and made a pull request https://github.com/matejsvajger/laravel-mix-pug/pull/14 with the recursive compiling fix from https://github.com/rivergod/laravel-mix-pug/commit/c5658a2420a7a05f10dfb586d4ad9c61552363e2.

With this fix I can now compile my entire folder of pug templates:

.pug('_theme/**/*.pug', dist, {
   excludePath: '_theme'
})

In the meantime I've published the fork to NPM as laravel-mix-pug-recursive. (first time publishing an npm package, so please correct me if I went about this the incorrect way) https://www.npmjs.com/package/laravel-mix-pug-recursive