var gulp = require('gulp'),
autoprefixer = require('gulp-autoprefixer'), //自动添加css前缀
rename = require('gulp-rename'), //文件重命名
sass = require('gulp-sass'), //sass的编译
minifycss = require('gulp-minify-css'), //压缩css
uglify = require('gulp-uglify'), //压缩js代码
concat = require('gulp-concat'), //合并js文件
rev = require('gulp-rev'), //更改版本名
revCollector = require('gulp-rev-collector'), //rev的插件,用于更改html模版中lib的引用
del = require('del'), //清除文件
livereload = require('gulp-livereload'),
// babel = require('gulp-babel'),//清除文件
jade = require('gulp-jade'), //jade
htmlmin = require("gulp-htmlmin"), //html
connect = require('gulp-connect'), //使用connect启动一个Web服务器
js_pach = ['app/static/**.js', 'app/static/**/**.js', 'app/template/**.js', 'app/template/**/**.js', 'app/template/**/**.js'],
//var css_pach = ['css/ionic_main.css','css/huodong.css','css/gouwuche.css','css/chenggong.css'];
scss_pach = ['app/**/**.scss', 'app/**/**/**.scss', 'app/**/**/**/**.scss', 'app/**/**/**/**/**.scss'],
jade_path = ['app/template/**.jade', 'app/template/**/**.jade', 'app/template/**/**/**.jade', 'app/template/**/**/**/**.jade'],
jade2_path = ['app/static/**.jade', 'app/static/**/**.jade', 'app/static/**/**/**.jade'],
html_path = ['app/template/**.html', 'app/template/**/**.html', 'app/template/**/**/**.html', 'app/template/**/**/**/**.html'],
all_path = js_pach.concat(scss_pach).concat(jade_path).concat(jade2_path).concat(html_path);
gulp.task('connect', function () {
connect.server({
root: '',
livereload: true,
port: 8080 //服务器端口
});
});
// gulp.task('babel', function () {
// return gulp.src(js_pach)
// .pipe(babel({
// compact:false
// }))
// .pipe(concat('debug2.js'))
// .pipe(gulp.dest('js'));
// }); gulp.task('jade', function () {
return gulp.src(jade_path)
.pipe(jade()).on('error', function () {
console.log("eroror")
})
.pipe(gulp.dest('app/dist/templates')).pipe(connect.reload());
})
gulp.task('jade2', function () {
return gulp.src(jade2_path)
.pipe(jade()).on('error', function () {
console.log("eroror")
})
.pipe(gulp.dest('app/dist')).pipe(connect.reload());
}); gulp.task('html', function () {
return gulp.src(html_path)
.pipe(htmlmin({collapseWhitespace: true,minifyCSS:true,minifyJS:true,removeComments:true,removeEmptyAttributes:true}))
.pipe(gulp.dest('app/dist/templates')).pipe(connect.reload());
}) gulp.task('js', ['cleanjs'], function () { return gulp.src(js_pach)
.pipe(concat('debug.js'))
.pipe(gulp.dest('app/dist/js'))
.pipe(concat('main.js'))
.pipe(uglify())
.pipe(rev())
.pipe(gulp.dest('app/dist/js'))
.pipe(rev.manifest())
.pipe(gulp.dest('app/dist/js'))
}); gulp.task('cleanjs', function (cb) {
return del(['app/dist/js/main-**.js'], cb)
});
gulp.task('cleancss', function (cb) {
return del(['app/dist/css/main-**.css'], cb)
}); gulp.task('jsrev', ['js'], function () {
return gulp.src(['app/dist/js/**.json', 'index.html'])
.pipe(revCollector({
replaceReved: true
}))
.pipe(gulp.dest('')).pipe(connect.reload())
}); gulp.task('sassrev', ['sass'], function () {
return gulp.src(['app/dist/css/**.json', 'index.html'])
.pipe(revCollector({
replaceReved: true
}))
.pipe(gulp.dest('')).pipe(connect.reload())
}); gulp.task('sass', ['cleancss'], function () {
return gulp.src(scss_pach)
.pipe(sass({
outputStyle: 'compressed'
}).on('error', sass.logError))
.pipe(concat('debug.css'))
.pipe(gulp.dest('app/dist/css'))
.pipe(concat('main.css'))
.pipe(rev())
.pipe(gulp.dest('app/dist/css'))
.pipe(rev.manifest())
.pipe(gulp.dest('app/dist/css'));
}); gulp.task('default', function () {
gulp.start('connect', 'watch');
}); //监视文件变化,自动生成到dist文件夹 gulp.task('watch', function () {
gulp.watch(js_pach, ['jsrev']);
gulp.watch(scss_pach, ['sassrev']);
gulp.watch(jade_path, ['jade']);
gulp.watch(jade2_path, ['jade2']);
gulp.watch(html_path, ['html']);
});

  

npm install --save 即可把所依赖的文件下载到本地

