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.
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 using Laravel 5.6 and I would like to add the vtk.js dependency.
I'm using the basic configuration of webpack included by laravel-mix. I'm creating my default app.js and don't want to change this behaviour. So vtk should be included in the app.js.
I also saw that we can add a custom webpack config like this
mix.webpackConfig({
resolve: {
modules: [
path.resolve(__dirname, 'node_modules'),
]
}
});
But I realy don't know how to include the module.exports and module from the webpack of js in the mix of laravel...
You have to append the path your js file in your webpack
run npm dev
const path = require('path');
const webpack = require('webpack');
const vtkRules = require('vtk.js/Utilities/config/dependency.js').webpack.v2.rules;
mix.webpackConfig({
module: {
rules: [...vtkRules]
},
resolve: {
modules: [
path.resolve(__dirname, 'node_modules'),
]
}
});
I'm not used to VTK, you have to import/configure everything else on your app.js, which is your entrypoint.
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'
]);
});