目标:编写TypeScript时,保存即生成js文件。
 
使用npm安装以下组件
  • gulp
  • gulp-rename
  • through-gulp
  • gulp-typescript
 
编写gulpfiles.js
 
var gulp = require("gulp");
var rename = require("gulp-rename");
var through = require("through-gulp");
var ts = require("gulp-typescript");
var gutil = require("gulp-util");
var fs = require("fs");
var path = require("path");
 
var taskFun = function (cb, filename)
{
    gulp.src(filename ? filename : ["**/*.ts", "!**/node_modules/**"])
        .pipe(through(function (file, encoding, callback)
        {
            gutil.log("[ts2js] " + file.path);
            this.push(file);
            callback();
        }))
        .pipe(ts())
        .pipe(rename(function (path)
        {
            path.ext = ".js";
        }))
        .pipe(gulp.dest(filename ? path.dirname(filename) : "."));
};
 
gulp.task("default", taskFun);
 
gulp.watch(["**/*.ts", "!**/node_modules/**"], function (e)
{
    if (fs.existsSync(e.path))
    {
        var stat = fs.statSync(e.path);
        if (stat.isFile())
            taskFun(null, e.path);
    }
});
 
 
执行脚本时把所有的*.ts文件生成一次,然后检测到有修改时生成对应的js。
只是当前gaze的Bug还比较多,在使用中经常掉链子,而gulp.watch()依赖此库,只能发现挂掉就重新运行下gulp。
 
 
 

使用gulp脚本配合TypeScript开发的更多相关文章

  1. gulp自己主动化任务脚本在HybridApp开发中的使用

    眼下做前端开发的同学可能都熟悉grunt.fis之类的自己主动化构建工具.事实上在HybridApp开发中我们也能够使用这些工具来简化我们的工作.gulp就是一个比grunt,fis都先进的构建工具. ...

  2. VSCode搭建node + typescript开发环境

    我们一起来喜欢TypeScript 现在写js不用TypeScript,伦家可能会觉得你是外星人. 是的,TypeScript很大程度增强了代码的可读性,可跟踪性,可维护性和减少了bug. 那么没有理 ...

  3. 使用Visual Studio Code搭建TypeScript开发环境

    使用Visual Studio Code搭建TypeScript开发环境 1.TypeScript是干什么的 ? TypeScript是由微软Anders Hejlsberg(安德斯·海尔斯伯格,也是 ...

  4. 使用TypeScript开发一个在线记事本,支持离线存储

    先贴上源码传送门: https://github.com/flowforever/yaryin.note 记事本网址: http://yindoc.com , 井号后面写你喜欢的文件名即可. 最近在研 ...

  5. TypeScript开发环境搭建(Visual studio code)

    使用Visual Studio Code搭建TypeScript开发环境 1.TypeScript是干什么的 ? TypeScript是由微软Anders Hejlsberg(安德斯·海尔斯伯格,也是 ...

  6. 使用Visual Studio Code + Node.js搭建TypeScript开发环境

    Visual Studio Code搭建Typescript开发环境 —— 相关文章: http://www.cnblogs.com/sunjie9606/p/5945540.html [注意:这里仅 ...

  7. 新石器时代码农的Typescript开发总结

    如果评定前端在最近五年的重大突破,Typescript肯定能名列其中,重大到各大技术论坛.大厂面试都认为Typescript应当是前端的一项必会技能.作为一名消息闭塞到被同事调侃成"新石器时 ...

  8. Typescript开发学习总结(附大量代码)

    如果评定前端在最近五年的重大突破,Typescript肯定能名列其中,重大到各大技术论坛.大厂面试都认为Typescript应当是前端的一项必会技能.作为一名消息闭塞到被同事调侃成"新石器时 ...

  9. 如何用TypeScript开发微信小程序

    微信小程序来了!这个号称干掉传统app的玩意儿虽然目前处于内测阶段,不过目前在应用号的官方文档里已经放出了没有内测号也能使用的模拟器了. 工具和文档可以参考官方文档:https://mp.weixin ...

随机推荐

  1. Java模拟网站登录

    web登陆无非就是网页获取,cookie 的管理,post和get方式的模拟. 1.网页内容获取 java.io.InputStream in; java.net.URL url = new java ...

  2. Java基础-新建项目、包和类

    1,新建项目

  3. HDU 5515 Game of Flying Circus 二分

    Game of Flying Circus Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem ...

  4. C++ AppendMenu

    主题 1.  系统菜单下面添加自定义菜单 2. 3. 4. 5.         AppendMenu The AppendMenu function appends a new item to th ...

  5. 一个Windows Service项目的完整开发过程

    (一)建立项目文件 先建立一个解决方案文件,然后添加三个项目. 分别是: (1)Windows服务项目  -----ActiveMQSenderService项目,服务主要是定时轮询某表,将更新发送到 ...

  6. android UI进阶之实现listview中checkbox的多选与记录

    今天继续和大家分享涉及到listview的内容.在很多时候,我们会用到listview和checkbox配合来提供给用户一些选择操作.比如在一个 清单页面,我们需要记录用户勾选了哪些条目.这个的实现并 ...

  7. cuda-convnet 卷积神经网络 一般性结构卷积核个数 和 输入输出的关系以及输入输出的个数的说明:

    卷积神经网络 一般性结构卷积核个数和 输入输出的关系以及输入输出的个数的说明: 以cifar-10为例: Initialized data layer 'data', producing3072 ou ...

  8. StarlingMVC Framework 原理。。。

    向starlingmvc 中添加bean后..会根据Metadata标签,分别交给不同的Processor去处理...然后会执行每个bean的postConstruct函数.相当于初始化函数...可以 ...

  9. OpenVPN莫名其妙断线的问题及其解决-confirm

    本文很短,目的在于confirm一下凌乱的< OpenVPN莫名其妙断线的问题及其解决>,如果看觉得我比较啰嗦,那么一定要看看最后一个小节,好在CSDN为每篇文章都自动添加了目录,可以直接 ...

  10. mysql中文乱码的完美解决方案

    问题描述: mysql插入中文时显示为乱码或"?"号 解决方案: 修改mysql的my.ini配置 [mysql] default_character_set=utf8 [mysq ...