0

I would like to use a bootstrap-template with js-files for my new angularjs project. New modules will be written in typescript.

So my idea was to transcipt all ts files into /build/js/ Then i would concat all js files from /app/**/*.js and from /build/**/*.js into app.js.

My project folder structure looks like this.

app
|-js-files
|-ts-files
build
 |js folder with .js.map.files
|-app.js
|-app.js.map
|-vendor.js

On every step sourcemap files will be created. There are my gulp tasks:

gulp.task('typescript', function () {
  var tsResult = tsProject.src()
    .pipe(sourcemaps.init())  // sourcemaps will be generated
    .pipe(tsProject());

  return tsResult.js
    .pipe(sourcemaps.write('.')) // Now the sourcemaps are added to the .js file
    .pipe(gulp.dest('./build/js'));
});

gulp.task('bundle', function () {
  return es.merge(gulp.src(source.js.src), getTemplateStream())
    .pipe(sourcemaps.init()) // sourcemaps will be generated
    .pipe(concat('app.js'))
    .pipe(sourcemaps.write('.')) // Now the sourcemaps are added to the .js file
    .pipe(gulp.dest(destinations.js));
});
  1. Is this the right way to set up a project like this?
  2. Source mapping doesn't work...?
  3. Should the folder /build/js be deleted after the bundling into app.js?
Juri
  • 1,531
  • 2
  • 20
  • 43
  • i found the point, why sourcemapping wasn't working after bundling adding loadMaps: true on the bundling process fixed this issue `.pipe(sourcemaps.init({ loadMaps: true }))` – Juri Oct 26 '16 at 10:58

1 Answers1

0

Is this the right way to set up a project like this

Personally no. Have all the files .js and .ts in the same folder ./src. Set allowJs:true and outDir:'./dist'. Then slowly start the .js -> .ts migration as needed.

More

As an example checkout this quick video : https://www.youtube.com/watch?v=gmKXXI_ck7w

basarat
  • 261,912
  • 58
  • 460
  • 511