Laravel-mix: Compile both minified & non-minified JS/SASS files for production?

[ivanvermeyen]

Hello,

Is there a way to compile both minified and non-minified JS and SASS files for production?

For example:

- src/app.js   => dist/app.js  => dist/app.min.js
- src/app.scss => dist/app.css => dist/app.min.css

This would be very handy when creating packages.

[JeffreyWay]

In production, it'll automatically minify anything that runs through Webpack. So this would include your JS and CSS. But it's not going to minify anything outside of that.

[pablopaul]

@JeffreyWay Is .min for production not a convention anymore?

[ivanvermeyen]

For production I only compile a minified version with the .min suffix at the moment:

mix.js('src/js/app.js', 'public/js/app.min.js')
    .sass('src/scss/app.scss', 'public/css/app.min.css');

I also wanted to add a compiled, but not minified CSS and JS file to my package. In case people want to edit the CSS but don't use mix or grunt or gulp or something. But maybe that's not really necessary...

So what I mean is that in the end I have 3 versions of my CSS and JS:
1) source files (SASS/ECMAScript6/...)
2) compiled and minified for production
3) compiled but not minified

But again, after thinking about it maybe it's not all that useful...

[pablopaul]

@ivanvermeyen so you change the filename before compiling for production?

[ivanvermeyen]

@pablopaul sorry, I missed your reply.

I just compile to the .min file, even for dev...

[tpraxl]

It's actually a requirement for my current project:

Sources => app.js + app.min.js

We switched from webpack to laravel-mix, I still need to provide both of the files.

Is there an easy way to create both of the artifacts for production? Any idea?

[ivanvermeyen]

I found this:

https://github.com/JeffreyWay/laravel-mix/blob/master/docs/concatenation-and-minification.md#minify-files

But can you turn off minification when running npm run production?

[tpraxl]

You cannot minify an es6 file. It must be javascript. Otherwise you'll get errors.

The following approach failed, as mix will generate identical files (both huge (dev / watch) or both minified (production)).

mix.options(
    {
        publicPath: 'dist/'
    }
);
mix.js('src/index.js', 'app.js');
mix.minify('dist/app.js');

I would just need it for production and there @ivanvermeyen has his point:

But can you turn off minification when running npm run production?

Well.. I'm curious if anyone has a tip.

There should really be an easy way to do this.

[tpraxl]

I had a quick glance at the sources. When NODE_ENV === 'production', there's no way to tell mix to stop minifying assets.

// src/plugins/CustomTasksPlugin.js 15:17
if (Mix.inProduction()) {
   this.minifyAssets();
}

I'm currently thinking about specifying a different mode: NODE_ENV=distribution, but I need to test the side effects first.

[tpraxl]

Looks like setting NODE_ENV!=production is not advisable. SourceMap (cheap / inline), Sass output options, and more is affected by that setting (as I could have guessed before).

[ivanvermeyen]

Would it be possible to make an option in mix.options() to disable minifcation?

[tpraxl]

Not without posting a Pull Request – as far as I can see

[tpraxl]

Actually – after trying to modify mix to make that possible – I noticed that it is already possible. You just need the correct configuration.

Here are the required changes to webpack.mix.js in order to produce both: *.min.js and *.js. I don't understand why, because the CustomTasksPlugin should minify the tasks' assets nonetheless (see my research above), but somehow it doesn't in this case:

mix.options(
   {
      // publicPath is optional. But if you don't specify it, you may need to adapt the path for mix.minify()
      publicPath: 'dist/',
      // set uglify to false in order to prevent production minification
      // it prevents mix from pushing UglifyJSPlugin into the webpack config
      uglify: false
   }
);

mix.js('src/index.js', 'app.js');

// you usually only want to minify this in production
if(mix.inProduction()) {
   mix.minify('dist/app.js');
}

Result: app.js (not minified) and app.min.js (minified) are created during production ( yarn run production or npm run production).

[EDIT]
This will only work for js files. Not for scss / css.