CSS and JavaScript files in Laravel 5 website - javascript

I have a lot of CSS and JavaScript files in my Laravel 5.5 website and that leads to slow loading. How can I solve that? Here are the files:
<link rel="stylesheet" href="css/EdusecCustome.css">
<link rel="stylesheet" href="css/thead.css">
<link rel="stylesheet" href="css/AdminLTE-rtl.css">
<link href="/css/AdminLTE.css" rel="stylesheet">
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<link rel="stylesheet" href="css/bootstrap-rtl.css">
<link href="css/jquery.dataTables.min.css"rel="stylesheet">
<link rel="stylesheet"href="css/responsive.dataTables.min.css">
<link href="css/fixedColumns.dataTables.min.css"rel="stylesheet">
<link href="css/buttons.dataTables.min.css" rel="stylesheet">
<link href="css/stylepanel.css" rel="stylesheet">
<link href="css/ionicons.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/jquery.timepicker.min.css">
<link href="css/dataTables.tableTools.css" rel="stylesheet">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/pdfmake.js" charset="utf-8"></script>
<script src="js/vfs_fonts_times_new_roman.js"></script>
<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.js"></script>
<script src="/js/app.js"></script>
<script src="js/jquery.dataTables.min.js"></script>
<script src="js/datatables.bootstrap.js"></script>
<script src="js/dataTables.buttons.js"></script>
<script src="js/buttons.flash.js"></script>
<script src="js/buttons.html5.js"></script>
<script src="js/buttons.colVis.min.js"></script>
<script src="js/buttons.print.js"></script>
<script src="js/dataTables.responsive.min.js"></script>
<script src="js/dataTables.fixedColumns.min.js"></script>
<script src="js/dataTables.rowReorder.min.js"></script>
<script src="js/dataTables.tableTools.js"></script>
<script src="js/jquery.timepicker.js"></script>

I believe Laravel Mix can solve your issue. It uses Webpack and npm to compile your assets, you can read about Webpack here and npm here.

You can use webpack.mix.js and it'll build those files css in one file with minimization(with js the same action). Look at my example bellow:
let 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.styles([
'resources/assets/admin/bootstrap/css/bootstrap.min.css',
'resources/assets/admin/font-awesome/4.5.0/css/font-awesome.min.css',
'resources/assets/admin/ionicons/2.0.1/css/ionicons.min.css',
'resources/assets/admin/plugins/iCheck/minimal/_all.css',
'resources/assets/admin/plugins/datepicker/datepicker3.css',
'resources/assets/admin/plugins/select2/select2.min.css',
'resources/assets/admin/plugins/datatables/dataTables.bootstrap.css',
'resources/assets/admin/dist/css/AdminLTE.min.css',
'resources/assets/admin/dist/css/skins/_all-skins.min.css'
], 'public/css/admin.css');
mix.js('resources/assets/admin/bootstrap/js/bootstrap.min.js','public/js')
mix.scripts([
'resources/assets/admin/plugins/jQuery/jquery-2.2.3.min.js',
'resources/assets/admin/bootstrap/js/bootstrap.min.js',
'resources/assets/admin/plugins/select2/select2.full.min.js',
'resources/assets/admin/plugins/datepicker/bootstrap-datepicker.js',
'resources/assets/admin/plugins/datatables/jquery.dataTables.min.js',
'resources/assets/admin/plugins/datatables/dataTables.bootstrap.min.js',
'resources/assets/admin/plugins/slimScroll/jquery.slimscroll.min.js',
'resources/assets/admin/plugins/fastclick/fastclick.js',
'resources/assets/admin/plugins/iCheck/icheck.min.js',
'resources/assets/admin/dist/js/app.min.js',
'resources/assets/admin/dist/js/demo.js',
'resources/assets/admin/dist/js/scripts.js'
], 'public/js/admin.js');
mix.copy('resources/assets/admin/bootstrap/fonts', 'public/fonts');
mix.copy('resources/assets/admin/dist/fonts', 'public/fonts');
mix.copy('resources/assets/admin/dist/img', 'public/img');
mix.copy('resources/assets/admin/plugins/iCheck/minimal/blue.png', 'public/css');
mix.styles([
'resources/assets/front/css/bootstrap.min.css',
'resources/assets/front/css/font-awesome.min.css',
'resources/assets/front/css/animate.min.css',
'resources/assets/front/css/owl.carousel.css',
'resources/assets/front/css/owl.theme.css',
'resources/assets/front/css/owl.transitions.css',
'resources/assets/front/css/style.css',
'resources/assets/front/css/responsive.css'
],'public/css/front.css');
mix.scripts([
'resources/assets/front/js/jquery-1.11.3.min.js',
'resources/assets/front/js/bootstrap.min.js',
'resources/assets/front/js/owl.carousel.min.js',
'resources/assets/front/js/jquery.stickit.min.js',
'resources/assets/front/js/menu.js',
'resources/assets/front/js/scripts.js'
], 'public/js/front.js');
mix.copy('resources/assets/front/fonts', 'public/fonts');
mix.copy('resources/assets/front/images', 'public/images');
mix.copy('resources/assets/admin/dist/img', 'public/img')
And in my layout:
<link rel="stylesheet" href="/css/admin.css">
.....
<script src="/js/admin.js"></script>

