CODEWITHSUNDEEP
javascriptjquerygulpyeomanminify
krinklesaurus
krinklesaurus

Reputation: 1686

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?

Upvotes: 0

Views: 213

Answers (1)

ugurerkan
ugurerkan

Reputation: 800

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

Upvotes: 1

Related Questions