使用一饮而尽为打字稿编译 [英] Use gulp for typescript compilation
问题描述
继角2快速入门指南，伙计们有使用打字稿编译器和 tsconfig.json 文件，用它来工作。我一直在寻找最高的方式来使用一饮而尽这确实似乎有办法做到这一点，但我有点困惑，以纠正角2的实现。
Following angular 2 quick start guide, guys there use typescript compiler and tsconfig.json file, to work with it. I was looking up ways to use gulp for this and indeed there seem to be ways to achieve this, however I'm a bit confused to correct implementation with angular 2.
tsconfig.json 文件也是在这里打球，虽然我不掌握这是为什么。
essentially gulp-typescript and gulp-tslint seem to be two plugins to achieve this and somehow tsconfig.json file is also in play here, although I don't grasp why.
任何人都可以实施，将实现上面的例子提供？我相信所有的开发.TS文件应的src 文件夹中，JavaScript需要被泵到建立文件夹中。 （现在假设两个文件夹从角2快速启动设置）
Could anyone provide example for implementation that will achieve above? I believe all development .ts files should be within src folder and javascript needs to be pumped over to build folder. (assume for now that both folders have setup from angular 2 quick start)
推荐答案
我设置一饮而尽从 gulpfile.js / 工作文件夹 。在这个文件夹是 index.js ， config.js 和任务/ 文件夹，并在任务/ typescript.js 是任务编译打字稿（任务文件夹有其他15个任务）。因此，而不是一个庞大的 gulpfile.js 我有管理的块，每做一件事...
I've setup gulp to work from gulpfile.js/ folder. In this folder are index.js, config.js and tasks/ folder, and in tasks/typescript.js is task that compiles TypeScript (tasks folder has 15 other tasks). So instead of one huge gulpfile.js I have manageable chunks that each do just one thing...
var gulp = require('gulp');
var config = require('./config.js');
var plugins = require('gulp-load-plugins')();
plugins.brsync = require('browser-sync').create();
plugins.builder = require('systemjs-builder');
function run(name) {
return require('./tasks/' + name)(gulp, plugins, config);
}
// ...other tasks, in alphabetical order! (:
gulp.task('typescript', run('typescript'));
gulpfile.js / config.js
var distDir = 'dist';
var staticDir = isGAE() ? '/static' : '';
module.exports = {
SRC: {
TYPESCRIPT: 'src/scripts/**/*.ts',
},
DST: {
MAPS: './maps',
SCRIPTS: distDir + staticDir + '/scripts',
},
};
gulpfile.js /任务/ typescript.js
module.exports = function (gulp, plugins, CONFIG) {
return function typescript() {
var tsProject = plugins.typescript.createProject('tsconfig.json');
var tsReporter = plugins.typescript.reporter.fullReporter();
var stream = gulp
.src(CONFIG.SRC.TYPESCRIPT, { since: gulp.lastRun('typescript') })
.pipe(plugins.sourcemaps.init())
.pipe(plugins.typescript(tsProject, undefined, tsReporter))
.pipe(plugins.sourcemaps.write(CONFIG.DST.MAPS,
{sourceMappingURLPrefix: '/scripts'}))
.pipe(gulp.dest(CONFIG.DST.SCRIPTS))
.on('error', plugins.util.log);
return stream;
};
};
gulpfile.js /任务/ watch.js
module.exports = function (gulp, plugins, CONFIG) {
return function watch() {
plugins.brsync.init(CONFIG.BRSYNC);
gulp.watch(CONFIG.SRC.TEST, () => queue_tasks(['karma']));
gulp.watch(CONFIG.SRC.TYPESCRIPT, () => queue_tasks(['typescript'], brsync_reload));
};
};
我有一个<一个href=\"http://stackoverflow.com/questions/32562563/gulp-watch-running-same-task-multiple-times-when-saving-many-files\">issue与一饮而尽看：如果你看文件，在工作一个以上的文件，并保存它们都将运行一个任务多次，它可以是恼人。检查链接落实 queue_tasks（）函数...
I had an issue with gulp watch: if you're watching files, work on more then one file and save them all it will run a task multiple times, which can be annoying. Check the link for implementation of queue_tasks() function...
另外请注意，我用咕嘟咕嘟4：
Also note that I'm using Gulp 4:
gulp.src(CONFIG.SRC.TYPESCRIPT, { since: gulp.lastRun('typescript') })
我在添加SRC（）选项，因为来缓存文件，并通过唯一更改的文件下来管。 <罢>我只有2天前实现这一点，并没有与打字稿文件来测试它（工作在其他地方），因此，如果有问题，只是将其删除...
I've added in src() option since to cache files, and pass only changed files down the pipe. I implemented this just 2 days ago and didn't test it with typescript files (works in other places), so if there are issues just remove it...
这篇关于使用一饮而尽为打字稿编译的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