利用gulp搭建简单服务器,gulp标准版的更多相关文章

  1. 利用gulp搭建本地服务器,并能模拟ajax

    工作中可能会用到的小工具,在此记录一下.可以实现的功能有: 本地http服务器 页面实时刷新 可以模拟ajax请求 第一步,新建package.json文件.用到了gulp.gulp-webserve ...

  2. 利用Serv-U搭建FTP服务器

    以前在学校的时候,学校的整个宿舍楼都是在一个局域网中,经常有人用个人电脑搭个网站或者FTP啊什么的,主要是进行一些影视资源的传播活动.不乏 有些资源充沛的有志青年利用业余时间翻译某岛国影视资源,利用局 ...

  3. Node安装及搭建简单服务器

    注:本文安装系统为mac,windows及其他系统下载对应安装包 ,mac下载后的安装包为apk文件,windows为msi文件. 安装 1.在网上下载node安装包,官方网站2.双击下载文件,按步骤 ...

  4. CentOS利用postfix搭建邮件服务器

    之前我用nodemailer通过163邮箱来发送邮件,不过没过几天就一直ETIMEDOUT,不知道什么原因,想着还是自己搭一个来发邮件可能靠谱点(flag?) 安装postfix CentOS 7 自 ...

  5. 利用nginx搭建https服务器

    一.HTTPS简介 HTTPS其实是有两部分组成:HTTP + SSL / TLS,也就是在HTTP上又加了一层处理加密信息的模块.服务端和客户端的信息传输都会通过TLS进行加密,所以传输的数据都是加 ...

  6. gulp 搭建静态服务器

    步骤: 安装依赖:npm i browser-sync --save-dev 导入browser-sync,通过create创建 设置Sass和Js任务,将其压缩重命名并引入页面,任务结束时reloa ...

  7. 利用docker搭建rtmp服务器(1)

    以后的项目里面可能需要用到直播,所以就先看看 本来想在自己MAC上搭建nginx的,后来怕把自己的机子搞乱,刚好就学习了下docker,感觉docker强大就在于是一个操作系统软件的版本管理系统,可以 ...

  8. 嵌入式Linux利用Wifi搭建无线服务器(物联网实践之无线网关)

    在 http://www.cnblogs.com/heat-man/p/4564539.html中,在嵌入式Linux开发板上我们从最底层实现了一个智能家居的远程控制系统,然而采取的是用网线连接到交换 ...

  9. [PHP]利用XAMPP搭建本地服务器, 然后利用iOS客户端上传数据到本地服务器中(三. PHP端代码实现)

    一.安装XAMPP   http://www.cnblogs.com/lidongxu/p/5256330.html 二. 配置MySql http://www.cnblogs.com/lidongx ...

随机推荐

  1. 为什么使用 Containjs 模块化管理工具效率高?

    为什么使用 Containjs 模块化管理工具效率高? 要说明这个首先得说明一下,Containjs 的模块加载原理. 第一步,首先使用异步加载(ajax)在 js 目录下的 app.js 入口模块( ...

  2. Android线程池使用终结版

    有一段时间没写博文了,今天抽空总结一下,也希望能通过自己写的这些文章,加深理解的同时能帮 助在技术方面有疑点的朋友搞清楚个所以然来,由于经常会在网上或群里看到有朋友会问线程方面的 东西,就像我一个朋友 ...

  3. llinux svn安装

    1,安装SVN服务端 直接用apt-get或yum安装subversion即可(当然也可以自己去官方下载安装) [plain] view plain copy print? sudo apt-get  ...

  4. JDBC基础学习(五)—批处理插入数据

    一.批处理介绍      当需要成批插入或者更新记录时.可以采用Java的批量更新机制,这一机制允许多条语句一次性提交给数据库批量处理.通常情况下比单独提交处理更有效率. JDBC的批量处理语句包括下 ...

  5. BZOJ1857 传送带 (三分法求单峰函数极值)

    第一次发BZOJ的题解,先从水题开始吧,好不容易找到一道水题,那就从这题开始吧. 1.题设部分{ 题目描述: 在一个2维平面上有两条传送带,每一条传送带可以看成是一条线段.两条传送带分别为线段AB和线 ...

  6. C# 超高速高性能写日志 代码开源

    1.需求 需求很简单,就是在C#开发中高速写日志.比如在高并发,高流量的地方需要写日志.我们知道程序在操作磁盘时是比较耗时的,所以我们把日志写到磁盘上会有一定的时间耗在上面,这些并不是我们想看到的. ...

  7. idea2015的使用心得

    今天打开myeclipse感觉里面全是project,也懒着换地方了,因为这些代码还要时常看,索性安装了idea试试水,感觉还不错,用起来并不比myeclipse差,跟webstorm差不多,他俩就是 ...

  8. php面向对象(一)---2017-04-17

    重点:定义类与实例化类:访问修饰符:构造函数 一.面向对象 面向对于与面向过程的主要区别在于:前者包含类和对象的概念 二.类和对象   1.类是由众多对象抽象(归纳总结)出来的东西  代表所有对象的特 ...

  9. SysTick定时器

    SysTick是一个24位的倒计数定时器,当计到0时,将从RELOAD寄存器中自动重装载定时初值.只要不把它在SysTick控制及状态寄存器中的使能位清除,就永不停息.下边小结了SysTick的相关寄 ...

  10. 透视I/O多路复用

    透视I/O多路复用 我写的不是select这些函数的教学,需要了解的请自行Google或者去man,这些是帮助我理解函数的封装之下的道理. 需要回答的问题 I/O准备好了指什么?什么叫I/O已经可读/ ...