目标:编写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. SQL性能优化工具TKPROF

     全名为Trace Kernel Profile,用来格式化跟踪文件,是一个命令行工具. 主要的格式例如以下: tkprof tracefile outputfile - tracefile:要分 ...

  2. 【转】python的小知识

    1. 如何反序访问一个序列(how do I iterate over a sequence in reverse order) 如果序列是list,则使用list.reverse()即可将序列反序. ...

  3. Java网页数据采集器[中篇-数据存储]【转载】

    本期概述 上期我们学习了html页面的数据采集,为了方便我们今后来调用收集到的数据,首先我们需要学习下如何将这些采集到的数据存储起来(MySql数据库). 数据采集页面 2011-2012赛季英超球队 ...

  4. HDU 5570 balls 期望 数学

    balls Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=5570 De ...

  5. BZOJ 1024: [SCOI2009]生日快乐 dfs

    1024: [SCOI2009]生日快乐 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://www.lydsy.com/JudgeOnline/p ...

  6. delphi TTreeView组件遍历磁盘目录

    TTreeView组件遍历磁盘目录 实例说明 TTreeView组件是一个以分枝结构或者说树状结构显示数据的组件,以该组件显示数据具有较好的等级关系和逻辑层次,并且易于操作.在组件中显示的数据结构与系 ...

  7. SQL Server日期函数总结

    获得一个月的天数:首先到得一个月最后一天的日期,通过 SQL Server 日期函数 day() 取得日期中的“天 ”部分 获得 2008 年 2 月份的天数:select day(cast('200 ...

  8. windows系统中eclipse C c++开发环境的搭建

    搜索了网上各种版本的eclipse c,c++ ,头都晕了..以前的版本很多都失效了..下面这个是搞了两天才调通的.超级强大,推荐 1.先装MinGW 2.配置环境变量3.然后把安装目录\mingw\ ...

  9. iptables常用命令

    常规: iptables -t filter -A INPUT -d -p tcp --dport -j DROPiptables -A INPUT -m iprange --src-range 22 ...

  10. android复合控件

    一.复合控件TopBar   创建复合控件可以很好地创建出具有重用功能的控件集合.比如TopBar. 做法:一般需要继承ViewGroup,再给它添加指定功能的控件.   以TopBar为例:   1 ...