Search code examples
gulpmomentjsangular-moment

How to include moment.js i18n files in gulp build?


I'm building an AngularJS application using Gulp and I'm using angular-moment to internationalise elements where months and days are displayed as words (January, February, March, Monday, Tuesday, etc) but the language packs are not being included in the "vendor" js file.

What do I need to do to include the necessary files? this is the index.html from the project

<!-- build:js({.tmp,src}) scripts/vendor.js -->
<!-- bower:js -->
<!-- run `gulp inject` to automatically populate bower script dependencies -->
<!-- endbower -->
<script src="bower_components/moment/locale/es.js"></script>
<script src="bower_components/moment/locale/fr.js"></script>
<script src="bower_components/moment/locale/nl.js"></script>
<script src="bower_components/moment/locale/pt.js"></script>
<!-- endbuild -->

and the bower.json file

{
  "name": "fountain-inject",
  "version": "0.0.1",
  "dependencies": {
    "angular": "1.5.9",
    "moment": "2.17.1",
    "angular-moment": "^1.0.1"
  }
}

Note that I only need the languages listed, not the full 108 language packs!

I've created a repo to demonstrate this on github here: https://github.com/tetsujin1979/gulpMoment/

Clone, npm install, gulp build to create the project locally

gulp serve to see the time displayed in different languages correctly

gulp serve:dist to see the language packs are not included in the distritbution


Solution

  • Turns out the answer is ridiculously simple, the index.html file needs to include the path to the language packs as follows

    <script src="../bower_components/moment/locale/es.js"></script>
    <script src="../bower_components/moment/locale/fr.js"></script>
    <script src="../bower_components/moment/locale/nl.js"></script>
    <script src="../bower_components/moment/locale/pt.js"></script>