如何使用 typescript 在 gulp 中配置 jsonServer？答案

【问题标题】：How to configure jsonServer in gulp using typescript?如何使用 typescript 在 gulp 中配置 jsonServer？
【发布时间】：2016-09-12 00:48:25
【问题描述】：

我之前已经配置了 json 服务器，并使用以下代码启动它：我为此参考了下面的 git repo。

Starting angular2 project with gulp

gulp-live-server.js

var gulpCore = require('gulp');
var gulpParam = require('gulp-param');
var gulpExpressServer = require('gulp-express');
var gulp = gulpParam(gulpCore, process.argv);

//server will be running on port 3100 if not explicitly specified as below
gulp.task('server', function (port,env, package) {
console.log('IN LIVVEEEEEEEEE SERVERRRRR --->>'+' port passed:' + port+ ' command line args:' + process.argv+ ' package:' +package+' env:' +env );

var expressPort = isNaN(port + '') ? 3200 : port || 3200;
var jsonServerStarter = 'server/json-server-starter.js';

gulpExpressServer.run([jsonServerStarter], { env: { expressPort: expressPort } });

    gulp.watch(['db.json'], function (event) {
        console.log('abt to notify for db.json');
        //gulpExpressServer.notify(event);
    });

});
gulp.task('default', ['server']);

但现在我使用的是 angular2 应用程序，所以为了使用 json-server 我需要使用 gulpfile.ts 启动它，到目前为止我有这个：

import * as gulp from 'gulp';
import * as runSequence from 'run-sequence';

import { PROJECT_TASKS_DIR, SEED_TASKS_DIR } from './tools/config';
import { loadTasks } from './tools/utils';


loadTasks(SEED_TASKS_DIR);
loadTasks(PROJECT_TASKS_DIR);


// --------------
// Build dev.
gulp.task('build.dev', (done: any) =>
   runSequence(//'clean.dev',
//              'tslint',
//              'css-lint',
          'build.assets.dev',
          'build.html_css',
          'build.js.dev',
          'build.index.dev',
          done));

// --------------
// Build dev watch.
gulp.task('build.dev.watch', (done: any) =>
  runSequence('build.dev',
          'watch.dev',
          done));

// --------------
// Build prod.
gulp.task('build.prod', (done: any) =>
  runSequence('clean.prod',
          'tslint',
          'css-lint',
          'build.assets.prod',
          'build.html_css',
          'copy.js.prod',
          'build.js.prod',
          'build.bundles',
          'build.bundles.app',
          'build.index.prod',
          done));   

// --------------
// Serve dev
gulp.task('serve.dev', (done: any) =>
  runSequence('build.dev',
          'server.start',
          'watch.dev',
          done)); 


// --------------
// Serve prod
gulp.task('serve.prod', (done: any) =>
  runSequence('build.prod',
          'server.prod',
          done));

//---------------
//json server
//not sure how to configure json-server here.

但我不确定如何在 typescript 中配置 json-server。有输入吗？

【问题讨论】：

标签： angularjs typescript angular gulp

【解决方案1】：

当我搜索时，我终于找到了一种方法来做到这一点。使用此 angular2-seed 配置您的项目。

因此，您的 anuglar2 实时服务器获取 gulp，然后您可以通过将其添加到 gulpfile.js 来启动您的 json-server。所以 live-server 实例化 gulp 进一步触发 json-server。

它终于对我有用了。

【讨论】：