Can I choose different outputPath of specific file by extension? about pug-plugin HOT 13 CLOSED

Yes @webdiscus , thanks so much

from pug-plugin.

Hello @ltsfran,

Yes, it's possible, but currently works for Pug files only. It must works for all modules, but seems not work for styles.
I will fix this issue.

Thank you for issue report.

from pug-plugin.

Thank you, I'll try another different way

from pug-plugin.

Thank you, I'll try another different way

Later today I will release a fixed version.

from pug-plugin.

@ltsfran

Important:
the outputPath for pug, js and css must be under same public output path.

The public path is the root web path for server. All public assets: html, js, css must be in this public path, e.g. path.join(__dirname, 'dist/').

You can define paths in filename option:

const PugPlugin = require('pug-plugin');
module.exports = {
  plugins: [
    new PugPlugin({
      filename: 'application/modules/[name].html', // => dist/application/modules/*.html,
      js: {
        filename: 'js/modules/[name].js', //  => dist/js/modules/*.js, where * is source filename
      },
      css: {
        filename: 'css/modules/[name].css',  //  => dist/css/modules/*.css, where * is source filename
        // outputPath: path.join(__dirname, 'test') // WRONG path, because is outer the `dist/`
      },
    }),
  ],
};

You will define a path outer web root path, it not works:

dist/ - web root path
dist/index.html (all js and css are loaded with relative by dist/ path)
dist/css/styles.css
dist/js/scripts.js

test/ - this is outer the web root path, this path is not available in dist/index.html 

from pug-plugin.

@webdiscus the problem that I have:
entries:

• pug/modules/landing/views/index.pug
• stylus/modules/landing/index.styl
• typescript/modules/landing/index.ts
  output:
• html/modules/landing/views/index.html
• css/modules/landing/index.css
• js/modules/landing/index.js
  I want to do this, I want that directories will be dynamic.
  For output directory, I've seen that webpack 5 have a hook buildCompilation, maybe I could relocate the assets files there.

from pug-plugin.

are all these files in the same directory?

public/html/modules/landing/views/index.html
public/css/modules/landing/index.css
public/js/modules/landing/index.js

then in the html/modules/landing/views/index.html file the assets have paths:

<link href="/css/modules/landing/index.css" rel="stylesheet">
<script src="/js/modules/landing/index.js" defer="defer"></script>

It is correct?

from pug-plugin.

@ltsfran

dynamically directories can be under same output path.
You can generate dynamically directories using the filename as function, e.g.:

filename: (pathData) => {
  const sourceFile = pathData.filename;                       // => /path/to/src/pages/about.pug
  const relativeFile = path.relative(sourcePath, sourceFile); // => pages/about.pug
  const { dir, name } = path.parse(relativeFile);             // dir: 'pages', name: 'about'
  return `${dir}/${name}.html`;                               // => dist/pages/about.html
};

from pug-plugin.

I'm going to test that. Now It works with pug files, I want to do this with .styl and .ts files

from pug-plugin.

With stylus files it doesn't work because pathData.filename doesn't exist

from pug-plugin.

@ltsfran

update please to v4.7.0. I have added the outputPath property to js and css options.

new PugPlugin({
    js: {
      verbose: true, // display output info
      filename: '[name].[contenthash].js',
      outputPath: 'assets/js/', // relative or absolute path
    },
    css: {
      verbose: true, // display output info
      filename: '[name].[contenthash].css',
      outputPath: path.join(__dirname, 'assets/css/'), // relative or absolute path
    },
  }),

P.S.: You can now use the js.filename and css.filename as function. The pathData argument contains the filename property (fixed in new ver).

from pug-plugin.

Thanks so much, Now I can access to filename property for my css files.

from pug-plugin.

@ltsfran

is your problem solved? Can be closed the issue?

from pug-plugin.