Menu icon Foundation
add javascript file to one page

Is there any method to add javascript files for only one page without modifying gulpfile.babel.js? Foundation by default combines all the javscript file in js folder. 

javascriptpage

Is there any method to add javascript files for only one page without modifying gulpfile.babel.js? Foundation by default combines all the javscript file in js folder. 

Rafi Benkual over 2 years ago

You could include the script tag manually in the page, CDN, or alternatively, create a new layout and add it at the top like this:

---
layout: nameitwhatyouwant
---

Kun Chen over 2 years ago

Hi Rafi, thanks for the reply.  

 

I think the problem lies in that I cannot put the js file in the js folder otherwise gulpfile document will read it and combine it into app.js. So do you suggest that I can maintain js file using another folder and then manually include that js to the html?

jenny about 1 year ago

We have been here just to get something we want to get the clash royale cheat online when we need the gems and gold.

Snig about 1 year ago

One approach that I have used (may not be the best!) is to:

(a) Create a new sub-folder under src/assets e.g. src/assets/code.

(b) Put any additional js files (minimised) you want to conditionally reference on certain pages in this new folder.

(c) Modify the watch function at the bottom of the gulpfile.bable.js file to watch for changes to files in the new 'code' folder in addition to all the others e.g. the extra gulp.watch('src/assets/code...' line in the  example code below:

// Watch for changes to static assets, pages, Sass, and JavaScript
function watch() {
  gulp.watch(PATHS.assets, copy);
  gulp.watch('src/pages/**/*.html').on('all', gulp.series(pages, browser.reload));
  gulp.watch('src/{layouts,partials}/**/*.html').on('all', gulp.series(resetPages, pages, browser.reload));
  gulp.watch('src/assets/scss/**/*.scss').on('all', sass);
  gulp.watch('src/assets/js/**/*.js').on('all', gulp.series(javascript, browser.reload));
  gulp.watch('src/assets/code/**/*.js').on('all', gulp.series(javascript, browser.reload));
  gulp.watch('src/assets/img/**/*').on('all', gulp.series(images, browser.reload));
  gulp.watch('src/styleguide/**').on('all', gulp.series(styleGuide, browser.reload));
}

(d) Add a Panini conditional statement to the bottom of the default layout e.g. in layouts/default.html that will conditionally include additional Javascript file(s) for nominated pages as required.  For example in the following the map.js file will be included if the page is index.html or events.html:

.
.
.
<script src="{{root}}assets/js/app.js" type="text/javascript"></script>
{{#ifpage 'index' 'events'}}
	<script src="{{root}}assets/code/map.js" type="text/javascript"></script>
{{/ifpage}}
	</body>
</html>

Hope this helps.

Cheers, Snig

 

Seppe Clijsters 9 months ago

In the default.html I typed:

{{#ifpage 'overons'}}
      <script src="{{root}}assets/js/single_page/overons.js"></script>
{{/ifpage}}

In the overons.js file i write:

const ScrollReveal = require(`scrollreveal`);

window.sr = ScrollReveal({
  reset: true,
  viewFactor: 0.4,
  mobile: false,
  // easing: `linear`,
   easing: `cubic-bezier(0,.7,.1,1)`
});

But I keep getting an error "require is not defined".

Anyone knows how I can make it work?

 

 

Linda Thomas 9 months ago

hi,

It was really helpful. I always get stuck in the ending of the programming. I would keep this in mind. Thank you for your comment.