Gulp-前端进阶A-3---如何不刷新监控文件变化?
npm install --save-dev gulp-connect
npm install --save-dev gulp-livereload
npm其他,前面已有
var gulp = require('gulp'),
gulpLoadPlugins = require('gulp-load-plugins'),
plugins = gulpLoadPlugins(); var paths = {
src : "src/",
css : "src/css/",
scripts : "src/js/",
scss : "src/scss/",
img : "src/images/",
html : "src/html/",
build : "build"
}
//创建服务器
gulp.task('webserver',function(){
plugins.connect.server({port:,livereload:true});
});
/////////////////////////////////
gulp.task('scripts', function() {
return gulp.src(paths.scripts+ "**/*.js")
.pipe(plugins.concat('all.js'))
.pipe(plugins.uglify())
.pipe(gulp.dest(paths.build + '/js'));
});
gulp.task('css', function() {
return gulp.src(paths.css+ "**/*.css")
.pipe(plugins.concat('all.css'))
.pipe(plugins.minifyCss())
.pipe(gulp.dest(paths.build + '/css'));
});
gulp.task('html',function(){
return gulp.src(paths.html + "**/*.html")
.pipe(gulp.dest(paths.build +'/html'));
});
///////////////////////////
gulp.task('reload-dev',['scripts','css','html'],function() {
return gulp.src(paths.src + '**/*.*')
.pipe(plugins.connect.reload());//服务器重启和各文件变化
});
//监听
gulp.task('watch', function() {
gulp.watch(paths.src + '**/*.*',['reload-dev']);
}) gulp.task('default', ['webserver','reload-dev','watch']);
//此处顺序有先后吗?
这里我打开localhost:8000这个鬼
不好打开生成的html文件,暂手动打开,而且要手动刷新,没有自动刷新
然后src下的js,css,html有变动时,build里的文件随之变化
此处还要注意各文件引用路径,生成处并不一样
Gulp-前端进阶A-3---如何不刷新监控文件变化?的更多相关文章
- django 调试 监控文件变化 自动刷新浏览器
问题描述:修改html js py等文件后,自动刷新浏览器,解放F5,提高效率 解决办法:使用gulp,使用bowerSync 关于gulp,可以查看系列教程 关于bowerSync,查看官网 关于结 ...
- gulp前端工程化教程
gulp npm install -g gulp-concat 文件打包 npm install -g gulp-rename 文件重命名 npm install -g gulp-imagemin 图 ...
- [前端进阶课] 构建自己的 webpack 知识体系
webpack webpack 最出色的功能之一就是,除了 JavaScript,还可以通过 loader 引入任何其他类型的文件. Webpack 核心概念: Entry(入口):Webpack 执 ...
- 我在阿里这仨月 前端开发流程 前端进阶的思考 延伸学习的方式很简单:google 一个关键词你能看到十几篇优秀的博文,再这些博文中寻找新的关键字,直到整个大知识点得到突破
我在阿里这仨月 Alibaba 试用期是三个月,转眼三个月过去了,也到了转正述职的时间.回想这三个月做过的事情,很多很杂,但还是有重点. 本文谈一谈工作中遇到的各种场景,需要用到的一些前端知识,以及我 ...
- gulp 前端构建工具入门
gulp 前端构建工具入门 标签(空格分隔): gulp 1. 安装gulp npm i -g gulp 2. 创建gulp项目 2.1 Hello world 使用npm init初始化项目文件夹. ...
- gulp --- 前端自动化构建工具
目录 1. gulp使用步骤 1.1 安装Node.js 1.2 全局安装gulp 1.3 安装项目依赖包gulp 1.3.1 了解package.json 1.3.2 根据package.json安 ...
- gulp前端自动化构建工具使用
(1)新建项目目录gulp_web (2)项目目录下建目录src里面存放需要进行gulp处理的文件目录及文件 (3)gulpfile.js文件内容为声明需要打包应用的gulp组件及打包文件路径和打包任 ...
- gulp 前端自动化工具
一开篇 在前端开发的过程中,我们经常会碰到压缩.合并.图片script 等,于是就有了gulp 前端自动化构建工具,它能帮你在前端开发中,节省时间. 1,安装 node.js 因为gulp 构建工具是 ...
- gulp前端自动化工作流
gulp前端自动化工作流 为什么要有自动化的流程? 在我们的开发过程中有大量的重复操作 DRY Don't repeat yourself 开发人员的精力应放在哪? 创造,新的一切前端开发的编译操作 ...
随机推荐
- cwRsync window下的跨服务器的文件同步
cwRsync 是window下的文件同步软件,可以跨服务器运行,第一次运行的时候是全部备份同步,之后的同步采用的是增量同步 这个软件分为服务端和客户端. 服务器是需要同步的文件源, 客户端相当于是备 ...
- mono+jexus 验证码不显示:System.Drawing
System.ArgumentException The requested FontFamily could not be found [GDI+ status: FontFamilyNotFoun ...
- VS错误 error LNK1158: 无法运行“cvtres.exe”
1.删除文件 2.如果删除不掉 右键属性 - 安全 - 高级 - 所有者 - 确定 右键属性 - 安全 - 编辑 - 开通权限
- JS文件放在头还是尾
目前绝大部分的浏览器都是采取阻塞方式(Scripts Block Downloads)加载Javascript文件的:javascript在头部会阻止其他元素并行加载(css,图片,网页):这种机制的 ...
- log4net各种Filter使用
log4net里面的filter类常用的为: 1.DenyAllFilter 拒绝所用的日志输出 <filter type="log4net.Filter.LevelMatchFilt ...
- 一步一步实战扩展 ASP.NET Route,实现小写 URL、个性化 URL
介绍 不知道大家在使用 ASP.NET MVC 时有没有一些扩展要求,反正我是有很多.在使用 MVC 这几年(PS:我是从 1.0 开始学,2.0.3.0 开发至今),我深深地觉得 MVC 的扩展性真 ...
- php和egret的配合
egret对资源路径和js的应用都是相对路径,而在现在许多流行的框架里,一般都把js和资源放到专门的文件夹下,如public. 修改步骤: 1.修改index.html,改为全路径,如: <sc ...
- ArcGIS平台中PostgreSQL数据连接配置总结
通常用户在使用要素服务时,要求数据必须是存放在空间数据库中的.同时,需要将数据库注册到ArcGIS for Server,这样在发布服务时就不需要进行数据拷贝,从而可以节省磁盘空间及服务发布时间.以下 ...
- 使用uploadify上传控件无法进入后台问题分析
分别在.net mvc 和java struts2中使用到 uploadify上传 文件,遇到同样的问题,选中文件上传后,文件无法上传,打上断点后发现没有进入后台. 逐步断点发现 项目共同点是加入了 ...
- 如何自学Android--转
原文地址:http://blog.csdn.net/lavor_zl/article/details/51217319 1. Java知识储备 本知识点不做重点讲解: 对于有基础的同学推荐看<J ...