Laravel-mix: Version only specific files

Created on 25 Feb 2017  路  5Comments  路  Source: JeffreyWay/laravel-mix

  • Laravel Mix Version: 0.8.7
  • Node Version 7.6.0
  • NPM Version 4.1.2
  • OS: macOS Sierra 10.12.3

Description:

I want to version only selected pieces in my webpack-mix

Steps To Reproduce:

npm run dev

with this in my webpack-mix file

const { mix } = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | 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.sass('resources/assets/sass/frontend/app.scss', 'public/css/frontend/dist/frontend.css');
mix.sass('resources/assets/sass/backend/app.scss', 'public/css/backend/dist/backend.css');

mix.combine([
    'public/css/frontend/dist/frontend.css',
    'resources/assets/css/plugin/bootstrap-select/bootstrap-select.min.css'
], 'public/css/frontend/frontend.css');

mix.combine([
    'public/css/backend/dist/backend.css',
    'resources/assets/css/plugin/bootstrap-select/bootstrap-select.min.css'
], 'public/css/backend/backend.css');

mix.js('resources/assets/js/backend/customers/customers.js', 'public/js/backend/customers/customers.js');

mix.js([
        'resources/assets/js/frontend/app.js',
        'resources/assets/js/plugin/sweetalert/sweetalert.min.js',
        'resources/assets/js/plugins.js'
    ], 'public/js/frontend/frontend.js');
mix.js([
        'resources/assets/js/backend/app.js',
        'resources/assets/js/plugin/bootstrap-select/bootstrap-select.min.js',
        'resources/assets/js/plugin/sweetalert/sweetalert.min.js',
        'resources/assets/js/plugins.js'
    ], 'public/js/backend/backend.js');

work fine but i want to ad .version() to all five final files except the css files created in sassing cause then the css combine fails.

I also tryed to specify the files that i want to version but they cant be found.

Thank you JW

Most helpful comment

Just wondering if I can use mix.version() to version only specific files and not all files generated.
To be more specific, I just want to version app.min.js file, so I added
mix.version(['public/js/app.min.js']);
to my webpack.mix.js

const { mix } = require('laravel-mix');
mix.sass('resources/assets/sass/blade_custom.scss', 'sass/blade-custom.css').styles([ 
    'resources/assets/css/separate/vendor/pnotify.min.css',
    'resources/assets/css/lib/jqueryui/jquery-ui.min.css',
    'resources/assets/css/separate/pages/login.css',
    'resources/assets/css/lib/font-awesome/font-awesome.css',
    'resources/assets/css/lib/bootstrap/bootstrap.css',
    'resources/assets/css/separate/vendor/bootstrap.css
    ], 'public/css/app.css');
mix.scripts([
        'resources/assets/js/lib/jquery/jquery.min.js',
        'resources/assets/js/lib/bootstrap-table/jquery-ui.js',
        'resources/assets/js/plugins.js',
        'resources/assets/js/lib/bootstrap/bootstrap.js',
        'resources/assets/js/chat.js'
    ], 'public/js/app.js');
mix.minify('public/js/app.js');
mix.version(['public/js/app.min.js']);

but instead of getting versioned only app.min.js both app.min.js and app.css get versioned.

All 5 comments

If you call mix.version(), it should create hashed versions of:

  • public/css/frontend/dist/frontend.css
  • public/css/backend/dist/backend.css
  • public/js/backend/customers/customers.js
  • public/js/frontend/frontend.js
  • public/js/backend/backend.js

You can optionally pass an array to version additional files on top of that.

mix.version([
   'version/this/file/path/too.css'
]);

work fine but i want to ad .version() to all five final files except the css files created in sassing cause then the css combine fails.

That's because the files you're referencing in mix.combine() don't exist. public/css/frontend/dist/frontend.css will actually be something like public/css/frontend/dist/frontend.asdfasdgasdgsad.css. Use a star instead.

