Configurare grunt-ts e farlo funzionare con LiveReload

Question

Sto provando a usare TypeScript all'interno di un progetto Yeoman/Grunt. Per compilare dattiloscritto Io uso un grugnito plugin chiamato grunt-TS, la compilazione dei file .ts funziona bene, ma la ricarica dal vivo non fa opere: Quando eseguo grunt server ho correttamente ottenere questo:

Running "ts:dev" (ts) task 
Compiling. 
Success: 3.37s for 2 typescript files 
Watching all Typescript files under : /home/mimo/webroot/tsyong/app/scripts 

Ma poi l'attività liveReload non viene caricata. Ecco come ho configurato il mio Gruntfile.js su grunt-ts.

grunt.initConfig({ 
    ... 
    ts: { 
     options: {     // use to override the default options, http://gruntjs.com/configuring-tasks#options 
     target: 'es3',   // es3 (default)/or es5 
     module: 'commonjs',  // amd , commonjs (default) 
     sourcemap: true,   // true (default) | false 
     declaration: false,  // true | false (default) 
     nolib: false,    // true | false (default) 
     comments: false   // true | false (default) 
     }, 
     dev: {       // a particular target 
     src: ['<%= yeoman.app %>/scripts/{,*/}*.ts'], // The source typescript files, http://gruntjs.com/configuring-tasks#files 
     reference: '<%= yeoman.app %>/scripts/reference.ts', // If specified, generate this file that you can use for your reference management 
     out: '<%= yeoman.app %>/scripts/out.js',   // If specified, generate an out.js file which is the merged js file  
     watch: '<%= yeoman.app %>/scripts/',    // If specified, configures this target to watch the specified director for ts changes and reruns itself. 
     options: {     // override the main options, http://gruntjs.com/configuring-tasks#options 
      sourcemap: true, 
      declaration: true 
     }, 
     }, 
     build: {      // another target 
     src: ['<%= yeoman.app %>/scripts/*.ts'], 
     options: {     // overide the main options for this target 
      sourcemap: false, 
     } 
     }, 
    }, 
... 

... 
grunt.task.run([ 
     ... 
     'ts', 
     ... 
    ]); 

... 

    grunt.registerTask('build', [ 
     ... 
    'ts', 
     ... 
    ]); 

Si può avere uno sguardo ai Gruntfile.js pieno: https://github.com/mimo84/tsyong/blob/master/Gruntfile.js

Answer 1

Risposta breve: rimuovere la linea di orologi config https://github.com/mimo84/tsyong/blob/master/Gruntfile.js#L46 e aggiungere qualcosa di simile https://github.com/mimo84/tsyong/blob/master/Gruntfile.js#L60 Ma per ts. vale a dire

ts: { 
    files: ['<%= yeoman.app %>/scripts/{,*/}*.ts'], 
    tasks: ['ts:dev'] 
    }, 

Motivo: Ecco perché quando si chiede grunt-ts per guardare una cartella, i marchi di grunt-ts se stesso come un compito asincrona. Ciò significa che in seguito non è possibile eseguire altre attività. Il suo lo stesso con grugnito-contrib-watch penso che è il motivo per cui si must averlo come l'ultimo compito:

grunt.task.run([ 
    'clean:server', 
    'concurrent:server', 
    'ts', 
    'connect:livereload', 
    'open', 
    'watch' // last task 
]); 

In breve si può avere solo un compito fare il vostro guardare :) Nel tuo caso sarebbe deve essere grunt-contrib-watch.

Answer 2

Io uso un modo molto semplice e veloce, utilizzando browserify & typescriptifier (< 2s reload):

module.exports = function (grunt) { 

    grunt.initConfig({ 
    clean: { 
     dev: ['dest/**/*.*'] 
    }, 

    browserify: { 
     dev: { 
     src: ['src/root.ts'], 
     dest: 'dest/App.js', 
     options: { 
      external: ['angular'], 
      transform: ['typescriptifier'], 
      debug: true, 
      bundleOptions: { debug: true }, 
      browserifyOptions: { debug: true } 
     } 
     } 
    }, 
    express: { 
     dev: { 
     options: { 
      bases: ['src'], 
      port: 5000, 
      hostname: '0.0.0.0', 
      livereload: false 
     } 
     } 
    }, 
    watch: { 
     ts: { 
     files: ['src/**/*.ts', '!src/**/*.d.ts'], 
     tasks: ['dest'], 
     options: { 
      livereload: true, 
      debug: false, 
      debounceDelay: 100 
     } 
     }, 
     html: { 
     files: ['src/**/*.css', 'src/**/*.html'], 
     options: { 
      livereload: true, 
      debug: false, 
      debounceDelay: 100, 
      spawn: false 
     } 
     } 
    } 
    }); 

    grunt.loadNpmTasks('grunt-express'); 
    grunt.loadNpmTasks('grunt-contrib-watch'); 
    grunt.loadNpmTasks('grunt-browserify'); 
    grunt.loadNpmTasks('grunt-contrib-clean'); 

    grunt.registerTask('dev', ['rebuild', 'express:dev', 'watch' ]); 
    grunt.registerTask('build', ['browserify:dev']); 
    grunt.registerTask('rebuild', ['clean:dev', 'build']); 
}; 

Vedi https://www.npmjs.org/package/typescriptifier

Non è esattamente la risposta, ma va al punto di fondo: flusso di lavoro rapido .