sanu
sanu

Reputation: 570

Assembling the typescript with gulp-webpack

There is a test-project, its structure:

structure

it is files * .ts:

////// greeter.ts
import {ActionsCollection} from "./actionsCollection";
class Greeter extends ActionsCollection{

}
var greeter = new Greeter();
alert(greeter.greet("Hello, world!"));

////// actionsCollection.ts

export class ActionsCollection{

    public say (){

    }

    public greet(greeting :string) {
        return "<h1>"+greeting+"</h1>";
    }
}

///// newTS.ts

export class NewTS{
    public foo (){
        return "<h1>foo</h1>";
    }
}

It is gulpfile:

var gulp = require('gulp');
var debug = require('gulp-debug');
var webpack = require('gulp-webpack');
gulp.task('default', function() {
    return gulp.src('ts/greeter.ts')
        .pipe(webpack({
            output: {
                filename: 'main.js'
            },
            resolve: {
                extensions: ['', '.webpack.js', '.web.js', '.ts', '.js']
            },
            module: {
                loaders: [
                    { test: /\.ts$/, loader: 'ts-loader' }
                ]
            }
        }))
        .pipe(debug({title:'src'}))
        .pipe(gulp.dest('js/'));
});

gulp.task('watch', ['default'], function() {
    gulp.watch('ts/**/*.ts', ['default']);
});

All this it is compiled into a single file main.js, but compilation works in a strange way. For example when I changed actionsCollection.ts file, compilation is not always triggered. And if I create a new new.ts file, and if was not import it within greeter.ts or actionsCollection.ts, then he will not fall into the common file - main.js. It's bad, because such files are exist and their methods may be invoked implicitly.

How to do the right thing? You can help me edit my gulpfile?

Upvotes: 6

Views: 1201

Answers (0)

Related Questions