browser- sync not working +++

[ghost]

Hey dude! Can't load any tests. Totaly broken, he? Can you fix this? Awsome project! Reload doesn't work either, seems like it only reload if multiple jasmine windows are open at once. Then it reload!!

Any plans to integrate istanbul? Would be awsome, dude!

Love yeah!

[ghost]

http://localhost:3000/dist/greeter/greeter.spec.js Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:3000/dist/greeter/greeter.js Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:3000/dist/greeter/greeter.spec.js Failed to load resource: the server responded with a status of 404 (Not Found)

[tonysneed]

Does the dist directory contain output? I'm thinking that perhaps a dependent task may have failed.

I did make an attempt to add code coverage with istanbul, but I wasn't successful. I would love to get a pull request for that. :)

[ghost]

Yeah! There ain't no dist directory. Nothing is build. And can't find the files! I have some experience, and noticed you hardcoded the transpiled files in the .html file !! I would say bad :) Sourcemap bro! Wrap it into a sourcemap, and load that sourcemap. You think that would help?

If you got a sourcemap bro, you can use that in karma too ! And remap-istanbul. There is a guide on the remap-istanbul page on how to do that.

But would be nice to get your awsome script working!! But just now nothing get build and nothing get visible in the browser bro :(

For Istanbul, this dude here have some nice stuff https://github.com/mwootendev/generator-node-ts/blob/master/generators/app/templates/gulpfile.js.tpl

And bro! Look into this one connect-history-api-fallback. Should prevent 404 errors with browser/sync.

 browserSync.init({

server: {
      baseDir: ....,
      middleware: [
        historyFallback({'index': '/index.html'})
      ]
    }
});

[ghost]

@tonysneed Bro! I was wondering why you are using exec? And found your blogpost. What is the issues you faced?

This is my code to transpile from TypeScript down to ES6. NOTE! You NEED TO install gulp-typescript first, then typescript@next.

const gulp = require("gulp");
const ts = require("gulp-typescript");
const tslint = require("gulp-tslint");
const merge = require("merge2");
const tsConfig = require("./tsconfig.json");

gulp.task('transpileDownToES6', function() {

 const result = gulp.src(["src/**/*.ts"])
    .pipe(tslint())
    .pipe(tslint.report("verbose", {
      emitError: false,
    }))
    .pipe(ts(Object.assign(tsConfig.compilerOptions, {
      typescript: require("typescript"),
      target: "es6",
      declaration: true,
    })));

return merge([
    result.dts.pipe(gulp.dest("dist/typings")),
    result.js.pipe(gulp.dest("build/es6")),
  ]);
});

When you got it down to ES6 in the build folder, you can use some cool stuff bro to get it down to ES5. Webpack, Rollup, Browserify etc.

[tonysneed]

The scripts are being injected into the html file ..

[tonysneed]

The problem I found with gulp-typescript was that the relative paths the source maps were incorrect. I spent a lot of time and tried many options but was unsuccessful with the ES5 target and gulp-typescript.

[ghost]

I got no more time now, but I can't see any issues?

I extended my code above to this bro!

const gulp = require("gulp");
const ts = require("gulp-typescript");
const tslint = require("gulp-tslint");
const merge = require("merge2");
const inject = require('gulp-inject');
const tsConfig = require("./tsconfig.json");

gulp.task('transpileDownToES6', function() {

 const result = gulp.src(["src/**/*.ts"])
    .pipe(tslint())
    .pipe(tslint.report("verbose", {
      emitError: false,
    }))
    .pipe(ts(Object.assign(tsConfig.compilerOptions, {
      typescript: require("typescript"),
      target: "es6",
      declaration: true,
    })));

return merge([
    result.dts.pipe(gulp.dest("dist/typings")),
    result.js.pipe(gulp.dest("build/es6")),
  ]);
});

gulp.task('inject', function () {
  const target = gulp.src('test.html');
  const sources = gulp.src(['./build/**/*.js'], {read: false});
  return target.pipe(inject(sources))
    .pipe(gulp.dest('./'));
});

I also use a simple HTML file in the root folder.

I guess bro that you can do this different, and after transpilled from ES6 to es5 with some cool stuff, you can inject files from dist folder.

I know Rollup have some cool stuff. Didn't try! But say you transpile everything into ES6, use Rollup and generate sourcemap from there. You can set it to inline it seems.

So in the build folder you have the whole source tree transpiled down to ES6. Grab it from there, create a nice ES5 output and a bundle for testing. Just my thoughts!

And TS 2.0 supports sourceMap itself bro, so if you look at my code above. I'm using native TS in the plugin,

I transpiled down to ES6 with TS only because you can use Webpack 2.0 or Rollup for Tree-shaking when you transpile down to ES5.

New TypeScript 2.0 stuff :)

https://github.com/Microsoft/TypeScript/issues/6319

[ghost]

Hey bro! I modified my code example a little and added in sourceMap. Seems to work just fine when I do it like this??

 const TSProject = ts.createProject('tsconfig.json', {
      typescript: require("typescript"),
      removeComments: true,
      target: "es6",
      inlineSourceMap: true,
      declaration: true
    });

 const result = gulp.src(["src/**/*.ts"])
    .pipe(tslint())
    .pipe(tslint.report("verbose", {
      //emitError: false
    }))
    .pipe(sourcemaps.init({ loadMaps: true }))
    .pipe(ts(TSProject));

return merge([
    result.dts.pipe(gulp.dest("dist/typings")),
    result.js.pipe(sourcemaps.write('.', { includeContent: false, sourceRoot: 'build/sourcemap' })).pipe(gulp.dest("build/es6")),
  ]);
});

[tonysneed]

Are you able to set breakpoints and debug?

[ghost]

Sorry bro! I haven't checked. Been in and out of hospital today after I felt down the stairs at home and broke both my legs. :/ Will check later bro! Love yeah!