Menu
My current entire package.json file.
"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'm trying to have 1 single watch script that will run the lite server, build the .ts .js and .css files.
Right now I have systemJS and tsc generating .js files when I edit or make any new typescript files.
Once those javascript files are generated from the tsc:w, they end up in the dist folder. Once they are updated there I would like to uglify and concat them into 1 lifeleveler.app.js file based off the main.js inside of dist.
So far I can't combine my tasks above correctly..
My folder directory
I'm also thinking my approach is wrong, I can have 2 terminal windows. 1 watching TSX -> js, and the other for SASS->CSS.
Then at the end, when I'm ready to push a build, perhaps then my build:js task.
However I would need to replace blocks in my index.html file, how would you do that?
<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 dependecies -->
<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>
"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
571
You can modify your tsconfig.json :
{
"compilerOptions": {
"target": "ES5",
"rootDir": "app/",
"outFile": "./dist/main.js"
}
}
First use tsc:w to compile into a single file, and build:js to minify to dist/lifeleveler.app.js
Edit : Please note outFile can not use along with "module": "commonjs", see this question
152
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
