Need help setting up this ts-project. Thanks in advance. There might be similar questions here but I could not find gulpfile.ts solution yet.
//- package.json
{
"name": "cdd",
"version": "1.0.0",
"description": "",
"main": "index.html",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"gulp": "gulp"
},
"author": "vssadineni",
"license": "UNLICENSED",
"devDependencies": {
"@types/browser-sync": "^2.26.1",
"@types/gulp": "^4.0.6",
"@types/gulp-less": "0.0.31",
"@types/node": "^12.12.7",
"browser-sync": "^2.26.7",
"gulp": "^4.0.2",
"gulp-less": "^4.0.1",
"gulp-typescript": "^5.0.1",
"path": "^0.12.7",
"ts-node": "^8.5.0",
"typescript": "^3.7.2"
}
}
//
//***********
//***********
//- My Gulpfile.ts
import gulp from 'gulp';
import less from 'gulp-less';
import g_ts from 'gulp-typescript';
import path from 'path';
import bSync from 'browser-sync';
let reload = bSync.reload;
bSync.create();
const ts = g_ts.createProject('tsconfig.json');
const paths = {
style: {
src: 'less/**/style.less',
dest: 'dest/css'
},
scripts: {
src: 'ts/**/*.ts',
dest: 'dest/js'
}
}
//- less css
export function styles() {
return gulp.src(paths.style.src)
.pipe(less({
paths: [path.join(__dirname, 'less', 'includes')]
})).on('error', console.error.bind(console))
.pipe(gulp.dest(paths.style.dest))
}
//- Browser Sync
export function browserSync(done: () => any) {
bSync.init({
server: {
baseDir: './'
},
port: 4005
});
done();
}
//- TypeScripts Transpiling
export function types(done: () => any) {
return ts.src()
.pipe(ts())
.pipe(gulp.src(paths.scripts.dest));
done();
}
function Watch() {
gulp.watch(paths.style.src, styles, reload)
gulp.watch(paths.scripts.src, types, reload)
}
const sync = gulp.parallel(Watch, gulp.series(styles, types));
const build = gulp.series(gulp.parallel([styles, types], browserSync));
export {
Watch as watch
}
const build = gulp.series(gulp.parallel(styles, types))
export default build;{
"compilerOptions": {
"target": "ES2018",
"module": "commonjs",
"declaration": true,
"sourceMap": true,
"outDir": "./dest",
"strict": true,
"moduleResolution": "node",
"baseUrl": "./",
"typeRoots": [
"./node_modules/@types"
],
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"sourceRoot": "src",
"forceConsistentCasingInFileNames": true,
"declarationDir": "dest/js/d"
}
}
And when I gulp it.
this is the error it is showing:
[17:17:03] Requiring external module ts-node/register
C:\vijay\projects\customDropdown\node_modules\ts-node\src\index.ts:293 return new TSError(diagnosticText, diagnosticCodes) ^ TSError: ⨯ Unable to compile TypeScript: gulpfile.ts:57:7 - error TS2451: Cannot redeclare block-scoped variable 'build'.
57 const build = gulp.series(gulp.parallel([styles, types], browserSync)); ~~~~~ gulpfile.ts:60:7 - error TS2451: Cannot redeclare block-scoped variable 'build'.
60 const build = gulp.series(gulp.parallel(styles, g_ts)) ~~~~~ gulpfile.ts:52:31 - error TS2559: Type '() => ReadWriteStream' has no properties in common with type 'WatchOptions'.
52 gulp.watch(paths.style.src, styles, reload) ~~~~~~ gulpfile.ts:53:33 - error TS2559: Type '(done: () => any) => ReadWriteStream' has no properties in common with type 'WatchOptions'.
53 gulp.watch(paths.scripts.src, types, reload) ~~~~~ gulpfile.ts:57:41 - error TS2345: Argument of type '((done: () => any) => ReadWriteStream)[]' is not assignable to parameter of type 'Task'. Type '((done: () => any) => ReadWriteStream)[]' is not assignable to type 'string'.
57 const build = gulp.series(gulp.parallel([styles, types], browserSync)); ~~~~~~~~~~~~~~~
at createTSError (C:\vijay\projects\customDropdown\node_modules\ts-node\src\index.ts:293:12)
at reportTSError (C:\vijay\projects\customDropdown\node_modules\ts-node\src\index.ts:297:19)
at getOutput (C:\vijay\projects\customDropdown\node_modules\ts-node\src\index.ts:399:34)
at Object.compile (C:\vijay\projects\customDropdown\node_modules\ts-node\src\index.ts:457:32)
at Module.m._compile (C:\vijay\projects\customDropdown\node_modules\ts-node\src\index.ts:530:43)
at Module._extensions..js (internal/modules/cjs/loader.js:712:10)
at Object.require.extensions.(anonymous function) [as .ts] (C:\vijay\projects\customDropdown\node_modules\ts-node\src\index.ts:533:12)
at Module.load (internal/modules/cjs/loader.js:600:32)
at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
at Function.Module._load (internal/modules/cjs/loader.js:531:3)
most issues are resolved or it got only one now.
error TS2345: Argument of type '(() => ReadWriteStream)[]' is not assignable to parameter of type 'Task'. Type '(() => ReadWriteStream)[]' is not assignable to type 'string'.
