Reducing the amount of included scripts

Hi How do I reduce the amount of scripts included in my index.html fle?

Currently it looks like this

    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="lib/ngCordova/dist/ng-cordova.js"></script>
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/lib/filters.js"></script>
    
    <script src="lib/angular-local-storage.js"></script>
    <script src="lib/angular-resource.min.js"></script>
    <script src="lib/angular-translate/angular-translate.min.js"></script>
    <script src="lib/angular-translate-loader-static-files/angular-translate-loader-static-files.min.js"></script>
    <script src="lib/bootstrapUi/ui-bootstrap-custom-0.12.0.min.js"></script>
    <script src="lib/bootstrapUi/ui-bootstrap-custom-tpls-0.12.0.min.js"></script>
    
    
    <script src="js/lib/constantsFactory.js"></script>
    
    <script src="js/public/device/deviceFactory.js"></script>
    <script src="js/public/security/securityCtrl.js"></script>
    
    <script src="lib/angular-timer/dist/angular-timer.js"></script>


    <script src="lib/qrcode.min.js"></script> 
  • More

Is there anyway to reduce those?

This blog post may be of interest to you

http://ionicframework.com/blog/minifying-your-source-code/

Amazing I just found out requireJS but it would require me to restructure all of my code :frowning:

Any reason why we aren’t using it from the get go?

@ysrael I don’t see the point of using RequireJS with Angular honestly. The main purpose of Require is to empower the developer to structure his apps into multiple modules, and Angular does that anyway. Take a look at this blog post.

As for including less scripts, I did it with Gulp - minify, concat and copy modules.

gulpfile.js

var gulp = require('gulp');
var gutil = require('gulp-util');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
var jshint = require('gulp-jshint');
var copy = require('gulp-copy');
var flatten = require('gulp-flatten');
var uglify = require('gulp-uglify');
var sh = require('shelljs');
var bower = require('bower');

var paths = {
  sass: ['./scss/**/*.scss'],
  js: ['./app/**/*.js'],
  html: ['./app/**/*.html']
};

...

gulp.task('scripts', function() {
  gulp.src(paths.js)
    .pipe(concat('all.min.js'))
    .pipe(uglify({mangle: false}))
    .pipe(gulp.dest('./www/js/'))
});

...

And HTML

<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>

<!-- ngCordova plugins -->
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
    
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

<!-- the application -->
<script src="js/all.min.js"></script>
2 Likes