The sequence of output in TypeScript when using Gulp is similar to running tsc with a tsconfig

After setting up a tsconfig file and successfully running the command-line tsc, I encountered an issue when using gulp-typescript with a tsconfig.json and outFile specified. The output ordering was different, and I have been unable to find a solution in Gulp to generate the same JavaScript as tsc.

Our build process relies heavily on gulp; however, tsc is considered the industry standard due to its watch feature and widespread tooling support. It would be ideal if we could align our gulp-based build process with tsc for consistency.

Here is an example of the tsconfig.json file:

{
  "compilerOptions": {
    "declaration": false,
    "preserveConstEnums": true,
    "outFile": "out/out.js",
    "sourceMap": true,
    "target": "es5",
    "noEmitOnError": true
  },
  "exclude": [
    "node_modules",
    "out"
  ]
}

And here is an example of the gulpfile.js:

"use strict";
var gulp = require('gulp');
var typescript = require('gulp-typescript');

var tsProject = typescript.createProject('tsconfig.json');

gulp.task('typescript:compile', function () {
    var tsResult = tsProject.src()
        .pipe(typescript(tsProject));

    return tsResult.js.pipe(gulp.dest('assemblage'));
});
gulp.task('default', ['typescript:compile']);

The discrepancy between tsc and gulp-typescript output ordering impacts a non-trivial directory of TypeScript files. Developers should be able to switch between the two build processes seamlessly without encountering any output ordering issues.

Unfortunately, I don't comprehend the distinction in output ordering rules applied by tsc and gulp-typescript, making it challenging to recreate the problem. Ideally, gulp-typescript using a tsconfig project should follow the same order as tsc.

I have contemplated utilizing "child-process".exec to invoke tsc, but I prefer the superior integration of gulp-typescript with Gulp. Additionally, I am open to exploring other gulp plugins that directly call the TypeScript compiler using the tsconfig.json project file, although I haven't discovered one yet.

Answer №1

My issue lies in my search for a gulp method that produces the same JavaScript output as tsc.

TypeScript internally orders files by:

  • The order of files passed in the command line (irrelevant when using tsconfig)
  • The order in which files are detected, starting with the first file in the tsconfig and then organizing others based on references and imports.

Please note: This functionality is not accessible to API consumers like gulp and can cause problems even with just tsc. See here for more information: https://github.com/TypeStrong/atom-typescript/blob/master/docs/out.md

Instead, consider using external modules: https://basarat.gitbooks.io/typescript/content/docs/project/modules.html

For a quickstart guide, check out: https://basarat.gitbooks.io/typescript/content/docs/quick/browser.html

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Mastering the incorporation of Context in React with Typescript

I am currently in the process of setting up a context provider for my Next.js application using TypeScript. Although I have previously set up a context provider in React using plain JavaScript, this time I am delving into learning TypeScript. In the code ...

What is the best way to hide the button when a user is viewing their own profile in an Angular application?

Each user has their own profile on the platform. A unique feature allows users to send messages by clicking a button when viewing other profiles. However, an issue arises where this messaging button also appears on a user's own profile. Is there a way ...

The type 'contextPaneTitleText' argument cannot be assigned to the parameter type 'key of RemoteConfig'

I am encountering an issue when using the following code snippet: const contextPaneTitleText = useFeature("contextPaneTitleText").asString(); This code is resulting in an error message: Argument of type '"contextPaneTitleText" ...

Encountering difficulties when attempting to upload a file to Google Cloud Platform using Multer in a Node.js

