So after my previous problem got solved, I'm now facing a different one. I'm using Browsersync to watch for file changes, and it works perfectly, but instead of injecting css changes, it realods the whole page whenever my css file is changed.
Here is my gulpfile:
var elixir = require('laravel-elixir');
var gulp = require('gulp');
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Sass
| file for our application, as well as publishing vendor resources.
|
*/
elixir(function(mix) {
mix.sass('comingsoon/soon.scss', 'public/assets/comingsoon/css/soon.css')
.scripts('comingsoon/soon.js', 'public/assets/comingsoon/js/soon.js')
.browserSync({
files: [
'app/*.*',
'app/**/*.*',
'public/assets/**/*.*'
],
open: 'external',
proxy: 'gate7.dev:81',
host: 'gate7.dev',
port: 80,
notify: false
});
});
Figured it out. I had to be specific about the files' extensions.
var elixir = require('laravel-elixir');
var gulp = require('gulp');
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Sass
| file for our application, as well as publishing vendor resources.
|
*/
elixir(function(mix) {
mix.sass('comingsoon/soon.scss', 'public/assets/comingsoon/css/soon.css')
.scripts('comingsoon/soon.js', 'public/assets/comingsoon/js/soon.js')
.browserSync({
files: [
'app/*.*',
'app/**/*.*',
'public/assets/**/*.css',
'public/assets/**/*.js'
],
open: 'external',
proxy: 'gate7.dev:81',
host: 'gate7.dev',
port: 80,
notify: false
});
});
Related
I'm trying to build a PWA with offline support using Laravel and Vue.js. I'm using the laravel-mix-workbox plugin to setup my service worker, but I'm having a massive amount of trouble trying to accomplish what should be a simple task. I have some static assets (images, XML files etc.) that are served out of my application, and I can't get workbox to add them to the precached file list.
I have tried moving the assets to /resources/img and adding a call to copyDirectory to try to get them included, also, I have tried the webpack-copy-plugin, but only the compiled assets are included(js, css, fonts etc). Here is my webpack.mix.js file:
const mix = require('laravel-mix');
//mp035 add workbox plugin and copy-webpack-plugin
require('laravel-mix-workbox');
const CopyPlugin = require('copy-webpack-plugin');
/*
|--------------------------------------------------------------------------
| 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.
|
*/
//mp035 fix issue with laravel-mix outputting bad urls in precache manifest for app.js (//js/app.js) and app.css
// and copy assets into place (so they are in the build tree)
mix.webpackConfig({
output: {
publicPath: ''
},
plugins: [
new CopyPlugin([
{ from: 'resources/img/*', to: 'public/img', flatten:true },
{ from: 'resources/root/*', to: 'public', flatten:true },
]),
],
})
.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sourceMaps().version()
// mp035 add inject manifest plugin to inject workbox manifest into the service worker.
.injectManifest({
swSrc: './resources/pwa/service-worker.js',
maximumFileSizeToCacheInBytes: 20000000, // ******************************DEBUG ONLY!!!
});
Does anyone know how I can include all files in my /resources/img (or /public/img) in the precached files list?
Ok, so it looks like this is an issue with laravel-mix-workbox. Removing it and using the generic workbox webpack plugin solves the problem. For anyone finding this, here is the updated webpack.mix.js:
const mix = require('laravel-mix');
//mp035 add workbox plugin and copy-webpack-plugin
const CopyPlugin = require('copy-webpack-plugin');
const {InjectManifest} = require('workbox-webpack-plugin');
/*
|--------------------------------------------------------------------------
| 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.
|
*/
//mp035 fix issue with laravel-mix outputting bad urls in precache manifest for app.js (//js/app.js) and app.css
// and copy assets into place (so they are in the build tree)
mix.webpackConfig({
output: {
publicPath: ''
},
plugins: [
new CopyPlugin([
{ from: 'resources/img/*', to: 'public/img', flatten:true },
{ from: 'resources/root/*', to: 'public', flatten:true },
]),
new InjectManifest({
swSrc: './resources/pwa/service-worker.js',
maximumFileSizeToCacheInBytes: 20000000, // ******************************DEBUG ONLY!!!
}),
],
})
.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sourceMaps().version();
All in all, using workbox with laravel-mix has been an extremely painful process with all of the 'minor' tweaks that laravel-mix does breaking the workbox plugin. I'd recommend sticking to plain webpack if possible.
Am building a web application with Vue and Laravel.
Am utilizing code splitting and versioning with Laravel mix and Webpack under the hood.
However, whenever i make changes to my code, run npm run production and upload on the live server, on frequent occations i receive TypeError: "e[r] is undefined"
I have to manually clear browser cache before the page loads correctly.
I already have versioning enabled and thus cache busting should be automated.
Below is my webpack.mix.js file
const mix = require('laravel-mix');
const webpack = require('webpack');
mix.webpackConfig({
plugins: [
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
]
})
const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
plugins: [new CompressionPlugin()],
optimization: {
minimize: true,
namedModules: true,
namedChunks: true,
removeAvailableModules: true,
flagIncludedChunks: true,
occurrenceOrder: false,
usedExports: true,
concatenateModules: true,
sideEffects: false, // <----- in prod defaults to true if left blank
}
};
/*
|--------------------------------------------------------------------------
| 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.js('resources/js/main/main.js', 'public/v1.4.0/js')
.sass('resources/sass/app.scss', 'public/css')
.extract(['vue'])
.version();
I had a similar problem and I found a solution that wasn't quite good but it worked: set in webpack config options optimization.concatenateModules and optimization.minimize to false.
After a lot of hustle,
my best approach was to control cache from the server software itself.
Ex: you can prevent JS and CSS caching from nginx / apache/http configurations
I'm trying to use Bootstrap-material-design https://github.com/FezVrasta/bootstrap-material-design on the Laravelhttp://laravel-boilerplate.com-boilerplate
Bootstrap-material-design has a npm install, but according to Bootstrap-material-design it's "just" a matter of adding the necessary links to your element for fonts and stylsheets, but Laravel can't find. I've tried this moving manually the .css and .js files:
<link rel="stylesheet" type="text/css" href="{{ URL::asset('css/bootstrap-material-design.css') }}">
In publicfolder I have /css and /js but I always get a 404 error.
Laravel-boilerplate use this config for webpack-mix.js:
const { mix } = require('laravel-mix');
const WebpackRTLPlugin = require('webpack-rtl-plugin');
/*
|--------------------------------------------------------------------------
| 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.css')
.sass('resources/assets/sass/backend/app.scss', 'public/css/backend.css')
.js([
'resources/assets/js/frontend/app.js',
'resources/assets/js/plugin/sweetalert/sweetalert.min.js',
'resources/assets/js/plugins.js'
], 'public/js/frontend.js')
.js([
'resources/assets/js/backend/app.js',
'resources/assets/js/plugin/sweetalert/sweetalert.min.js',
'resources/assets/js/plugins.js'
], 'public/js/backend.js')
.webpackConfig({
plugins: [
new WebpackRTLPlugin('/css/[name].rtl.css')
]
});
I have installed https://github.com/puikinsh/gentelella on my application, is there a way to link the assets to laravel elixir?
here is my template directory
Root
|-app/
|-node_module/
| |-gentelella/ # -> this is my template
|-gulpfile.js
|-public/
// other laravel folders to follow.
Inside ./gulpfile.js
var elixir = require('laravel-elixir');
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Sass
| file for our application, as well as publishing vendor resources.
|
*/
elixir(function(mix) {
mix.sass('app.scss');
});
Try this:
elixir(function(mix) {
mix.sass('app.scss');
mix.styles([
'node_modules/path/to/gentelella/css.css'
], 'public/css/app.css', './');
mix.version('public/css/app.css');
});
I'm having the following gulpfile.js:
var elixir = require('laravel-elixir');
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Less
| file for our application, as well as publishing vendor resources.
|
*/
var paths = {
'jquery': './vendor/bower_components/jquery/',
'bootstrap': './vendor/bower_components/bootstrap-sass-official/assets/',
'js': './resources/js/'
}
elixir(function (mix) {
mix.sass('app.scss', 'public/css/')
.copy(paths.bootstrap + 'fonts/bootstrap/**', 'public/fonts')
.scripts(
[
paths.jquery + "dist/jquery.js",
paths.bootstrap + "javascripts/bootstrap.js",
paths.js + "app.js"
],
'public/js/app.js', './')
.version(['js/app.js', 'css/app.css']);
mix.copy('public/js/app.js.map', 'public/build/js/app.js.map');
mix.copy('public/css/app.css.map', 'public/build/css/app.css.map');
});
However, the .map-files are not copied to the public/build/ folder. Am I doing something wrong with mix.copy()? How can I see why the files are not copied?
I actually think this is a bug in Laravel Elixir as well, since mix.version() should already copy the .map files already without the need for manual copying.
UPDATE
I filed a issue on Github: github.com/laravel/framework/issues/7650
As #Thomas said, it's fixed now: https://github.com/laravel/elixir/commit/77464c615b0fd2640eedd2954cd9c8cb3dfc6f44
Commit message:
When versioning files, copy over .map files as well.