目标:编写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二维码登录流程实现(包含短地址生成,含部分代码)

    近年来,二维码的使用越来越风生水起,笔者最近手头也遇到了一个需要使用二维码扫码登录网站的活,所以研究了一下这一套机制,并用代码实现了整个流程,接下来就和大家聊聊二维码登录及的那些事儿. 二维码原理 二 ...

  2. iOS 使用compare 进行对比

    compare 是 NSString 中的一个方法,这个方法是将字符串 按照 ACSII码表来进行对比. NSString *num1 = @"5.2.0"; NSString * ...

  3. Codeforces Round #115 A. Robot Bicorn Attack 暴力

    A. Robot Bicorn Attack Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/17 ...

  4. MyBatis之三:多表联合查询

    在这篇文章里面主要讲解如何在mybatis里面使用一对一.一对多.多表联合查询(类似视图)操作的例子. 注:阅读本文前请先大概看一下之前两篇文章. 一.表结构 班级表class,学生表student, ...

  5. HDU1013_Digital Roots【大数】【水题】

    Digital Roots Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) To ...

  6. 浅谈Linux的内存管理机制

    转至:http://ixdba.blog.51cto.com/2895551/541355 一 物理内存和虚拟内存          我们知道,直接从物理内存读写数据要比从硬盘读写数据要快的多,因此, ...

  7. PHP下获取上个月、下个月、本月的日期(strtotime,date)

    今天写程序的时候,突然发现了很早以前写的获取月份天数的函数,经典的switch版,但是获得上月天数的时候,我只是把月份-1了,估计当时太困了吧,再看到有种毛骨悚然的感觉,本来是想再处理一下的,但是一想 ...

  8. 为laravel分页样式制定class

    做的项目有一个上翻页和下翻页,使用了框架提供的

  9. Wireshark抓包工具使用教程以及常用抓包规则

    转载:http://fangxin.blog.51cto.com/1125131/735178 Wireshark是一个非常好用的抓包工具,当我们遇到一些和网络相关的问题时,可以通过这个工具进行分析, ...

  10. 小白日记34:kali渗透测试之Web渗透-扫描工具-Burpsuite(二)

    扫描工具-Burpsuite 公共模块 0.Spider 爬网 手动爬网 先禁用截断功能 手动将页面中点击所有连接,对提交数据的地方,都进行提交[无论内容] 自动爬网[参数设置] 指定爬网路径,否则其 ...