Related

How to include/import custom js files into vue project?

I have downloaded html template from some site and now want to convert that whole template into vue cli project.The template has jquery and other custom js files.For jquery and bootstrap I used npm package but for other custom js I don't know how can I make it run.below is index.html file inside public folder in vue cli project.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>License Renewal</title>
<!-- Stylesheets -->
<link href="css/nepali.datepicker.v3.min.css" rel="stylesheet" type="text/css"/>
<link href="css/revolution-slider.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/jquery-ui.css" rel="stylesheet">
<!--Favicon-->
<link rel="shortcut icon" href="images/ezee-logo.png" type="image/x-icon">
<link rel="icon" href="images/ezee-logo.png" type="image/x-icon">
<!-- Responsive -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link href="css/responsive.css" rel="stylesheet">
<!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script><![endif]-->
<!--[if lt IE 9]><script src="js/respond.js"></script><![endif]-->
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div class="page-wrapper">
<div id="app"></div>
<!-- built files will be auto injected -->
</div>
<!--Scroll to top-->
<div class="scroll-to-top scroll-to-target" data-target=".main-header"><span class="icon fa fa-long-arrow-up"></span></div>
<script src="js/nepali.datepicker.v3.min.js" type="text/javascript"></script>
<script src="js/revolution.min.js"></script>
<script src="js/jquery.fancybox.pack.js"></script>
<script src="js/jquery.fancybox-media.js"></script>
<script src="js/owl.js"></script>
<script src="js/appear.js"></script>
<script src="js/wow.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery.datetimepicker.js"></script>
<script src="js/script.js"></script>
<!--Google Map APi Key-->
<script src="http://maps.google.com/maps/api/js?key="></script>
<script src="js/map-script.js"></script>
<!--End Google Map APi-->
<script type="text/javascript">
$('.modal').on('shown.bs.modal', function () {
$.getScript('js/nepali.datepicker.v3.min.js')
.done(function(script, textStatus) {
console.log(textStatus)
/*var mainInput = document.getElementById("nepali-datepicker");
mainInput.nepaliDatePicker();
console.log('date');
console.log(mainInput);*/
});
})
</script>
<script>
$('.motor-block').on('click',function () {
test('application');
console.log('yes');
})
function test(elID)
{
var dest = document.getElementById(elID);
$([document.documentElement, document.body]).animate({
scrollTop: $(dest).offset().top -25
}, 500);
}
</script>
</body>
</html>
below script files are those I am talking about.How can I run them?
<script src="js/nepali.datepicker.v3.min.js" type="text/javascript"></script>
<script src="js/revolution.min.js"></script>
<script src="js/jquery.fancybox.pack.js"></script>
<script src="js/jquery.fancybox-media.js"></script>
<script src="js/owl.js"></script>
<script src="js/appear.js"></script>
<script src="js/wow.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery.datetimepicker.js"></script>
<script src="js/script.js"></script>
below is main.js file
import Vue from 'vue'
import App from './App.vue'
import Main from './Main'
import router from './router'
import store from './store'
import jQuery from 'jquery'
global.jQuery=jQuery
global.$=jQuery
let Bootstrap=require('bootstrap')
import 'bootstrap/dist/css/bootstrap.css'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(Main)
}).$mount('#app')
There are a few routes you can take here. The easiest by far would be to find the files on NPM and install them in your project, use Webpack or Gulp, to copy the files over to the public JS path that is used in Index.js. Another way is to find those files online and copy them by hand (copy whole file contents, paste to new local file) and save to the template core files public path you wish.

Bootstrap, jQuery, Popper, and CSS load order

I'm not sure my load order is correct. Can someone make sure it is?
In "head" :
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
In "body" :
<script src="js/bootstrap.js"</script>
<script src="js/jquery-3.2.1.min.js"</script>
<script src="js/jquery-slim.min.js"</script>
<script src="js/popper.min.js"</script>
<script src="js/custom.js"></script>
In "head" :
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
In "body" :
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/custom.min.js"></script>
Try using the minified version they are much smaller therfore much faster to load
Check this out !
In head :
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" crossorigin="anonymous">
<!-- CUSTOME STYLE CSS-->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="style.css">
In Body :
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" crossorigin="anonymous"></script>

Laravel 5.3, Custom Css/Js not working

