Мой текущий файл package.json целиком.
"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"
},
Я пытаюсь иметь 1 единственный скрипт watch, который будет запускать облегченный сервер, создавать файлы .ts .js и .css.
Прямо сейчас у меня есть systemJS и tsc, генерирующие файлы .js, когда я редактирую или создаю новые файлы машинописного текста.
Как только эти файлы javascript будут сгенерированы из tsc:w, они попадают в папку dist. После того, как они будут обновлены там, я хотел бы удалить их и объединить в 1 файл lifeleveler.app.js на основе main.js внутри dist.
Пока что я не могу правильно совместить свои задачи выше..
Каталог моей папки
Я также думаю, что мой подход неверен, у меня может быть 2 окна терминала. 1 смотрит TSX -> js, а другой за SASS-> CSS.
Затем, в конце, когда я буду готов запустить сборку, возможно, тогда моя задача build:js.
Однако мне нужно будет заменить блоки в моем файле index.html, как бы вы это сделали?
<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>
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
