Loading external javascript files in ionic2

Ionic Framework ionic-v3
5

It could be harder than it should be, when using the wrong tool for the job. Basically you want to ensure that a few scripts are always included and executed in a specific order - why bother wrestling with the transpiler and a complex multistep process instead of just combining the scripts in the desired order and saving them to a single file. As a starting point I would suggest you the following (disclaimer: untested, but you should get the idea):

  • gulpfile.js
// ...
gulp.task('watch', ['clean'], function(done){
  runSequence(
-   ['sass', 'html', 'fonts', 'scripts'],
+   ['sass', 'html', 'fonts', 'scripts', 'extlibs'],
// ...
gulp.task('build', ['clean'], function(done){
  runSequence(
-   ['sass', 'html', 'fonts', 'scripts'],
+   ['sass', 'html', 'fonts', 'scripts', 'extlibs'],
// ...
+ var gulpConcat = require('gulp-concat');
 
+ gulp.task('extlibs', function() {
+   return gulp.src(['/path/to/jquery.js', '/path/to/gridster.js'])
+     .pipe(gulpConcat('external-libaries.js'))
+     .pipe(gulp.dest('www/build/js'));
+ });
  • index.html
<!-- ... -->
  <script src="build/js/external-libaries.js"></script>
<!-- ... -->
  • install the package:
npm install gulp-concat --save-dev
1 Like