How to handle all the minification / uglify process - javascript

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

Related

yeoman webapp: Minified JS for multiple HTML pages

I'm playing around with the yeoman webapp generator and want to have multiple minified JavaScript files for my individual subpages for my page. However, the webapp concats all JavaScript files to one "big" main.js which does not match my setup.
In my setup, main.js is supposed to be some kind of common JavaScript file for all pages but each page should have an additional JavaScript file with stuff that only relates to this page. E.g.
index.html -> uses main.js
subpage1.html -> uses main.js and subpage1.js
subpage2.html -> uses main.js and subpage2.js
The result from gulp build is a big main.js that contains the main.js, subpage1.js and the subpage2.js which leads to errors: if I open subpage1.html, subpage2.js (the one that is included in the big main.js) might try to access HTML nodes that only exist on subpage2.html but not on subpage1.html.
E.g.:
subpage1.html includes the big main.js with subpage2.js
<script src="scripts/main.js"></script>
which contains subpage1.js AND subpage2.js, however if I do the following in subpage2.js
$('#IdThatOnlyExistsOnSubPage2').someMethod(...)
this fails of course.
How do I have to adjust the Gulpfile to solve this problem?
JS and CSS builds are generating with uglify (formerly known as usemin) you could find more advanced options and features from their documentation but I think you should separate build block by your needs.
If you have a common JS file for every page, you have to put them together for each pages and create new block for page specific files.
Here is example.
<!-- build:js scripts/main.js -->
<script src="config.js"></script>
<script src="app.js"></script>
<!-- endbuild -->
<!-- build:js scripts/page-dashboard.js -->
<script src="dashboard-charts.js"></script>
<script src="dashboard-widgets.js"></script>
<script src="dashboard-main.js"></script>
<!-- endbuild -->
Also you could do same thing for CSS file builds.
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="app.css">
<!-- endbuild -->
<!-- build:css style/page-dashboard.css -->
<link rel="stylesheet" href="dashboard-charts.css">
<link rel="stylesheet" href="dashboard-widgets.css">
<link rel="stylesheet" href="dashboard-main.css">
<!-- endbuild -->

Boostrap css doesn't work

I installed npm install bootstrap --save
and added (below) to index.html but the styles doesn't change.
<link rel="stylesheet"
href="node_modules/bootstrap/dist/css/bootstrap.min.css">
My code (in other file):
<button type="submit" class="btn btn-default">Submit</button>
Only when I add this (below) to index.html, all works but the first web's load is very slow:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
Update: (More details)
The file bootstrap.min.css does exsist but the console says it cant find it.
Folders Strucure:
There is main folder is ang2project and inside it there are node_modules folder and src folder that contain the index.html
-angular2_projects
-node_modules
-bootstrap
-dist
-css
bootstrap.min.css
-src
-index.html

JS and CSS files not loading inside html

My folder structure looks like,
MyProject
|
webcontent
Inside webContent folder I am having my html, js,CSS files.
Here I am loading the js & CSS files directly as below.
<script src="jquery-1.10.2.js"></script>
<script src="jquery-ui.js"></script>
<link rel="stylesheet" href="jquery-ui.css">
But I want to keep the js and CSS file in different folder and I need to call them where I want. But I am not getting where to place the js & CSS file and how to define the path inside html or jsp.
It depends on where they are and how you configure your web server. With a default configuration on nearly all web servers, if you want your scripts in a subdirectory of webcontent, then just add directory-name/ in front of the paths. E.g., for:
MyProject/
|
webcontent/
|
js/
jquery-1.0.2.js
jquery-ui.js
css/
jquery-ui.css
then
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui.js"></script>
<link rel="stylesheet" href="css/jquery-ui.css">
The search terms for this are "relative URL" and/or "relative path."
Suppose you have your css file in
WebRoot --> Css
folder then use below line in your html
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
I hope this helps you
for example, Your HTml file is in one folder and your CSS/js file is in a folder name "mystyle" inside HTML folder. You should address your CSS file LIKE this:
<link rel="stylesheet" href="mystyle/style.css" />
And if your file is in a folder "before" HTML folder, your address your css/js file like this:
<link rel="stylesheet" href="../mystyle/style.css" />

combine multiple CSS or JS files in OpenCart

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).

How to rename paths within files in gulp?

If I have multiple script tags in my index.html
<link rel="stylesheet" href="style/style.css" />
<script src="myjs/js.js"></script>
Is it possible to write a gulp task that looks at all html files, and appends "mydir/" to the front of all paths such that the output file (of the same name) i.e. index.html is still index.html.
So when I open the file if I look at the paths, I see
<link rel="stylesheet" href="mydir/style/style.css" />
<script src="mydir/myjs/js.js"></script>
I know there is a gulp-rename, but it looks to only rename files and not contents of files.
Making this the actual answer -
<base href="mydir/">
You don't need gulp to do this for you.

Categories

Resources