I'm getting started with TypeScript by using it in my new Angular application and I just have a question in terms of where to put all these js and ts files. It seems the convention for the transpiler to dump the .js file in the same directory as the .ts file.
Is this the best practice? It feels like my folder structure is now polluted with .ts and .js files. Accept this or make another folder?
You can make this other ways.
with Grunt or Gulp npm plugins.
visual studio support this npm plugins.
my sample with gruntfile.js
Task Runner Explorer toolbar shown this methods and run with double click definations tasks. Vs run code on cmd at background. you seen in output window.
before use run cmd code on project directory
npm install
gruntfile.js
/// <binding BeforeBuild='default' Clean='default' />
/// <vs BeforeBuild='default' Clean='ts:default' />
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
banner: '/* \n * <%= pkg.title || pkg.name %> v<%= pkg.version %>\n' +
' * <%= pkg.homepage %>\n' +
' * Copyright (c) 2004 - <%= grunt.template.today("yyyy") %> <%= pkg.author %>\n' +
' * License: <%= pkg.license %>\n' +
' * created at <%= grunt.template.today("HH:mm:ss dd.mm.yyyy") %> \n */ \n',
//#region watch
watch: {
sass: {
files: 'assets/css/*.scss',
tasks: ['sass', 'cssmin']
}
},
//#endregion
//#region notify_hooks
notify_hooks: {
options: {
enable: true,
max_jshint_notifications: 5,
title: "Project notifications "
}
},
//#endregion
//#region typescript
ts: {
//https://www.npmjs.com/package/grunt-ts
default: {
src: ["**/*.ts", "!assets/typings/**/*.ts", "!**/*.d.ts", "!node_modules/**/*.ts"],
options: {
sourceMap: true
}
}
},
ts_publish: {
default: {
src: ["**/*.ts", "!assets/typings/**/*.ts", "!**/*.d.ts", "!node_modules/**/*.ts"],
options: {
sourceMap: false
}
}
},
//#endregion
//#region uglify
uglify: {
options: {
banner: '<%= banner %>',
report: 'gzip',
//manage: false,
compress: {
drop_console: true
}
},
assets_app: {
options: { sourceMap: true, banner: '<%= banner %>' /*,sourceMapName: 'path/to/sourcemap.map'*/ },
files: [{
expand: true,
cwd: 'assets/app', // bulundugu dizin
src: ['*.js', '!*.min.js'],
ext: '.js',
dest: 'assets/app/'
}]
//files: { 'assets/js/myScripts.js': ['assets/js/theme.js', 'assets/js/theme.init.js'] }
},
assets_account: {
options: { sourceMap: true },
files: [{
expand: true,
cwd: 'assets/app/account', // bulundugu dizin
src: ['**/*.js', '!**/*.min.js'],
ext: '.js',
dest: 'assets/app/account/'
}]
},
assets_cordova: {
options: { sourceMap: true },
files: [{
expand: true,
cwd: 'assets/app/cordova', // bulundugu dizin
src: ['**/*.js', '!**/*.min.js'],
ext: '.js',
dest: 'assets/app/cordova/'
}]
}
},
//#endregion
//#region cssmin
cssmin: {
options: {
banner: '<%= banner %>',
report: 'gzip'
},
my_target: {
files: [{
expand: true,
cwd: 'assets/css',
src: ['*.css', '!*.min.css'],
dest: 'assets/css',
ext: '.min.css'
}]
}
},
//#endregion
//#region less
less: {
development: {
options: {
paths: ["assets\master\less"]
},
files: [{
expand: true,
cwd: 'assets\master\less',
src: ['*.less'],
dest: 'assets\master\less',
ext: '.css'
}]
}
},
//#endregion
//#region sass
sass: {
dist: {
options: {
style: 'expanded'
},
files: { 'assets/css/myStyle.css': 'assets/css/*.scss' }
}
}
//#endregion
});
grunt.loadNpmTasks('grunt-notify');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks("grunt-ts");
//grunt.loadNpmTasks('grunt-contrib-watch');
//grunt.loadNpmTasks('grunt-contrib-sass');
//grunt.registerTask('default', ['cssmin', 'ts']);
grunt.registerTask('default', ['ts']);
grunt.registerTask('default_ts', ['ts', 'uglify'])
grunt.registerTask('before_publish', ['cssmin', 'ts_publish', 'uglify']);
grunt.task.run('notify_hooks');
}
my package.json
{
"name": "xxxx",
"version": "1.0.0",
"description": "xxxx",
"main": "xx",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"sfasdf"
],
"author": "Abdullah SARGIN [email protected]",
"license": "ISC",
"devDependencies": {
"grunt-contrib-cssmin": "^0.12.3",
"grunt-contrib-jshint": "^0.11.2",
"grunt-contrib-sass": "^0.9.2",
"grunt-contrib-uglify": "^0.9.1",
"grunt-contrib-watch": "^0.6.1",
"grunt-notify": "^0.4.1",
"grunt-ts": "^4.2.0-beta.1"
}
}
This is default setting for IDE such as Webstorm which has neat feature such as hiding .js (and also .map.js) files in a sub-tree of .ts file in project explorer. You can also adjust your build in such a way that you separate .ts sources and create build/ directory where you store compiled .js and .map.js. Its a matter of your personal preference and the tools you use.
