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');
});
Related
So in standard blade templates, you can translate any text by encapsulating them
{{__("Hello")}}
and it will translate to the applicable locale.
You can also do this in any included Javascript in the file...
#section('footer-scripts')
#parent
<script type="text/javascript">
swal.fire({
"title": "{{__('Alert')}}",
"text": "{{__('The application has been successfully submitted!')}}",
"type": "success",
"confirmButtonClass": "btn btn-secondary"
});
<script>
But what if you have a global js file thats included via webpack, call it custom.js and within it, it too has wording that needs to be translated?
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.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
mix.copy('node_modules/tinymce/skins', 'public/js/skins');
mix.styles([
'node_modules/apexcharts/dist/apexcharts.css', //ApexCharts
'resources/assets/plugins/global/plugins.bundle.css',
'resources/assets/plugins/global/fonts/line-awesome/css/line-awesome.css',
'resources/assets/plugins/custom/datatables/datatables.bundle.css',
'resources/assets/css/pages/wizard/wizard-1.css',
'resources/assets/css/style.bundle.css',
'resources/assets/css/skins/header/base/light.css',
'resources/assets/css/skins/header/menu/light.css',
'resources/assets/css/skins/brand/dark.css',
'resources/assets/css/skins/aside/dark.css',
'resources/custom.css'
], 'public/css/libs.css');
mix.scripts([
//Global - All Pages
'resources/assets/plugins/global/plugins.bundle.js',
'resources/assets/js/scripts.bundle.js',
// Page Vendors
'resources/assets/plugins/custom/datatables/datatables.bundle.js',
'resources/assets/plugins/custom/datatables/plugin-intl.js',
'resources/assets/plugins/custom/datatables/accent-neutralise.js', // DataTables Accent neutralise
// Custom Vendors
'node_modules/apexcharts/dist/apexcharts.min.js', //ApexCharts
'node_modules/jspdf/dist/jspdf.debug.js',
'node_modules/html2canvas/dist/html2canvas.js',
// Custom
'resources/custom.js'
], 'public/js/libs.js');
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.
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')
]
});
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
});
});
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.