I am new to Laravel and working on a product. The issue I am facing is with loading JS and CSS files.
I have placed all the CSS and JS files inside assets folder and accessing them following way :
CSS :
<link href="{{asset('css/bootstrap.min.css')}}" rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="{{asset('css/bootstrap-select.css')}}">
<!-- Font Awesome CSS -->
<link href="{{asset('css/font-awesome.min.css')}}" rel='stylesheet' type='text/css'>
<link href="{{asset('css/ionicons.css')}}" rel="stylesheet" type="text/css">
<!-- Owl carousel -->
<link href="{{asset('css/owl.carousel.css')}}" rel="stylesheet" type="text/css">
<link href="{{asset('css/owl.theme.css')}}" rel="stylesheet">
<link href="{{asset('css/owl.transitions.css')}}" rel="stylesheet" type="text/css">
<!-- Custome CSS -->
<link rel="stylesheet" href="{{asset('css/nanoscroller.css')}}" type='text/css'>
<link href="{{asset('css/jquery.bxslider.css')}}" rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="{{asset('css/menu.css')}}">
<link href="{{asset('css/all.css')}}" rel='stylesheet' type='text/css'>
and
JS :
<!-- JS -->
<script src="{{asset('js/jquery-1.12.0.min.js')}}"></script>
<script src="{{asset('js/bootstrap.min.js')}}"></script>
<script src="{{asset('js/bootstrap-select.js')}}"></script>
<script type="text/javascript" src="{{asset('js/jquery.nanoscroller.js')}}"> </script>
<script defer src="{{asset('js/bx.js')}}"></script>
<script src="{{asset('js/jquery.mobile.custom.min.js')}}"></script>
<script src="{{asset('js/menu.js')}}"></script>
<script src="{{asset('js/owl.carousel.js')}}" type="text/javascript"> </script>
<script src="{{asset('js/custom.js')}}"></script>
This is exact the same way as it was working fine with the default js & css files come with fresh laravel installation like this :
Default CSS & JS (working) :
<link href="{{asset('/css/app.css')}}" rel="stylesheet">
<script src="{{asset('/js/app.js')}}"></script>
What I am missing here ? Do I have to use the gulp and compile all of js and css into default app.css and app.js files ?
Thanks
This points to the public dir not to the assets dir, move your files to public/css and public/js, use assets dir when your are using gulp.
If you would like to combine some plain CSS stylesheets into a single file, you may use the styles method. Paths passed to this method are relative to the resources/assets/css directory and the resulting CSS will be placed in public/css/all.css :
elixir(function(mix) {
mix.styles([
'normalize.css',
'main.css'
]);
});
for js use mix.scripts
Add /
<link href="{{asset('/css/bootstrap.min.css')}}" rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="{{asset('/css/bootstrap-select.css')}}">
<!-- Font Awesome CSS -->
<link href="{{asset('/css/font-awesome.min.css')}}" rel='stylesheet' type='text/css'>
<link href="{{asset('/css/ionicons.css')}}" rel="stylesheet" type="text/css">
<!-- Owl carousel -->
<link href="{{asset('/css/owl.carousel.css')}}" rel="stylesheet" type="text/css">
<link href="{{asset('/css/owl.theme.css')}}" rel="stylesheet">
<link href="{{asset('/css/owl.transitions.css')}}" rel="stylesheet" type="text/css">
<!-- Custome CSS -->
<link rel="stylesheet" href="{{asset('/css/nanoscroller.css')}}" type='text/css'>
<link href="{{asset('/css/jquery.bxslider.css')}}" rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="{{asset('/css/menu.css')}}">
<link href="{{asset('/css/all.css')}}" rel='stylesheet' type='text/css'>
And JS
<script src="{{asset('/js/jquery-1.12.0.min.js')}}"></script>
<script src="{{asset('/js/bootstrap.min.js')}}"></script>
<script src="{{asset('/js/bootstrap-select.js')}}"></script>
<script type="text/javascript" src="{{asset('/js/jquery.nanoscroller.js')}}"> </script>
<script defer src="{{asset('/js/bx.js')}}"></script>
<script src="{{asset('/js/jquery.mobile.custom.min.js')}}"></script>
<script src="{{asset('/js/menu.js')}}"></script>
<script src="{{asset('/js/owl.carousel.js')}}" type="text/javascript"> </script>
<script src="{{asset('/js/custom.js')}}"></script>

can't load agGrid in dependencies

