前端自动化之ts编译

【前端自动化之ts编译】的更多相关文章

前端自动化之ts编译

前端自动化之ts编译 gulp引用包:gulp-tsc gulpfiles.js代码: var typescript = require('gulp-tsc'); gulp.task('compile', function () { return gulp.src(['src/ts/*.ts']) .pipe(typescript({ target: 'es5',//把typescript转换成es5标准的js文件,也可以是es6,但这个node版本不支持 module: 'commonjs'…

构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案（四）

通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 javascript 文件.多终端多浏览器同步测试的开发环境,并且还可以通过 piblish 命令对项目下的文件进行打包操作. 相关连接导航在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二) 常…

前端自动化工具gulp自动添加版本号

之前,我介绍了学习安装并配置前端自动化工具Gulp,觉得gulp确实比grunt的配置简单很多,于是我决定再深入学习一下gulp,就去网上查了资料,发现gulp还可以自动添加版本号,这个功能就为我平时在更新css或js时老是在客户端存在缓存导致更新后的效果无法实时展现的苦恼.所以就赶紧去试了一下,果真可以,很高兴啊,真是为项目开发,为效果的快速展现提供了很多的便利. 实现原理: 1.修改js和css文件: 2.通过对js,css文件内容进行hash运算,生成一个文件的唯一hash字符串(如果文件…

学习安装并配置前端自动化工具Gulp

Gulp和所有Gulp插件都是基于nodeJs来运行的,因此在你的电脑上需要安装nodeJs,安装过程请移驾安装并配置前端自动化工具--grunt.安装完成后,通过运行cmd进入DOS命令窗口,如图: 如上图,输入node -v然后回车,看到有版本号,证明nodeJs安装成功. 接下来就是安装Gulp了: 1.首先进行全局安装gulp,如图: 安装完成后,输入gulp -v然后回车,看到有版本号,证明gulp安装成功. 2.在你的项目中安装作为项目的开发依赖(devDependencies),如…

前端自动化构建工具gulp的使用总结

前端自动化构建工具gulp的使用总结博主最近偶的空闲,在此对gulp的使用做一个总结,让小伙伴知道如何合理的使用gulp以及gulp的使用技巧. 谈到gulp,有人可能就会想到另外一个构建工具grunt,那么博主就要夸你一句:油啊热瘪死他. 那么grunt和gulp有什么异同点呢? 1.易于使用:采用代码优于配置策略,Gulp让简单的事情继续简单,复杂的任务变得可管理. 2.高效:通过利用Node.js强大的流,不需要往磁盘写中间文件,可以更快地完成构建. 3.高质量:Gulp严格的插件指导…

前端自动化开发之grunt

上篇文章介绍了前端模块化开发工具seaJs,利用seaJs我们可以轻松实现前端的模块化编程,参见http://www.cnblogs.com/luozhihao/p/4818782.html 那么今天我继续介绍前端开发的另一工具——grunt.关于介绍grunt文章网上已经存在很多,而本文主要结合自己的亲身实践来讲解利用grunt实现前端开发中代码的压缩及合并. 一.准备工作再使用grunt之前,我们先要安装node.js,利用node的包管理工具npm来安装grunt node.js下载地址…

近期总结：generator-web，前端自动化构建的解决方案

本文结合最近的工作经验,总结出一个较简洁的前端自动化构建方案,主张css和js的模块化,并通过grunt的自动化构建,有效地解决css合并,js合并和图片优化等问题,对于提高前端性能和项目代码质量有一定参考价值,欢迎阅读和点评:) github地址:https://github.com/liuyunzhuge/generator-web demo地址:https://liuyunzhuge.github.io/generator-web/ 有兴趣的同学,在阅读文章,学习或使用demo的过程中,有…