gulp工程化工具
gulpfile.js
var gulp = require('gulp');
var rename = require('gulp-rename')
var pump = require('pump');
var connect = require('gulp-connect');
//ftl转html
gulp.task('ftl-html',function(cb){
pump([
gulp.src('WEB-INF/page/Wechat/*.ftl'),
rename({extname:'.html'}),
gulp.dest('./html/Wechat')
])
})
//html转ftl
gulp.task('html-ftl',function(cb){
pump([
gulp.src('./html/Wechat'),
rename({extname:'.ftl'}),
gulp.dest('WEB-INF/page/Wechat')
])
})
// webserver livereload web服务器
gulp.task('webserver', function() {
connect.server({
root:'./',
port:9000,
livereload:true
});
});
gulp.task('html', function () {
gulp.src('**/**/*.html')
.pipe(connect.reload());
});
gulp.task('watch',function(){
gulp.watch(['./*html'],['html'])
})
gulp.task('default',['webserver','watch'])
package.json
{
"name": "webapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"gulp": "^3.9.1",
"gulp-connect": "^5.0.0",
"gulp-rename": "^1.2.2",
"pump": "^1.0.2"
}
}
参考文章http://www.gulpjs.com.cn/docs/api/
gulp工程化工具的更多相关文章
- Grunt和Gulp构建工具在Visual Studio 2015中的高效的应用
Grunt和Gulp构建工具在Visual Studio 2015中的高效的应用 Grunt和Gulp是Javascript世界里的用来做自动压缩.Typescript编译.代码质量lint工具.cs ...
- gulp打包工具
首先安装全局gulp $ npm install --global gulp 下载成功后 新建一个项目或者一个文件夹(做测试) mkdir testgulp 在该文件或者项目下下载gulp工具 $ n ...
- [翻译]在gulp构建工具中使用PostCSS
前言 PostCSS已经在一段时间内迅速普及,如果你还不知道PostCSS或还没有使用它,我建议你看一下之前的一篇介绍文章<PostCSS简介>,其中介绍了使用PostCSS的基本方法,包 ...
- gulp 构建工具
1. gulp 的简介 gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以 ...
- 腾讯IVWEB前端工程化工具feflow思考与实践
本篇文章主要介绍腾讯IVWEB团队从0到1在工程化的思考和实践.feflow的全称是Front-end flow(前端工作流),致力于提升研发效率和规范的工程化解决方案.愿景是通过feflow,可以使 ...
- webpack打包和gulp打包工具详细教程
30分钟手把手教你学webpack实战 阅读目录 一:什么是webpack? 他有什么优点? 二:如何安装和配置 三:理解webpack加载器 四:理解less-loader加载器的使用 五:理解ba ...
- ASP.NET5之客户端开发:Grunt和Gulp构建工具在Visual Studio 2015中的高效的应用
Grunt和Gulp是Javascript世界里的用来做自动压缩.Typescript编译.代码质量lint工具.css预处理器的构建工具,它帮助开发者处理客户端开发中的一些烦操重复性的工作.Grun ...
- [转]gulp打包工具总结
与grunt类似,gulp也是构建工具,但相比于grunt的频繁IO操作,gulp的流操作能更快更便捷地完成构建工作.gulp借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级 ...
- Gulp自动化工具之图片压缩
一.安装node https://nodejs.org/download/ 根据需要选择对应的版本 安装好了之后可以通过node -v参看一下版本 node -v 二.安装gulp npm insta ...
随机推荐
- eclipse Maven配置
①下载:http://maven.apache.org/download.cgi ②解压至:F:\Study\apache-maven-3.5.2 ③配置环境变量 变量名:M2_HOME 变量值:F: ...
- javascript学习笔记02--面向对象学习
js面向对象编程 1. javascript 是一种基于对象的编程 object-based(基于对象):遇到的所有对象都是对象2.javascript没有类class,但是有新的原型对象,习 ...
- ACM1008
题目:Haab日历和Tzolkin日历的转换. Maya一共有两种日历,第一种日历名为Haab,将一年分为365天,一共有19个月.其中前18个月,分别命名为pop.nozip.zotz.tzec.x ...
- .Net利用Newtonsoft进行解析Json的快捷方法
现在异构系统之间的数据交换多采用Json格式 .Net如何快捷地解析Json和将Object转换成json呢? 1.利用Newtonsoft解析Json字符串 在百度上查找资料,利用Newtonsof ...
- iOS - Quartz 2D 画板绘制
1.绘制画板 1.1 绘制简单画板 PaintBoardView.h @interface PaintBoardView : UIView @end PaintBoardView.m @interfa ...
- CSS布局方案
居中布局 水平居中 1)使用inline-block+text-align 原理:先将子框由块级元素改变为行内块元素,再通过设置行内块元素居中以达到水平居中. 用法:对子框设置display:inli ...
- [LOJ2230][BJOI2014]大融合
题面戳我 sol LCT维护子树size. 开一个数组\(sz_i\)表示一个节点的所有虚儿子的size和,\(sum_i\)表示以一个节点为根的子树的\(size\)和,可见\(sz_u=\sum_ ...
- 一道java基础面试题
package test; class A { public A(){ System.out.println("A3"); } { S ...
- docker 一键安装zabbix server、zabbix agent
基本原理.须知:1.zabbix 分为zabbix server和zabbix agent,其中zabbix server需要web环境,并且其数据存储在独立的数据库中:2.docker是一种容器服务 ...
- 使用zxing生成解析二维码
1. 前言 随着移动互联网的发展,我们经常在火车票.汽车票.快餐店.电影院.团购网站以及移动支付等各个场景下见到二维码的应用,可见二维码以经渗透到人们生活的各个方面.条码.二维码以及RFID被人们应用 ...