Laravel-mix: Output files outside of the public path directory

Created on 12 Jul 2017  路  8Comments  路  Source: JeffreyWay/laravel-mix

  • Laravel Mix Version: 1.2.0
  • Node Version: 8.1.2
  • NPM Version: 5.0.4
  • OS: LMDE 2 Betsy

Description:

I have posted this issue before but was pretty much disregarded and closed. I don't think it was understood what I was trying to achieve. I have a repository this time so that you can see exactly what I am trying to do.

I am trying to mix a file and output the resulting file outside of my public path. In a Laravel project am I taking a file from resources/assets/js/app.js and trying to output it to resources/assets/js/app2.js and in the same file grab a sass file from resources and output the result of mix.sass() to the public folder. So I am trying to output files to two different directories in the same mix file like you could do with Laravel Elixir. See the repo for a live example. I want the mix-manifest.json to go inside the public folder so setting the project root as the public path is not what I want.

My current workaround is having two mix files for outputting to resources and public respectively. Another workaround would be having the project root as the public path and then after compiling the assets, moving the mix-manifest.json to the public folder but then the directories would be pointing to stuff inside the resources folder which is not what I want either.

Steps To Reproduce:

A live example is available at this repository.

This issue is a duplicate of #951 but this is more in depth and hopefully you will understand what I want to achieve.

stale

Most helpful comment

According to my Laravel project structure:

/laravel
/public_html

I've successfully configured the laravel-mix using the following code:

let mix = require('laravel-mix');
let path = require('path');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.setPublicPath(`..${path.sep}public_html`);

mix.js('resources/assets/js/app.js', 'js')
   .sass('resources/assets/sass/app.scss', 'css');

All 8 comments

You can put the output path as a relative path. For example,

mix.sass('resources/assets/css/sass/style.scss', '../resources/assets/css');

It worked for me.

That didn't work for me. It created a folder inside of my public folder called 'resources/assets/css'. It din't actually output the file in the resources folder.

mix.webpackConfig({ output: { path: __dirname + '/your/output/path' } })

@manlao You solved my issue, but now the mix-manifest.json persists to stay in the ./public folder.

+1 I鈥檓 using mix with Craft CMS and need to copy files to my templates dir which is outside of the public dir, while still needing to have mix-manifest go to public.

Using a relative path (../) in my copy action does not work...

According to my Laravel project structure:

/laravel
/public_html

I've successfully configured the laravel-mix using the following code:

let mix = require('laravel-mix');
let path = require('path');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.setPublicPath(`..${path.sep}public_html`);

mix.js('resources/assets/js/app.js', 'js')
   .sass('resources/assets/sass/app.scss', 'css');

The code that I found to work the best for this in 5.5 is:

mix.setPublicPath(path.normalize('html'));`
mix.setResourceRoot(path.normalize('html'));

mix.js('resources/assets/js/app.js', 'html/js')
   .sass('resources/assets/sass/app.scss', `'html/css');

This puts the mix-manifest.json in the html root.

Hope this helps.

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

rderimay picture rderimay  路  3Comments

mementoneli picture mementoneli  路  3Comments

Bomavi picture Bomavi  路  3Comments

kpilard picture kpilard  路  3Comments

wendt88 picture wendt88  路  3Comments