I have a project with a lot of js and css and I want to concat and minify them.
The problem is that I do not need all the scripts and css in all the pages so in my view I have a section which load the right assets for the page.
How can I use Elixir to minify resources for each page? is it possibile?
Can I concat, minify and versioning different assets and references to them in my view?
How can I do that?
......
//main js
mix.scripts([
...
...
...
], publicJs + 'main.js');
//some js that are for about page
mix.scripts([
], publicJs + 'about.js);
mix.version([
publicJs + 'main.js',publicJs + 'about.js'
]);
and for example if there are some files that are common for about and pricing pages i.e., then you can group them toghether too
mix.scripts([
...
...
],publicJs + 'someGrouped.js);
mix.scripts([
...
...
],publicJs + 'someOtherGrouped.js);
mix.scripts([
'../../' + publicJs + 'someGrouped.js,
'../../' + publicJs + 'someOtherGrouped.js,
...
],publicJs + 'grouped.js);
also you need to run
gulp --production
to minify all css and js files
Related
I am trying to load Bootstrap Vue into a Laravel 5.6 project
The official docs say to modify your webpack.config.js file like:
+ module: {
+ rules: [
+ {
+ test: /\.css$/,
+ use: [
+ 'style-loader',
+ 'css-loader'
+ ]
+ }
+ ]
+ }
Webpack docs: https://webpack.js.org/guides/asset-management/#loading-css
I don't have a webpack.config.js file so I tried loading the CSS in with Laravel mix
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.styles('node_modules/bootstrap-vue/dist/bootstrap-vue.css', 'public/css');
This give me an error
mix.combine() requires a full output file path as the second argument.
and I'm not convinced it's the right way to do it.
What is the proper way to add bootstrap-vue into a new Laravel 5.6 project?
Import the Bootstrap Vue styles in your app.scss file directly, instead of through mix:
// app.scss
#import "~bootstrap/dist/css/bootstrap.css";
#import "~bootstrap-vue/dist/bootstrap-vue.css";
// webpack.mix.js
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
Laravel Mix already has the CSS loader configured so you don't need to set up a separate webpack.config.js file.
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.
I'm working on a project that has two separate js folders for user (public/js) and admin usage (public/admin_stuff/js).
I'm going to have two all.js files , one for user section js files and another for admin section js files . how can i achieve that in a neat way?
If you are using elixir, then:
// For admin
mix.scripts([
'admin_js_source_folder/**/*.js',
], 'public/admin_stuff/js/all.js');
// Another
mix.scripts([
'other_folder_js_files/**/*.js',
], 'public/other/js/all.js');
Other cases:
gulp.task('admin', function() {
return gulp.src('admin_stuff/js/**/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('public/admin'));
})
gulp.task('other', function() {
return gulp.src('other/js/**/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('public/other'));
})
gulp.task('default', ['admin', 'other']);
If your are using laravel 5, i recommend using elixir:
https://laravel.com/docs/5.0/elixir
I want to combine all my scripts into one minified javascript file, but I'm having trouble combining them.
mix.browserify([
// ViewModels
'viewmodels.js'
], 'resources/assets/compiled/js/viewmodels.js')
mix.coffee([
// WebSocket Client
'client.coffee'
], 'resources/assets/compiled/js/').scripts([
// Vendor
'vendor/jquery.js',
'vendor/bootstrap.js',
'vendor/vue.js',
'vendor/sisyphus.js',
'vendor/leaflet.js',
'vendor/moment.min.js'
], 'resources/assets/compiled/js/vendor.js').scripts([
// Site & Helpers
'libs/laravel.js',
'libs/helpers.js'
], 'resources/assets/compiled/js/site.js').scripts([
// Combine Scripts
'resources/assets/compiled/js/vendor.js',
'resources/assets/compiled/js/client.js',
'resources/assets/compiled/js/site.js',
'resources/assets/compiled/js/viewmodels.js'
], 'public/js/all.js', './')
The files are created in resources/assets/compiled/js, so I've got:
client.js
site.js
vendor.js
viewmodels.js
The last task that's run is the scripts task combining the four files.
The elixir log states (I simplified the ouput):
Browserify (ViewModels)
CoffeeScript Compiled
Merging Vendor
Merging Site & Helpers
Merging Combine Scripts
... and these are the error messages I get:
File not found: ./resources/assets/compiled/js/vendor.js
File not found: ./resources/assets/compiled/js/site.js
I did the exact same thing with sass and styles and it worked perfectly.
mix.sass([
// Vendor
'resources/assets/sass/fontawesome/font-awesome.scss',
// Site
'resources/assets/sass/site/site.scss'
], 'resources/assets/compiled/css/').styles([
// Vendor
'resources/assets/css/bootstrap.min.css',
'resources/assets/css/hover-min.css',
'resources/assets/css/leaflet.css',
'resources/assets/compiled/css/font-awesome.css',
// Site
'resources/assets/compiled/css/site.css'
], 'public/css/all.css', './').version(
'public/css/all.css'
)
Why don't you merging the scripts all at once instead of doing it 3 times ?
Try like this
mix.coffee([
// WebSocket Client
'client.coffee'
], 'resources/assets/compiled/js/')
.scripts([
// Vendor
'resources/assets/js/vendor/jquery.js',
'resources/assets/js/vendor/bootstrap.js',
'resources/assets/js/vendor/vue.js',
'resources/assets/js/vendor/sisyphus.js',
'resources/assets/js/vendor/leaflet.js',
'resources/assets/js/vendor/moment.min.js',
// Site & Helpers
'resources/assets/js/libs/laravel.js',
'resources/assets/js/libs/helpers.js',
'resources/assets/compiled/js/client.js',
'resources/assets/compiled/js/viewmodels.js'
], 'public/js/all.js', './');
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'
]);
});