combine multiple CSS or JS files in OpenCart - javascript

I want to Increase Page Speed in OpenCart. So, I want to combine multiple CSS or JS files in One file. but, JS & css files is added dynamic according to module enabled.
So, How can I make combine multiple CSS or JS files?
From This
<script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js"></script>
<script src="catalog/view/javascript/bootstrap/js/bootstrap.min.js"></script>
<script src="catalog/view/javascript/common.js"></script>
<script src="catalog/view/javascript/jquery/flexslider/jquery.flexslider-min.js"></script>
<link href="catalog/view/javascript/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="catalog/view/javascript/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="catalog/view/theme/default/stylesheet/stylesheet.css" rel="stylesheet">
<link href="catalog/view/javascript/jquery/flexslider/flexslider.css" type="text/css" rel="stylesheet" />
To This
<script src="catalog/view/javascript/vwc43ljnyxgu4y/combined.js"></script>
<link href="catalog/view/theme/default/2hs3dfonugkz/combined.css" rel="stylesheet">

You can use minify this does the job well by piling all of them together.
You can use also RequireJS for Javascript files. RequireJS calls all the JS files from a specified path.
check that out here
http://requirejs.org/docs/api.html#jsfiles

Gulp is a good tool to do what you're looking for. It can combine stylesheets, and javascript files and even do versioning which is great for cache-busting.
Taken from their official documentation:
Getting Started
1. Install gulp globally:
$ npm install --global gulp
2. Install gulp in your project devDependencies:
$ npm install --save-dev gulp
3. Create a gulpfile.js at the root of your project:
var gulp = require('gulp');
gulp.task('default', function() {
// place code for your default task here
});
4. Run gulp:
$ gulp
Using Gulp in addition to gulp-concat-css will allow you to do exactly what you need.
var gulp = require('gulp');
var concatCss = require('gulp-concat-css');
gulp.task('default', function () {
return gulp.src('assets/**/*.css')
.pipe(concatCss("styles/bundle.css"))
.pipe(gulp.dest('out/'));
});
(Note, I am in no way affiliated with Gulp, but use it on many of my own projects).

Related

Laravel Mix + Slick Carousel

I use laravel mix (webpack) to compile my project. Trying to add slick carousel plugin but get an error: Uncaught TypeError: $(...).slick is not a function .
I use .copy() method in webpack.mix.js file to copy from node_modules directory to public directory:
.copy('node_modules/jquery/dist/jquery.min.js', 'public/js')
.copy('node_modules/slick-carousel/slick/slick.min.js', 'public/js')
.copy('node_modules/slick-carousel/slick/slick.css', 'public/css')
.copy('node_modules/slick-carousel/slick/slick-theme.css', 'public/css')
All files successfully appeared in proper public directories and these files are seen in sources tab (in browser inspector).
After I plug slick styles, then jquery (tried several versions), then slick.js in html head. I even used cdn urls.
It's all ok with slick if I do the same without laravel mix.
It doesn't work, I can't understand what's wrong. Please help!
Give a try to change as below:
.copy('node_modules/jquery/dist/jquery.min.js', 'public/assets/js')
.copy('node_modules/slick-carousel/slick/slick.min.js', 'public/assets/js')
.copy('node_modules/slick-carousel/slick/slick.css', 'public/assets/css')
.copy('node_modules/slick-carousel/slick/slick-theme.css', 'public/assets/css')
Reference: https://new.laravel.su/docs/5.4/mix
First npm install slick-carousel
If you are using copy then
mix.copy('node_modules/slick-carousel/slick', 'public/assets/slick');
Or you can just manually copy-paste
In .html file
<link rel="stylesheet" type="text/css" href="/assets/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="/assets/slick/slick-theme.css"/>
<script type="text/javascript" src="/assets/slick/slick.min.js"></script>

How to setup the environment for Angular 2.0?

Taking my initial steps towards Angular 2.0.
First thing is to set up the right environment for the development.
My index.html
<!DOCTYPE HTML>
<html>
<head>
<title>Welcome to Angular 2.0</title>
<!--css-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
</head>
<body>
<div class="container">
<h1> Hello Angular 2 </h1>
<my-app> Loading app component....<my-app>
</div>
<!--js-->
<!-- Polyfills for older browsers -->
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js#0.7.4?main=browser"></script>
<script src="https://unpkg.com/reflect-metadata#0.1.8"></script>
<script src="https://unpkg.com/systemjs#0.19.39/dist/system.src.js"> </script>
<script> window.autoBootstrap = true; </script>
<script src="https://cdn.rawgit.com/angular/angular.io/b3c65a9/public/docs/_examples/_boilerplate/systemjs.config.web.js"></script>
<script>
System.import('app').catch(function (e) { console.log(e); });
</script>
<!--js-->
</body>
</html>
I have copied the content from https://angular.io/docs/ts/latest/guide/setup.html for the following files:-
app.component.ts
app.module.ts
main.ts
NPM is installed & running.
But in order to get the node_modules folders with the required dependencies for the app to run.
What commands do I need to run.
What are the commands that I need to run to set up the Angular 2 environment?
Please note I am new to NPM.
Thanks.
You have angular-cli wich is a good starter point. It will set you everything up according to best practices.
Simple way to set up your first Angular 2 Application.
Download the zip version here.firstAngular2App
Extract it to your destination folder. Assume D:
Open your command prompt(ensure that all required softwares are installed).
Navigate it to the folder. Use the command cd D:\firstAngular2App
Executre npm install
Once it is done use npm start
This way you have your first Angular2 appliction up and running.
npm install in the root project (it will create your node_modules from the dependencies mentioned in package.json file, should have those files as a start)
If you are already using Visual Studio Code as an IDE, you may want to explore how they recommend setting up Angular. I personally found their installation guide painless and feature-rich. I have never walked through an official Angular installation before due to being drenched in jQuery projects. This guide was simple enough to give me a good beginners understanding.

