【问题标题】:Typescript, @types/gulp gulp 4, browser-sync打字稿,@types/gulp gulp 4,浏览器同步
【发布时间】:2020-03-10 09:02:36
【问题描述】:

需要帮助设置此 ts 项目。提前致谢。这里可能有类似的问题,但我还找不到 gulpfile.ts 解决方案。

//- 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;
//-- tscongif.json
{
  "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"
  }
}

当我吞下它时。

这是它显示的错误:

[17:17:03] 需要外部模块 ts-node/register

C:\vijay\projects\customDropdown\node_modules\ts-node\src\index.ts:293 返回新的 TSError(诊断文本,诊断代码) ^ TSError:⨯ 无法编译 TypeScript: gulpfile.ts:57:7 - 错误 TS2451:无法重新声明块范围变量“build”。

57 const build = gulp.series(gulp.parallel([styles, types], browserSync)); ~~~~~ gulpfile.ts:60:7 - 错误 TS2451:无法重新声明块范围变量“build”。

60 const build = gulp.series(gulp.parallel(styles, g_ts)) ~~~~~ gulpfile.ts:52:31 - 错误 TS2559:类型 '() => ReadWriteStream' 没有与类型 'WatchOptions' 相同的属性。

52 gulp.watch(paths.style.src,样式,重新加载) ~~~~~~ gulpfile.ts:53:33 - 错误 TS2559:类型 '(done: () => any) => ReadWriteStream' 没有与类型 'WatchOptions' 相同的属性。

53 gulp.watch(paths.scripts.src, types, reload) ~~~~~ gulpfile.ts:57:41 - 错误 TS2345:'((done: () => any) => ReadWriteStream)[]' 类型的参数不可分配给'Task' 类型的参数。 类型 '((done: () => any) => ReadWriteStream)[]' 不可分配给类型 '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)

大多数问题都已解决,或者现在只有一个问题。

错误 TS2345:“(() => ReadWriteStream)[]”类型的参数不可分配给“任务”类型的参数。类型 '(() => ReadWriteStream)[]' 不可分配给类型 'string'。

【问题讨论】:

  • 当我在寻找解决方案时,我发现了“github.com/TypeStrong/ts-node”链接,用于添加“ts-node/register”,它超出了我的想象。谢谢。

标签: typescript types gulp-4


【解决方案1】:

该错误与 typescript/gulp 完全无关。 你已经两次声明了你的函数build

【讨论】:

  • 我的错!...我更正了它||遇到问题:返回新的 TSError(diagnosticText,diagnosticCodes)TSError:⨯ 无法编译 TypeScript:gulpfile.ts:52:31 - 错误 TS2559:类型“()=> ReadWriteStream”与类型“WatchOptions”没有共同的属性。 ||我无法在此处跳过完整的错误。
  • 现在这是一个打字稿错误。您的 gulpfile 也是一个打字稿文件。要么转成js,要么检查编译错误
  • 是的 gulpfile 也是 .ts 文件,我希望它是这样。我认为它应该有效。
  • 也许会,没这么用过。这意味着首先,您需要将您的gulpfile编译为js,并且错误来了,因为stylestypes函数之一与要提供给gulp.series的类型不兼容。您可以尝试将它们投射到any 以检查这是否是问题
猜你喜欢
  • 2015-04-15
  • 2017-10-31
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-01-28
  • 2014-09-28
  • 2017-11-08
相关资源
最近更新 更多