asp.net core, angular2: should wwwroot folder contains scss and typescript files?

Question

I can't understand where to place my ts and scss files? wwwroot folder is for static files, but ts and scss files are compiled. Should I hold similar folder structure in wwwroot and outside it and then copy css and js files to wwwroot?

For example:

Wouldn't it be too complicated? It seems it's very hard to maintain and navigate.

Answer 1

Should I hold similar folder structure in wwwroot and outside it and then copy css and js files to wwwroot? [sic]

Yes. That is a good idea.

Once you have a handle on that, do more complicated tasks like bundling and minification.

Your question has many, many possible answers. That said, your screenshots show a gulpfile.js and you can use gulp to do the following:

1. build your TypeScript and put the *.js output into wwwroot.
2. build your SCSS and put the *.css output into wwwroot.

Here are some resources to get you started.

• A gulp plugin for very fast TypeScript compilation
• Gulp plugin for sass

Here is an example gulpfile.js for you to modify based on your specific needs.

'use strict';

var gulp = require('gulp');
var tsb = require('gulp-tsb');
var sass = require('gulp-sass');

// create and keep compiler 
var compilation = tsb.create({
    target: 'es5'
});

gulp.task('tsc', function() {
    return gulp.src('./scripts/**/*.ts')
        .pipe(compilation()) // <- new compilation 
        .pipe(gulp.dest('./wwwroot/appScripts'));
});

gulp.task('sass', function () {
  return gulp.src('./sass/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./wwwroot/css'));
});

You will need to have some understanding of npm and gulp. Basically, from the command line you will run the following gulp tasks.

gulp tsc     // to build typescript
gulp sass    // to build sass

They will find your *.ts and *.scss files, build them, and save them into the specified destinations.