How to handle all the minification / uglify process

I have a AngularJS application which I should deploy and I found that it is better to minify / uglify my javascript file for production.
I found different way to uglify my files like grunt for example.
But there is something I don't get...
I will minify/uglify those files then I will have a specific folder for those "production" files. OK
Then :
How should I use them in my index.html ?
How should I switch from dev to prod ?
What should be the structure of my website folder ? Should I still contain the not-uglified files ?
So I can explain it to you using gulp instead of grunt.
How should I use them in my index.html ?
You can put JS and CSS files in your html. In html we can specify comments saying which files need to be compiled together along with destination file using bower.
For example:-
<!-- build:css styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="/bower_components/angular-material/angular-material.css" />
<link rel="stylesheet" href="/bower_components/angular-ui-router-anim-in-out/css/anim-in-out.css" />
<link rel="stylesheet" href="/bower_components/video.js/dist/video-js.css" />
<link rel="stylesheet" href="/bower_components/angular-tooltips/dist/angular-tooltips.min.css" />
<link rel="stylesheet" href="/bower_components/nvd3/build/nv.d3.css" />
<!-- endbower -->
<!-- endbuild -->
Now if see the above css files are compiled into vendor.css while you run the gulp script. Now in gulp script you can provide the option for uglification and minification.
Similarly you can put js files also. Now this is how uglification and minification takes places.
gulp.src('app/*.html')
.pipe(assets)
.pipe($.if('*.js', $.uglify()))
.pipe($.if('*.css', $.minifyCss({
compatibility: '*'
})))
If you uglify/minify now you index.html has following:-
<link rel="stylesheet" href="/styles/vendors.css" />
How should I switch from dev to prod ?
You can keep a nested JSON file and create individual elements for dev,prod and local and keep required settings here and use them in gulp while compiling the project.
{
"dev": {
//required keys
},
"prod" :{
//required keys
}
What should be the structure of my website folder ? Should I still contain the not-uglified files ?
Your website structure can be as:-
app
scripts
styles
fonts
index.html
bower.json
gulpfile.js
another way is to use gulp-useref plugin, putting comments inside the html file to mark all js files and name the resulting bundle
in the html file
<!-- build:js bundle.js -->
<script src="js/jsfile1.js" ></script>
<script src="js/jsfile2.js" ></script>
<script src="js/jsfile3.js" ></script>
<!-- endbuild -->
in the gulpfile.js
gulp.task('build', function(){
gulp.src('app/*.html')
.pipe(useref())
.pipe(gulpIf('*.js', uglify()))
.pipe(gulp.dest('build'));
});
this will result a single minified js file bundle.js with proper reference in the html file

How do I bundle CSS and js files into a single HTML file?

Is there a way webpack can process my HTML tags such as
<link rel="stylesheet" href="./style.css">
<script src="./script.js"></script>
And bundle them into
<style>
//contents of minified style.css
</style>
<script>
//bundled and minified script.js
</script>
So I can serve a single file from my servers? I managed to do this with the Processhtml grunt plugin, but I'm not using grunt as build system on this project.
You can achieve this with webpack using; extract-text-webpack-plugin, html-webpack-plugin and UglifyJsPlugin
there's also uglify loader if you want to uglify during bundling, as the plugin does the uglify after the bundle is created.
html-webpack-inline-source-plugin should be what you're looking for. It is a plugin for html-webpack-plugin which itself is a plugin for webpack. So basically works as a plugin for a plugin for webpack. The github page shows a very simple example on how to do exactly what you're looking for.

Combine multiple javascript files with bower

I'm looking into using Bower with my project (more specifically, django-bower), and I was curious if bower has the ability to combine multiple javascript files into one file when pushing to production.
In other words it would take:
jquery.min.js
angular.min.js
something_else.js
another_thing.js
and produce one file that the user loads: everything.js
In reality we have upwards of 20-30 js files, which is why this would be incredibly helpful.
Bower is a package manager. I think what you're looking for is Grunt.
See how to minify multiple js files using grunt.
Use Browserify. It takes your Node requires and compiles them into a single JS file that can be included in your HTML. Ex main.js:
var JQuery = require('jquery');
var Angular = require('Angular');
require('./something_else');
require('./another_thing');
Browserify your dependency chain...
browserify main.js > compiled.js
Include in your HTML
<html>
<head>
<script type="text/javascript" src="compiled.js"></script>
</head>
</html>

Categories

Resources