Check out my complete package.json file here.
"scripts": {
"build": "webpack",
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\"",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings",
"build:css": "node-sass --output-style compressed --include-path scss scss/lifeleveler.scss app/assets/css/app.css",
"build:css-expand": "node-sass --include-path scss scss/lifeleveler.scss app/assets/css/app.css",
"watch:css": "nodemon -e scss -x \"npm run build:css\"",
"watch:css:expand": "nodemon -e scss -x \"npm run build:css-expand\"",
"build:js": "browserify dist/main.js > dist/lifeleveler.app.js",
"watch": "npm run watch:css & npm run watch:js",
"watch:js": "onchange '/dist/**/*.js' -p -- npm run build:js"
},
I am attempting to streamline the process with a single watch script that will handle running the lite server and building the .ts, .js, and .css files simultaneously.
Currently, systemJS and tsc are used to generate .js files when editing or creating new TypeScript files. These generated JavaScript files end up in the dist folder. I aim to further compress and concatenate these files into one lifeleveler.app.js based on main.js within the dist directory once they are updated there.
Unfortunately, I am facing challenges consolidating these tasks effectively...
Also, considering whether my existing approach is flawed, where I could potentially have two separate terminal windows - one monitoring TSX -> js conversion, and the other handling SASS->CSS compilation.
When ready to deploy, would employing the build:js task be most efficient? Nevertheless, replacing sections in the index.html file poses a question mark - what's the best way to achieve this?
<html>
<head>
<meta charset="UTF-8">
<title>LifeLeveler</title>
<meta name="description" content="Level up in the journey of life.">
<link rel="stylesheet" href="app/assets/css/app.css">
<!-- load the dependencies -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<!-- load our angular app with systemjs -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err) { console.log(err); });
</script>
<!-- <script src="dist/lifeleveler.app.js"></script> -->
</head>
<body class="container">
<my-app></my-app>
</body>
</html>
tsconfig
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"rootDir": "app/",
"outFile": "./dist/main.js",
"outDir": "dist"
},
"sourceMap": true