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---如何不刷新监控文件变化?的更多相关文章

  1. django 调试 监控文件变化 自动刷新浏览器

    问题描述:修改html js py等文件后,自动刷新浏览器,解放F5,提高效率 解决办法:使用gulp,使用bowerSync 关于gulp,可以查看系列教程 关于bowerSync,查看官网 关于结 ...

  2. gulp前端工程化教程

    gulp npm install -g gulp-concat 文件打包 npm install -g gulp-rename 文件重命名 npm install -g gulp-imagemin 图 ...

  3. [前端进阶课] 构建自己的 webpack 知识体系

    webpack webpack 最出色的功能之一就是,除了 JavaScript,还可以通过 loader 引入任何其他类型的文件. Webpack 核心概念: Entry(入口):Webpack 执 ...

  4. 我在阿里这仨月 前端开发流程 前端进阶的思考 延伸学习的方式很简单:google 一个关键词你能看到十几篇优秀的博文,再这些博文中寻找新的关键字,直到整个大知识点得到突破

    我在阿里这仨月 Alibaba 试用期是三个月,转眼三个月过去了,也到了转正述职的时间.回想这三个月做过的事情,很多很杂,但还是有重点. 本文谈一谈工作中遇到的各种场景,需要用到的一些前端知识,以及我 ...

  5. gulp 前端构建工具入门

    gulp 前端构建工具入门 标签(空格分隔): gulp 1. 安装gulp npm i -g gulp 2. 创建gulp项目 2.1 Hello world 使用npm init初始化项目文件夹. ...

  6. gulp --- 前端自动化构建工具

    目录 1. gulp使用步骤 1.1 安装Node.js 1.2 全局安装gulp 1.3 安装项目依赖包gulp 1.3.1 了解package.json 1.3.2 根据package.json安 ...

  7. gulp前端自动化构建工具使用

    (1)新建项目目录gulp_web (2)项目目录下建目录src里面存放需要进行gulp处理的文件目录及文件 (3)gulpfile.js文件内容为声明需要打包应用的gulp组件及打包文件路径和打包任 ...

  8. gulp 前端自动化工具

    一开篇 在前端开发的过程中,我们经常会碰到压缩.合并.图片script 等,于是就有了gulp 前端自动化构建工具,它能帮你在前端开发中,节省时间. 1,安装 node.js 因为gulp 构建工具是 ...

  9. gulp前端自动化工作流

    gulp前端自动化工作流 为什么要有自动化的流程? 在我们的开发过程中有大量的重复操作 DRY Don't repeat yourself 开发人员的精力应放在哪? 创造,新的一切前端开发的编译操作 ...

随机推荐

  1. cwRsync window下的跨服务器的文件同步

    cwRsync 是window下的文件同步软件,可以跨服务器运行,第一次运行的时候是全部备份同步,之后的同步采用的是增量同步 这个软件分为服务端和客户端. 服务器是需要同步的文件源, 客户端相当于是备 ...

  2. mono+jexus 验证码不显示:System.Drawing

    System.ArgumentException The requested FontFamily could not be found [GDI+ status: FontFamilyNotFoun ...

  3. VS错误 error LNK1158: 无法运行“cvtres.exe”

    1.删除文件 2.如果删除不掉 右键属性 - 安全 - 高级 - 所有者 - 确定 右键属性 - 安全 - 编辑 - 开通权限

  4. JS文件放在头还是尾

    目前绝大部分的浏览器都是采取阻塞方式(Scripts Block Downloads)加载Javascript文件的:javascript在头部会阻止其他元素并行加载(css,图片,网页):这种机制的 ...

  5. log4net各种Filter使用

    log4net里面的filter类常用的为: 1.DenyAllFilter 拒绝所用的日志输出 <filter type="log4net.Filter.LevelMatchFilt ...

  6. 一步一步实战扩展 ASP.NET Route,实现小写 URL、个性化 URL

    介绍 不知道大家在使用 ASP.NET MVC 时有没有一些扩展要求,反正我是有很多.在使用 MVC 这几年(PS:我是从 1.0 开始学,2.0.3.0 开发至今),我深深地觉得 MVC 的扩展性真 ...

  7. php和egret的配合

    egret对资源路径和js的应用都是相对路径,而在现在许多流行的框架里,一般都把js和资源放到专门的文件夹下,如public. 修改步骤: 1.修改index.html,改为全路径,如: <sc ...

  8. ArcGIS平台中PostgreSQL数据连接配置总结

    通常用户在使用要素服务时,要求数据必须是存放在空间数据库中的.同时,需要将数据库注册到ArcGIS for Server,这样在发布服务时就不需要进行数据拷贝,从而可以节省磁盘空间及服务发布时间.以下 ...

  9. 使用uploadify上传控件无法进入后台问题分析

    分别在.net mvc 和java struts2中使用到 uploadify上传 文件,遇到同样的问题,选中文件上传后,文件无法上传,打上断点后发现没有进入后台. 逐步断点发现 项目共同点是加入了 ...

  10. 如何自学Android--转

    原文地址:http://blog.csdn.net/lavor_zl/article/details/51217319 1. Java知识储备 本知识点不做重点讲解: 对于有基础的同学推荐看<J ...