Help Test the 1.0 Release

Hey, everyone -

I’ve been working on Mix quite a bit in the last week, as we prep the official 1.0 release. Countless bugs have been fixed, and, for the non-webpack tasks, like concatenation, copying, and versioning, I’ve refactored the codebase to a more sequential task-based setup.

Because many sections of the codebase have been rewritten, I’d love some help testing the beta before we make it official.

Install

laravel new test-project

Currently, Laravel installs the 0.* version of Mix. Open package.json and delete that line entirely. We’ll pull in the beta instead. Now return to the terminal and install Laravel’s Node dependencies, as well as the beta of Laravel Mix.

npm install
npm install laravel-mix@beta

Okay, you’re all set. Try out the API, see if you find any issues. I’m sure there are some, so we’ll get those squared away pretty quickly and then officially release 1.0 soon.

What to Test

• Windows users, please test out file watching (npm run watch). This can sometimes get a little tricky.
• Sourcemaps work like you expect?
• All mix.options() settings good?
• Production builds working well?
• …Anything you can think of would help.

Notes

• The API should be exactly the same. This isn’t a breaking release.

• File versioning (mix.version()) in Mix has changed. Rather than forcing a hash into the output file name, we instead store it as a querystring within your mix-manifest.json file. This not only simplifies the Mix codebase, but it should also make deployment and general compilation cleaner.

• Better terminal output for your compilation. This will now include even your non-webpack tasks.

• If you create a .babelrc file in your project root, it’ll now be intelligently merged with Mix’s own Babel config file, rather than overwriting it completely. This was the source of many issues in the past.

• Much of Mix’s internal structure has been simplified and refactored to a plugin-based system.

• mix.combine/scripts/styles/minify() and mix.copy() are now triggered sequentially, after webpack finishes its main compilation. This means, you can sequentially do thinks like:

  • Compile my JS
  • Then copy the generated output file to this other location
  • And then concatenate that new file, with all these other files I have.
  • And finally version all relevant files

mix.js('resources/assets/js/app.js', 'public/js')
   .copy('public/js/app.js', 'public/somewhere')
   .combine([
       'public/js/vendor/jquery.js', 
       'public/somewhere/app.js'
   ], 'public/all.js')
   .version();

[sayhicoelho]

@TopFuel You saved my day! My issue was just because Windows treats slashes differently comparing to Linux/Mac OS. See my following working code:

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

mix.setPublicPath(`..${path.sep}public_html`);
mix.js('resources/assets/js/app.js', 'js')
   .sass('resources/assets/sass/app.scss', 'css');

I’m using the ‘path’ module because node.js will pass either “/” or “\” depending on which platform you’re running the application.

[maaxxicarvalho]

I’m trying with an existing project and also from scratch.

• Macos Sierra 10.12.5
• node -v - v8.1.1
• npm -v 5.0.3

When from scratch (using the instructions at the beginning of this issue)

I’m getting the following error when trying to run and of the npm commands

npm run dev                                                                                                                                                                [22:38:10]

> @ dev /Users/maxcarvalho/Code/test-project
> npm run development


> @ development /Users/maxcarvalho/Code/test-project
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

events.js:182
      throw er; // Unhandled 'error' event
      ^

Error: spawn node_modules/webpack/bin/webpack.js ENOENT
    at exports._errnoException (util.js:1016:11)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:189:19)
    at onErrorNT (internal/child_process.js:366:16)
    at _combinedTickCallback (internal/process/next_tick.js:102:11)
    at process._tickCallback (internal/process/next_tick.js:161:9)
    at Function.Module.runMain (module.js:607:11)
    at startup (bootstrap_node.js:158:16)
    at bootstrap_node.js:575:3
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/maxcarvalho/.npm/_logs/2017-06-15T21_38_17_040Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/maxcarvalho/.npm/_logs/2017-06-15T21_38_17_066Z-debug.log

When I’m using with an existing project (non-laravel) I’m being able to run npm run dev and npm run watch, but every time that I try to run npm run prod I’m getting an error:

