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
任务