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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学...
    依依玖玥阅读 3,185评论 7 55
  • gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学...
    井皮皮阅读 1,325评论 0 10
  • 1、gulp的安装 首先确保你已经正确安装了nodejs环境。然后以全局方式安装gulp: npm install...
    F_imok阅读 2,402评论 1 11
  • 前言 本文默认你已经安装好node环境,并且熟悉node命令,和window cd命令。 gulp简介 基于nod...
    9I阅读 1,993评论 4 50
  • gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学...
    build1024阅读 541评论 0 0