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 -->
Related
Webpage error
<!-- Scripts -->
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
I am not sure how get my css, bootstrap, and popper to display on the webpage when deployed. It works fine on local.
When you publish your site you don't have the node_modules folder on the server, don't worry you shouldn't have it there. Replace the node_modules with cdn links instead. You will find alot of cdn sources on cdnjs.com, but a few libraries have their own (like bootstrap), here is jquery for example https://cdnjs.com/libraries/jquery.
<!-- My links -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />
<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Introduction
I have two domains, http://mauricevandorst.com/ and http://tacticalmotion.nl/.
What do I want
I want the website https://mauricevandorst.com/personal-page/index.html to be the same website as http://tacticalmotion.nl/personal-page/index.html. The files and paths are exactly the same, so it should work but unfortunately it does not..
The issue
On my domain, mauricevandorst, the .css files load perfectly.
On my other domain, tacticalmotion, the .css files do not load at all.
To load the .css files in my Index.html I use the following code:
<!-- Custom Theme CSS -->
<link href="css/main.css" rel="stylesheet">
The CSS files I use can be found here:
main.css - bootstrap.css - bootstrap.min.css
Extra information
I have found out that when loading http://www.mauricevandorst.com/personal-page/index.html (http instead of https) gives the mistake too. Could it possibly be an SSL certificate that misses?
The thing is, since your website is in HTTPS you can't load HTTP content.
MDN Link
The best shot you've got is simply to use https CDN especially for bootstrap
Juste have a shot with thoose url.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
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
I have cloned the angular 2 seed project that provides fast, reliable and extensible starter for the development of my Angular 2 project.
Now, I want to install Twitter Bootstrap into my project. I followed the Angular docs:
Let's add the stylesheet.
Open a terminal window in the application root folder and enter the command:
npm install bootstrap --save
Open index.html and add the following link to the .
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
But Twitter Bootstrap classes are not working in my html files. And When I checked the source code from my browser, I found that my index.html file does not contain this line of code
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"> even though I have added it to my index. I have tried to refresh the browser several times and I have searched for a configurable way to install Twitter Bootstrap to my project but nothing found.
Here is my index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<base href="<%= APP_BASE %>">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title><%= APP_TITLE %></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- inject:css -->
<link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
<!-- endinject -->
</head>
<body>
<vynd-web-user-app>Loading...</vynd-web-user-app>
<script>
// Fixes undefined module function in SystemJS bundle
function module() {}
</script>
<!-- shims:js -->
<!-- endinject -->
<% if (ENV === 'dev') { %>
<script>
System.config(<%=
JSON.stringify(SYSTEM_CONFIG, null, 2)
%>)
</script>
<% } %>
<!-- libs:js -->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/ng2-bootstrap/x.x.x/ng2-bootstrap.min.js"></script>-->
<!-- endinject -->
<!-- inject:js -->
<!-- endinject -->
<% if (ENV === 'dev') { %>
<script>
System.import('<%= BOOTSTRAP_MODULE %>')
.catch(function (e) {
console.error(e,
'Report this error at https://github.com/mgechev/angular2-seed/issues');
});
</script>
<% } %>
</body>
</html>
And here is an overview of my project structure:
And here is the loaded index.html file in my browser:
The problem is in this part of code
<!-- inject:css -->
<link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
<!-- endinject -->
First, when I saw the <!-- inject:css --> and <!-- endinject --> comments in my index.html file, I thought that the team who are creating the angular 2 seed project provides those comments for us for more readable code and It is preferred to add every new css library between those two comments. But when I added the twitter bootstrap framework outside those two comments, it worked very well. Maybe every line of code that resides between the <!-- inject:css --> and <!-- endinject --> would be overridden by some automatically injected codes by some angular configuration files.
If you use angular-cli for your project my answer could be useful for you.
in root project directory run npm install --save bootstrap
edit .angular-cli.json - the file is in same location. Find here "styles" section
And add your bootstrap.css:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
I've added "../node_modules/bootstrap/dist/css/bootstrap.min.css", in my project. And now I can use all bootstrap classes.
P.S.
If you need not only bootstrap styles but some bootstrap scripts, just add into .angular-cli.json also script location in correspond section:
"scripts": [
"../node_modules/bootstrap/dist/js/bootstrap.js"
],
The route where you are loading the .css should be css/bootstrap/bootstrap.min.cs
Keep in mind that if you put ../ in your index.html, it will try to look in the parent folder where that file is, and since your css is in a folder in the same folder where you currently have the index.html try that.
Hope this helps
I am using node server to execute project. For executing projectevery time my process is execute following 3 commands in cmd
npm install
node server
grunt serve
I used pagination directive from Git-hub in my project, but the problem arising is that every time I initialize the project above way, the path given to pagination.js file gets disappear from index.html. I added this pagination module using
bower install angular-utils-pagination
I tried this with --save also, but the
<script src="assets/lib/angular-utils-pagination/dirPagination.js"></script>
this line is getting disappeared every time I start project, and I need to enter it manually.
Will you please help me solving this problem?
I see the problem. Like I state on the comment. you putting the script tag on wiredep scope build.
index.html
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="assets/lib/jquery/dist/jquery.js"></script>
<script src="assets/lib/angular/angular.js"></script>
<script src="assets/lib/angular-animate/angular-animate.js"></script>
<script src="assets/lib/angular-aria/angular-aria.js"></script>
<script src="assets/lib/angular-cookies/angular-cookies.js"></script>
<script src="assets/lib/angular-messages/angular-messages.js"></script>
<script src="assets/lib/angular-resource/angular-resource.js"></script>
<script src="assets/lib/angular-route/angular-route.js"></script>
<script src="assets/lib/angular-sanitize/angular-sanitize.js"></script>
<script src="assets/lib/angular-toastr/dist/angular-toastr.tpls.js"></script>
<script src="assets/lib/angular-touch/angular-touch.js"></script>
<script src="assets/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="assets/lib/angular-utils-pagination/dirPagination.js"></script>
<!-- endbower -->
<!-- endbuild -->
move your script tag after endbuild, then try to running 'grunt serve' again
...
<script src="assets/lib/angular-touch/angular-touch.js"></script>
<script src="assets/lib/bootstrap/dist/js/bootstrap.js"></script>
<!-- endboser -->
<!-- endbuild -->
<script src="assets/lib/angular-utils-pagination/dirPagination.js"></script>
if you want it automatic build on wiredep process then add that on karma.conf.js
I think it locate on test directory. if you could provide me that file, I will show you how.