技术收藏我爱编程

Gulp.js 自动构建工具(TypeScript)

2016-08-21  本文已影响213人  lyzaijs

Gulp.js是前端node.js项目构建工具。例如,可以通过配置,监视整个项目文件修改,从而进行自动编译。

场景:
使用TypeScript进行项目开发,需要使用tsc命令将相应的*.td文件转换成*.js(tsc的配置文件为tsconfig.json)。webstorm工具自身具有此功能(配置它的File Wathchers)。而在VSCode中则可以通过Gulp.js实现。

应用:

//1.全局安装
npm install -g gulp
//2.作为项目开发依赖
npm install gulp --save-dev
//3.在项目根目录下创建一个名为 gulpfile.js 的文件

var gulp = require('gulp');

gulp.task('default', function() {
  // 将你的默认的任务代码放在这
});

gulpfile.js

var gulp = require('gulp');
var ts = require('gulp-typescript');

var tsProject = ts.createProject('tsconfig.json');
//1.根据tsconfig.json 配置将ts文件转换成js文件任务
gulp.task('build', function() {
    var tsResult = tsProject.src().pipe(ts(tsProject));
    return tsResult.js.pipe(gulp.dest('built'));
});
//2.监视src目录下的ts与tsx文件,如果修改则调用build任务
gulp.task('watch', ['build'], function() {
  gulp.watch('src/**/*.ts', ['build']);
  gulp.watch('src/**/*.tsx', ['build']);
});
//3.默认任务
gulp.task('default', ['build']);

在VSCode中command + p输入 task ,则会出现default ,watch,build三个任务,选择运行watch任务

相关:
在 VS 2015 中使用 Gulp 编译 TypeScript

上一篇 下一篇

猜你喜欢

热点阅读