mix.combine([
    'public/css/frontend/dist/frontend.*.css',
    'resources/assets/css/plugin/bootstrap-select/bootstrap-select.min.css'
], 'public/css/frontend/frontend.css');

I have tried that:

i added:

mix.version([
    'public/css/frontend/frontend.css'
]);

at the end of my file to version only frontend.css but i get this error:

fs.js:582
  return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
                 ^

Error: ENOENT: no such file or directory, open 'public/css/frontend/frontend.css'
    at Object.fs.openSync (fs.js:582:18)
    at Object.fs.readFileSync (fs.js:489:33)
    at File.read (/Users/peter/docker/lemp/www/mobelmaklarna/dev.mobelmaklarna.se/node_modules/laravel-mix/src/File.js:71:19)
    at File.version (/Users/peter/docker/lemp/www/mobelmaklarna/dev.mobelmaklarna.se/node_modules/laravel-mix/src/File.js:129:29)
    at manualFiles.forEach.file (/Users/peter/docker/lemp/www/mobelmaklarna/dev.mobelmaklarna.se/node_modules/laravel-mix/src/Versioning.js:50:47)
    at Array.forEach (native)
    at Versioning.writeHashedFiles (/Users/peter/docker/lemp/www/mobelmaklarna/dev.mobelmaklarna.se/node_modules/laravel-mix/src/Versioning.js:50:26)
    at Versioning.prune (/Users/peter/docker/lemp/www/mobelmaklarna/dev.mobelmaklarna.se/node_modules/laravel-mix/src/Versioning.js:70:14)
    at events.listen (/Users/peter/docker/lemp/www/mobelmaklarna/dev.mobelmaklarna.se/node_modules/laravel-mix/src/Mix.js:70:58)
    at events.(anonymous function).forEach.handler (/Users/peter/docker/lemp/www/mobelmaklarna/dev.mobelmaklarna.se/node_modules/laravel-mix/src/Dispatcher.js:34:47)
    at Array.forEach (native)
    at Dispatcher.fire (/Users/peter/docker/lemp/www/mobelmaklarna/dev.mobelmaklarna.se/node_modules/laravel-mix/src/Dispatcher.js:34:28)
    at Concat.combine (/Users/peter/docker/lemp/www/mobelmaklarna/dev.mobelmaklarna.se/node_modules/laravel-mix/src/Concat.js:103:21)
    at combinations.forEach.files (/Users/peter/docker/lemp/www/mobelmaklarna/dev.mobelmaklarna.se/node_modules/laravel-mix/src/Concat.js:125:49)
    at Array.forEach (native)
    at Concat.run (/Users/peter/docker/lemp/www/mobelmaklarna/dev.mobelmaklarna.se/node_modules/laravel-mix/src/Concat.js:125:27)
    at events.(anonymous function).forEach.handler (/Users/peter/docker/lemp/www/mobelmaklarna/dev.mobelmaklarna.se/node_modules/laravel-mix/src/Dispatcher.js:34:47)
    at Array.forEach (native)
    at Dispatcher.fire (/Users/peter/docker/lemp/www/mobelmaklarna/dev.mobelmaklarna.se/node_modules/laravel-mix/src/Dispatcher.js:34:28)
    at Compiler.module.exports.plugins.push.plugins.WebpackOnBuildPlugin.stats (/Users/peter/docker/lemp/www/mobelmaklarna/dev.mobelmaklarna.se/node_modules/laravel-mix/setup/webpack.config.js:366:29)
    at Compiler.applyPlugins (/Users/peter/docker/lemp/www/mobelmaklarna/dev.mobelmaklarna.se/node_modules/tapable/lib/Tapable.js:61:14)
    at /Users/peter/docker/lemp/www/mobelmaklarna/dev.mobelmaklarna.se/node_modules/webpack/lib/Compiler.js:255:13
    at Compiler.emitRecords (/Users/peter/docker/lemp/www/mobelmaklarna/dev.mobelmaklarna.se/node_modules/webpack/lib/Compiler.js:351:37)
    at /Users/peter/docker/lemp/www/mobelmaklarna/dev.mobelmaklarna.se/node_modules/webpack/lib/Compiler.js:249:12
    at /Users/peter/docker/lemp/www/mobelmaklarna/dev.mobelmaklarna.se/node_modules/webpack/lib/Compiler.js:344:11
    at next (/Users/peter/docker/lemp/www/mobelmaklarna/dev.mobelmaklarna.se/node_modules/tapable/lib/Tapable.js:154:11)
    at Compiler.compiler.plugin (/Users/peter/docker/lemp/www/mobelmaklarna/dev.mobelmaklarna.se/node_modules/webpack/lib/performance/SizeLimitsPlugin.js:99:4)
    at Compiler.applyPluginsAsyncSeries1 (/Users/peter/docker/lemp/www/mobelmaklarna/dev.mobelmaklarna.se/node_modules/tapable/lib/Tapable.js:158:13)
    at Compiler.afterEmit (/Users/peter/docker/lemp/www/mobelmaklarna/dev.mobelmaklarna.se/node_modules/webpack/lib/Compiler.js:341:8)
    at Compiler.<anonymous> (/Users/peter/docker/lemp/www/mobelmaklarna/dev.mobelmaklarna.se/node_modules/webpack/lib/Compiler.js:336:14)