I'm trying to load agGrid in my angular project but i can't figure what i'm doing wrong in implementation.. The error i got is
Error: [$injector:nomod] Module 'ag.grid' is not available!
below is the scripts and dependencies i use to get agGrid in my project.
<link rel="stylesheet" type="text/css" href="bower_components/toastr/toastr.min.css"/>
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="bower_components/angular-ui-select/dist/select.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/angular-loading-bar/build/loading-bar.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/nvd3/build/nv.d3.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/ng-prettyjson/dist/ng-prettyjson.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/ng-table/dist/ng-table.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/angular-ui-grid/ui-grid.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/ag-grid/dist/styles/ag-grid.css">
define([
'pages/transfer/grid/transfer-grid',
'pages/reports/reports/reports-config'
], function () {
var module = angular.module('app.pages.ePayment', [
'app.pages.transfer.grid',
'app.pages.reports.config',
'ngTable',
'agGrid'
]);
module.config(['$stateProvider', function ($stateProvider) {
$stateProvider.state('ePayment', {
url: '/ePayment',
views: {
contentView: {
templateUrl: 'app/pages/ePayment/ePayment.html'
}
}
});
}]);
module.run(['navigationMenuService', function (navigationMenuService) {
navigationMenuService.addMenuItem({
name: "ePayment",
link: "ePayment",
iconClass: "fa fa-money"
})
}]);
<script>window.name = "NG_DEFER_BOOTSTRAP!";</script>
<!-- build:remove:production -->
<script src="bower_components/angular/angular.js" type="text/javascript"></script>
<script src="bower_components/angular-animate/angular-animate.min.js" type="text/javascript"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js" type="text/javascript"></script>
<!-- <script angular-cache ojt preku require.js -->
<script src="bower_components/angular-filter/dist/angular-filter.min.js" type="text/javascript"></script>
<script src="bower_components/angular-loading-bar/build/loading-bar.js" type="text/javascript"></script>
<script src="bower_components/angular-translate/angular-translate.js" type="text/javascript"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/angular-ui-select/dist/select.min.js"></script>
<script src="bower_components/angular-ui-utils/ui-utils.min.js" type="text/javascript"></script>
<script src="bower_components/ngInfiniteScroll/build/ng-infinite-scroll.min.js" type="text/javascript"></script>
<script src="bower_components/quick-ngrepeat/quick-ng-repeat.js" type="text/javascript"></script>
<script src="bower_components/angular-nvd3/dist/angular-nvd3.min.js" type="text/javascript"></script>
<script src="bower_components/ng-prettyjson/dist/ng-prettyjson.min.js" type="text/javascript"></script>
<script src="bower_components/file-saver.js/FileSaver.js" type="text/javascript"></script>
<script src="bower_components/js-xlsx/dist/xlsx.core.min.js" type="text/javascript"></script>
<script src="bower_components/alasql/dist/alasql.min.js" type="text/javascript"></script>
<script src="bower_components/ng-table/dist/ng-table.js" type="text/javascript"></script>
<script src="bower_components/angular-ui-grid/ui-grid.min.js" type="text/javascript"></script>
<script src="bower_components/ag-grid/dist/ag-grid.js" type="text/javascript"></script>
Did i call it wrong or what? i installed using bower ( bower install ag-grid ) .
One thing that I faced with ag-grid is that you have to mention it in index.html even before angularjs and the other thing is in your main module you have to call the function:
agGrid.initialiseAgGridWithAngular1(angular);
Even before your module declaration. Refer https://www.ag-grid.com/best-angularjs-data-grid/index.php
Try these things and see if it works for you.

How to load angular2 using CDN and SystemJS

In my index.html file i load angular 2 through cdn but it seems because i import the modules of angular 2 systemjs thinks that i must have them locally, how can i fix that?
<html>
<head>
<base href="/">
<title>Angular 2 Arc</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<ng2-app>Loading...</ng2-app>
<!-- Load Angular 2 Core libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.24/system.js"></script>
<script src="https://npmcdn.com/rxjs#5.0.0-beta.2/bundles/Rx.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.9/angular2-polyfills.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.9/angular2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.9/http.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.9/router.min.js"></script>
<script src="https://npmcdn.com/angular2#2.0.0-beta.9/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js.map"></script>
<!-- Load Bootstrap and Jquery -->
<script src="lib/jquery/jquery.min.js" charset="utf-8"></script>
<script src="lib/bootstrap/js/bootstrap.min.js" charset="utf-8"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.0/gh-fork-ribbon.min.css" />
<link rel="stylesheet" href="/lib/bootstrap/css/bootstrap.min.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="assets/css/app.css">
<!-- Configure SystemJS -->
<script>
System.config({
defaultJSExtensions: true,
packages: {
boot: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('js/boot')
.then(null, console.error.bind(console));
</script>
</body>
</html>
With SystemJS you can provide a mapping to load module from a different location.
SystemJS.config({
map: {
'#angular': 'https://npmcdn.com/#angular'
}
});
This will redirect all loading of a module #angular to that cdn location.
For more detailed info check systemjs.config.js in this plunker for more detailed info

Categories