npm run prod                                                                                                                                              ✖ ➜ ✹ ✚ ✭ [22:18:15]

> @ prod /Users/maxcarvalho/Code/smoke
> npm run production


> @ production /Users/maxcarvalho/Code/smoke
> cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

 95% emitting

 DONE  Compiled successfully in 10842ms                                                                                                                                                             22:19:34

Whoops! We had trouble minifying "/skin/frontend/rwd/smoke/js/smoke.js". Perhaps you need to use mix.babel() instead?
/Users/maxcarvalho/Code/smoke/node_modules/laravel-mix/src/plugins/CustomTasksPlugin.js:67
                throw e;
                ^

Error: ENOENT: no such file or directory, open '/skin/frontend/rwd/smoke/js/smoke.js'
    at Object.fs.openSync (fs.js:651:18)
    at Object.fs.readFileSync (fs.js:553:33)
    at addFile (/Users/maxcarvalho/Code/smoke/node_modules/uglify-js/tools/node.js:85:22)
    at /Users/maxcarvalho/Code/smoke/node_modules/uglify-js/tools/node.js:104:17
    at Array.forEach (native)
    at Object.UglifyJS.minify (/Users/maxcarvalho/Code/smoke/node_modules/uglify-js/tools/node.js:102:26)
    at File.minify (/Users/maxcarvalho/Code/smoke/node_modules/laravel-mix/src/File.js:221:31)
    at manifest.forEach.asset (/Users/maxcarvalho/Code/smoke/node_modules/laravel-mix/src/plugins/CustomTasksPlugin.js:60:23)
    at Array.forEach (native)
    at CustomTasksPlugin.minifyAssets (/Users/maxcarvalho/Code/smoke/node_modules/laravel-mix/src/plugins/CustomTasksPlugin.js:56:18)
    at Compiler.compiler.plugin.stats (/Users/maxcarvalho/Code/smoke/node_modules/laravel-mix/src/plugins/CustomTasksPlugin.js:16:22)
    at Compiler.applyPlugins (/Users/maxcarvalho/Code/smoke/node_modules/tapable/lib/Tapable.js:61:14)
    at /Users/maxcarvalho/Code/smoke/node_modules/webpack/lib/Compiler.js:271:13
    at Compiler.emitRecords (/Users/maxcarvalho/Code/smoke/node_modules/webpack/lib/Compiler.js:367:37)
    at /Users/maxcarvalho/Code/smoke/node_modules/webpack/lib/Compiler.js:265:12
    at /Users/maxcarvalho/Code/smoke/node_modules/webpack/lib/Compiler.js:360:11
    at next (/Users/maxcarvalho/Code/smoke/node_modules/tapable/lib/Tapable.js:154:11)
    at Compiler.compiler.plugin (/Users/maxcarvalho/Code/smoke/node_modules/webpack/lib/performance/SizeLimitsPlugin.js:99:4)
    at Compiler.applyPluginsAsyncSeries1 (/Users/maxcarvalho/Code/smoke/node_modules/tapable/lib/Tapable.js:158:13)
    at Compiler.afterEmit (/Users/maxcarvalho/Code/smoke/node_modules/webpack/lib/Compiler.js:357:8)
    at Compiler.<anonymous> (/Users/maxcarvalho/Code/smoke/node_modules/webpack/lib/Compiler.js:352:14)
    at /Users/maxcarvalho/Code/smoke/node_modules/async/dist/async.js:421:16
    at iteratorCallback (/Users/maxcarvalho/Code/smoke/node_modules/async/dist/async.js:998:13)
    at /Users/maxcarvalho/Code/smoke/node_modules/async/dist/async.js:906:16
    at /Users/maxcarvalho/Code/smoke/node_modules/graceful-fs/graceful-fs.js:43:10
    at FSReqWrap.oncomplete (fs.js:135:15)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ production: `cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ production script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/maxcarvalho/.npm/_logs/2017-06-15T21_19_34_951Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ prod: `npm run production`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ prod script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/maxcarvalho/.npm/_logs/2017-06-15T21_19_34_976Z-debug.log