I have my gulpfile (using Laravel Elixir) set up to create 4 files.
app.css
app.js
vendor.css
vendor.js
When I run either gulp, or gulp default app.js does not get created. Yet if I run gulp watch, it is created perfectly.
Here is the elixir method:
elixir(function(mix) {
// Register html watcher
mix.templates()
// Compile app css
.sass('app.scss', null, {
includePaths: require('node-bourbon')
.with(require('node-neat').includePaths)
})
// Concatenate vendor css
.styles([
...
], 'public/css/vendor.css', 'public/css/vendor')
// Minify & concatenate vendor js
.scripts([
...
], 'public/js/vendor.js', 'public/js/vendor')
// Minify and concatenate app js
.scriptsIn('resources/assets/js', 'public/js/app.js')
// Version the compiled resources
.version([
'css/app.css',
'js/app.js',
'css/vendor.css',
'js/vendor.js'
]);
});
Related
I have two files, one CSS and one HTML in these locations:
resources/js/example/file.css
resources/js/example/file.html
What I would like to do using Laravel Mix (webpack) is
Minify the CSS file into file.min.css into the same directory
Minify the HTML file into file.min.html into the same directory
I have tried:
mix.postCss('resources/js/example/file.css', 'resources/js/example/file.min.css', [
require('cssnano')
]);
But this creates the CSS file in public/js/example/file.min.css.
I'm not sure why you don't want compiled files to be in the public directory. Regardless, you can use mix.setPublicPath() to change the output directory. This will tells Mix what you want the basic directory where all of your assets should be compiled to.
webpack.mix.js
const mix = require('laravel-mix');
mix.setPublicPath('');
mix.postCss('resources/js/example/file.css', 'resources/js/example/file.min.css', []);
If you want to Mix and minify HTML files you can install this plugin.
npm install minify-html-webpack-plugin --save-dev
Then add to your webpack...
const MinifyHtmlWebpackPlugin = require('minify-html-webpack-plugin');
const mix = require('laravel-mix');
mix.setPublicPath('');
mix.postCss('resources/js/example/file.css', 'resources/js/example/file.min.css', []);
mix.webpackConfig({
plugins: [
new MinifyHtmlWebpackPlugin({
afterBuild: true,
src: './resources/js/example',
dest: './resources/js/example',
ignoreFileNameRegex: /\.(gitignore|php)$/,
ignoreFileContentsRegex: /(<\?xml version)|(mail::message)/,
rules: {
collapseBooleanAttributes: true,
collapseWhitespace: true,
removeAttributeQuotes: true,
removeComments: true,
minifyJS: true,
}
})
]
});
And make a dev or production build. Keep in mind you will have to play around with the src and dest to get the output exactly the way you want it.
This is for my Laravel + Vue SPA app.
I have this Laravel Mix config file here:
const path = require('path');
const fs = require('fs-extra');
const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
require('laravel-mix-bundle-analyzer');
function publishAssets() {
const publicDir = path.resolve(__dirname, './public');
if (mix.inProduction()) {
fs.removeSync(path.join(publicDir, 'dist'));
}
fs.copySync(path.join(publicDir, 'build', 'dist'), path.join(publicDir, 'dist'));
fs.removeSync(path.join(publicDir, 'build'));
}
mix.js('resources/js/app.js', 'public/dist/js')
.sass('resources/sass/app.scss', 'public/dist/css').options({
postCss: [tailwindcss('./tailwind.config.js')],
processCssUrls: false,
});
// alias the ~/resources folder
mix.webpackConfig({
plugins: [
// new BundleAnalyzerPlugin()
],
resolve: {
extensions: ['.js', '.json', '.vue'],
alias: {
'#': `${__dirname}/resources`,
'~': path.join(__dirname, './resources/js'),
ziggy: path.join(__dirname, './vendor/tightenco/ziggy/dist/js/route.js'),
},
},
output: {
chunkFilename: 'dist/js/[chunkhash].js',
path: mix.config.hmr ? '/' : path.resolve(__dirname, './public/build'),
},
});
mix.then(() => {
if (!mix.config.hmr) {
process.nextTick(() => publishAssets());
}
});
It works fine with npm run watch, but when I do npm run production, the CSS doesn't work. The site loads and works, but the CSS is missing.
Can anyone see what in my code is causing it?
Here's my spa.blade.php:
<link rel="stylesheet" href="{{ mix('dist/css/app.css') }}">
...
<script src="{{ mix('dist/js/app.js') }}"></script>
In the network tab of Chrome dev tools, the CSS file is 270kb in develop environment and 42kb in prod environment.
Something is getting translated wrong.
In my case, it cause by setting wrong property "purge" in tailwindcss config file.
When I ran "npm run hot" or "npm run dev", the website was fine.
But it broke when I ran "npm run prod".
It seems the dev mode ignore the property "purge".
I'm calling this solved for now because my site started working.
it was extremely difficult to navigate since I had 6 months of work on a dev branch, and it worked via npm run watch. When I merged into master, npm run production loaded incorrectly--the styles were half there and half missing.
The solution was to downgrade from tailwindcss#1.9 to tailwindcss#1.4.
Along my way, I read something about postcss or something not working with the --no-progress flag which is on npm run production.
A person could try removing that flag, but I already downgraded tailwind so I didn't try that.
I built a single page application (SPA) using Laravel 8 + Vue.js + InertiaJs. Everything is working fine in the development environment, but when I compile assets for production, it shows me a blank page, and there is no error in the console. All assets are loading correctly with a 200 code, and everything seems to be OK, but the Vue app is not mounting!
webpack.mix.js
const mix = require('laravel-mix');
require('laravel-mix-workbox');
mix.webpackConfig({
output: {
filename: '[name].js',
chunkFilename: 'js/[name].js',
}
}).js('resources/js/app.js', 'public/js')
.extract(['vue'])
.version();
Image1
Image2
Image3
try using the inertiajs webpack.mix.js provided by the pingCRM github:
const path = require('path')
const mix = require('laravel-mix')
const cssImport = require('postcss-import')
const cssNesting = require('postcss-nesting')
/*
|--------------------------------------------------------------------------
| 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/app.js', 'public/js')
.vue()
.postCss('resources/css/app.css', 'public/css', [
// prettier-ignore
cssImport(),
cssNesting(),
require('tailwindcss'),
])
.webpackConfig({
output: { chunkFilename: 'js/[name].js?id=[chunkhash]' },
resolve: {
alias: {
vue$: 'vue/dist/vue.runtime.esm.js',
'#': path.resolve('resources/js'),
},
},
})
.version()
.sourceMaps()
note you may have to follow the instructions for setting up tailwindcss which can be found here, only do this if you plan to use it otherwise remove the require('tailwindcss'), from the webpack file
you also may need to npm install --save-dev postcss-import and npm install --save-dev postcss-nesting the --save-dev flag will add it to your package.json file for future reference
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 am using laravel elixir to compile and minify my code. But for some reason when I do the gulp -production task I am still not getting minified code. I would love to have minified javascript and css code for production.
My gulpfile :
'use strict';
process.env.DISABLE_NOTIFIER = false;
var elixir = require('laravel-elixir');
var autoprefixer = require('gulp-autoprefixer');
elixir(function(mix) {
mix.sass([
'./resources/assets/css/**/**/*.scss'
], 'public/css/style.css');
mix.scripts([
'app.js'
], 'public/js/angular/app.js');
mix.scripts([
'jquery/chosenSelect.js',
'jquery/fileUpload.js',
'jquery/velocity.min.js',
'jquery/leanModal.js',
'jquery/sectionScroll.js'
], 'public/js/jquery.js');
mix.scripts([
'services/OverheatingService.js'
], 'public/js/angular/services/services.js');
mix.scripts([
'controllers/LoopController.js',
'controllers/AlertController.js',
'controllers/LibraryController.js',
'controllers/StationController.js',
'controllers/ProfileController.js',
'controllers/HomeController.js',
'controllers/MainController.js',
'controllers/RecordController.js',
'controllers/SpecificuserController.js',
'controllers/DeleteAccountController.js',
'controllers/RegisterController.js',
'controllers/EditProfileController.js',
'controllers/SpecificLoopController.js',
'controllers/SpecificTagController.js'
], 'public/js/angular/controllers/controllers.js');
mix.scripts([
'directives/tooltip.js',
'directives/smoothScroll.js'
], 'public/js/angular/directives/directives.js');
});
//To watch changes in sass files
elixir.Task.find('sass').watch('./resources/assets/css/**/*.scss');
The Command is gulp --production not gulp - production.
You may also have a look at the Elixir Docs for Running Elixir.