I am currently experimenting with uploading a single file using Multer and the "multipart/form-data" content type to a Google Cloud Storage bucket. For this task, I am utilizing "Multer.memoryStorage()" and "@google-cloud/storage" try { const docume ...

Can TypeORM create an entity for a many-to-many relationship that functions like ActiveRecord's join table concept?

Consider a scenario where there is a Guardian entity connected to a Student entity. The goal is to establish their many-to-many relationship in TypeORM by introducing a new entity called StudentGuardianRelationship. This intermediary entity serves the purp ...

Angular8 with the [tinymce] library for customizing editor elements and configuring multiline options

I am currently working with Angular 8 and in the template, we have the following code snippet: <editor required class="research-modal__control__input research-modal__control__input__description" formCo ...

Angular and Ionic collaborate by using ngFor to pass on the item.id during a (click) event

I have a list of items and I want to dynamically change the height of a card when I click on a button that is located on the card. Can anyone guide me on how to achieve this? I attempted to pass the item.id through a click event and use the id in a functi ...

Properly configuring paths in react-native for smooth navigation

When working on my React-Native project, I noticed that my import paths look something like this: import { ScreenContainer, SLButton, SLTextInput, } from '../../../../../components'; import { KeyBoardTypes } from '../../../../../enums ...

Passing parameters to an Angular 2 component

When it comes to passing a string parameter to my component, I need the flexibility to adjust the parameters of services based on the passed value. Here's how I handle it: In my index.html, I simply call my component and pass the required parameter. ...

When the route is changed, the system must execute a function to verify the authenticity of the token

When routing changes in Angular, I have a requirement to execute a function based on whether a valid token is set or not. Is there anyone who can assist me in achieving this task? In Angular 1, I used to accomplish this using $on. ...

Is it possible to implement a feature in Angular and Bootstrap where the toggle menu can be closed by clicking anywhere on the page, rather than just the toggle button

I'm working on an Angular project where I've implemented a navbar component. The navbar is responsive and includes a toggle button that appears when the browser window is resized. This button allows users to hide or display the menus. One issue ...

Angular 10 and Typescript: Variables assigned within the change event become undefined

In my code, I initialize an Algolia input and set an onchange event to it. This initialization takes place in a service. algolia_data; random_var; this.http.post<any>('APIENDPOINT', formData).subscribe(data => { instance = places({ ...

Creating a component in Angular that utilizes multiple nested FormGroups

When attempting to nest multiple FormGroups, everything works smoothly if the template is not extracted into separate components. For instance, the following example functions as expected: Template <form [formGroup]="baseForm"> <div formGr ...

What is the method for obtaining a literal type through a function parameter to use as a computed property name?

Can you help me with this code snippet? const fn = (name: string) => { return { [name]: "some txt" }; }; const res = fn("books"); // books or any other string The type of res recognized by TS is: const res: { [x: string]: string ...

Testing a function in Angular using Karma and Jasmine

I am facing an issue while testing a method in Angular using Jasmine/Karma. The error message I keep encountering is: TypeError: undefined is not iterable (cannot read property Symbol (Symbol.iterator)) This is how I created the method: myMethod(l ...

The type 'Argument of (props: ITableProps) => JSX.Element' cannot be assigned to the parameter type of... - React High Order Component

One of the tools I have in my arsenal is a loader HOC This is how the HOC looks like: const withLoader = <P extends object>(WrappedComponent: new () => React.Component<P, any>, loading: boolean) => { return class WithLoading extends ...

Tips for utilizing jest.mock following the removal of @types/jest (^jest@24)

After upgrading from version 7 to version 8 of @angular-builders/jest, I followed the instructions provided in the migration guide which advised removing @types/jest since it now comes bundled with Jest v24. Additionally, changes were made to my tsconfig a ...

Issue: An error occurred while trying to parse JSON data in TypeScript due to an undefined 'description' property

Encountering an error message when attempting to retrieve the description attribute from the following Sample Json. Error: TypeError: Cannot read property 'description' of undefined when trying to access json data in typescript import {Age ...

Utilize external functions in evaluated code

After working with a TypeScript file containing the following code: import { functionTest } from './function_test' function runnerFunctionTest() { console.log("Test"); } export class Runner { run(source : string) { eva ...

Issue with Angular modal not opening as expected when triggered programmatically

I am working with the ng-bootstrap modal component import { NgbModal, ModalCloseReasons } from "@ng-bootstrap/ng-bootstrap"; When I click on a button, the modal opens as expected <button class="btn labelbtn accountbtn customnavbtn" ...