npm ERR! Darwin 16.4.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "dev"
npm ERR! node v7.6.0
npm ERR! npm  v4.1.2
npm ERR! code ELIFECYCLE
npm ERR! @ dev: `node node_modules/webpack/bin/webpack.js --progress --hide-modules --config=$npm_package_config_webpack`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ dev script 'node node_modules/webpack/bin/webpack.js --progress --hide-modules --config=$npm_package_config_webpack'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the  package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node node_modules/webpack/bin/webpack.js --progress --hide-modules --config=$npm_package_config_webpack
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs 
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls 
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/peter/docker/lemp/www/mobelmaklarna/dev.mobelmaklarna.se/npm-debug.log
Peters-iMac:dev.mobelmaklarna.se peter$ 

The version works if i just ad:

mix.version();

but then all files gets versioned and that brakes my combine.

Thank you,

.*. did the trick :)

Just wondering if I can use mix.version() to version only specific files and not all files generated.
To be more specific, I just want to version app.min.js file, so I added
mix.version(['public/js/app.min.js']);
to my webpack.mix.js

const { mix } = require('laravel-mix');
mix.sass('resources/assets/sass/blade_custom.scss', 'sass/blade-custom.css').styles([ 
    'resources/assets/css/separate/vendor/pnotify.min.css',
    'resources/assets/css/lib/jqueryui/jquery-ui.min.css',
    'resources/assets/css/separate/pages/login.css',
    'resources/assets/css/lib/font-awesome/font-awesome.css',
    'resources/assets/css/lib/bootstrap/bootstrap.css',
    'resources/assets/css/separate/vendor/bootstrap.css
    ], 'public/css/app.css');
mix.scripts([
        'resources/assets/js/lib/jquery/jquery.min.js',
        'resources/assets/js/lib/bootstrap-table/jquery-ui.js',
        'resources/assets/js/plugins.js',
        'resources/assets/js/lib/bootstrap/bootstrap.js',
        'resources/assets/js/chat.js'
    ], 'public/js/app.js');
mix.minify('public/js/app.js');
mix.version(['public/js/app.min.js']);

but instead of getting versioned only app.min.js both app.min.js and app.css get versioned.

I'd also like yo know if you can version only specific assets

Was this page helpful?
0 / 5 - 0 ratings

Related issues

terion-name picture terion-name  路  3Comments

Micaso picture Micaso  路  3Comments

mstralka picture mstralka  路  3Comments

rderimay picture rderimay  路  3Comments

dtheb picture dtheb  路  3Comments