Konfigurowanie aplikacji i używanie jej z LiveReload

Question

Próbuję użyć TypeScript w projekcie Yeoman/Grunt. Skompilować maszynopis używam chrząknięcie plugin o nazwie Grunt-TS, kompilacja plików .TS działa dobrze, ale na żywo reload nie działa: Kiedy biegnę grunt server I prawidłowo uzyskać to:

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

Ale wtedy zadanie liveReload nie zostało załadowane. Tak skonfigurowałem moją Gruntfile.js o chrząszczach.

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', 
     ... 
    ]); 

Możesz rzucić okiem na całą Gruntfile.js: https://github.com/mimo84/tsyong/blob/master/Gruntfile.js

Answer 1

Krótka odpowiedź: usunąć linię zegarek config https://github.com/mimo84/tsyong/blob/master/Gruntfile.js#L46 i dodać coś takiego https://github.com/mimo84/tsyong/blob/master/Gruntfile.js#L60 Ale dla TS. tj

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

Powód: To dlatego, że jeśli poprosisz Grunt-TS oglądać folderu Marks Grunt-ts się jako zadanie asynchronicznym. Oznacza to, że potem żadne inne zadania nie mogą być wykonywane później. Jej samo z grunt-contrib-watch myślę co jest dlaczego koniecznością mieć go jako ostatniego zadania:

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

W skrócie można mieć tylko jedno zadanie wykonać oglądania :) W twoim przypadku byłoby musicie być contri-watch.

Answer 2

używam bardzo szybki i prosty sposób, używając 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']); 
}; 

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

nie dokładnie odpowiedź, ale udaje się do punktu bazowego: szybki przepływ pracy .