Shazwazza / Smidge

A lightweight runtime CSS/JavaScript file minification, combination, compression & management library for ASP.Net Core
MIT License
364 stars 47 forks source link

Add a Typescript processor? #15

Open dazinator opened 8 years ago

dazinator commented 8 years ago

Does this sound like a good idea? If so perhaps I'll work on a PR?

For example in my project I have several typescript files, and a tsconfig.json file.

image

At the moment, I rely on a gulp task and various gulp plugins, which:

  1. Initialise a typescript project form a typescript config file (tsconfig)
  2. Compile the ts source files to js (honouring the tsconfig file settings), and produce source maps
  3. Concatenate and Uglify, outputting a single file to a known location.

Here is an example:


 var gulp = require("gulp"),  
    ts = require('gulp-typescript'),    
    sourcemaps = require('gulp-sourcemaps'),   
    concat = require("gulp-concat")

// creates a tsproject from the tsconfig file.
var tsProject = ts.createProject('./Scripts/tsconfig.json', { typescript: require('typescript'), sortOutput: true });

gulp.task('compile:typescript', function () {
    var tsResult = tsProject.src()
    .pipe(sourcemaps.init()) // intialises sourcemaps
    .pipe(ts(tsProject));

    tsResult.js    
   .pipe(sourcemaps.write('./', {
       sourceMappingURLPrefix: '/js/generated',
       includeContent: false,
       sourceRoot: '/Scripts'
   }))
   .pipe(gulp.dest('./'))  
    return tsResult.js    
       .pipe(concat('./wwwroot/js/generated/ts.min.js'))
       .pipe(uglify())     
       .pipe(gulp.dest("."));

});

Do you think it's a good idea to extend Smidge with such capabilities for typescript? If so, how would this be achieved with Smidge, what extensibility points would need to be implemented?

Shazwazza commented 8 years ago

Hi, yes this is possible. Here's some docs on how to extend the pre-processor pipeline: https://github.com/Shazwazza/Smidge#custom-pre-processing-pipeline

The biggest issue I see regarding doing intensive pre-processing at runtime is that it could be too much to process and you'd be better off doing this as part of your build process (i.e. your Gulp process). But if you are not doing too much pre-processing and having a TypeScript runtime pre-processor is just more convenient than it could/should certainly be done :)

There's various ways you can achieve this. I created a TypeScript pre-processor for ClientDependency here: https://github.com/Shazwazza/ClientDependency/blob/master/ClientDependency.TypeScript/TypeScriptWriter.cs#L15 . Of course ClientDependency's model is totally different from Smidge, some of the logic might be able to be borrowed. IMO since the TypeScript compiler is in JS, the 'easiest' route to getting that executing on the server side with ASP.Net Core would be to use the NodeServices: https://github.com/aspnet/NodeServices . I actually starting a POC using NodeServices with Smidge but didn't really get time to continue with it. You can see that here: https://github.com/Shazwazza/Smidge/commit/dae7a99d36f696cf1c454b00e708b4dfde5aaf52 . I was trying to see if i could use Grunt to output data to a stream but that doesn't really work since Grunt mostly just writes to files, however you could use this POC to plugin any sort of JS library (i.e. the TypeScript compiler) to output whatever you want. This same concept could be use for LESS, etc...