gulp构建项目（三）：gulp-watch监听文件改变、新增、删除

一、gulp.watch()功能介绍

举例说明：当’./src/*.html’发生变化时，执行’html’任务，同时刷新浏览器。如下：

gulp.task('watch', function(){gulp.watch('./src/*.html', ['html']).on('change', browserSync.reload);
});

二、gulp.watch()功能限制及解决方案

gulp.watch()无法监听到新增加的文件，这样一来，我们每次增加文件时都要执行gulp命令来重启服务。这并不是我们希望的结果。可以引入gulp-watch模块解决这个问题：

三、安装gulp-watch，监听文件改变、新增、删除

npm i -D gulp-watch

四、gulp-watch使用

1、gulp-watch参数说明

/**
*   @param glob 需要监听的文件
*   @param options
*   @param callback 监听的文件发生变化后执行的函数
*/watch(glob, [options, callback])

2、gulp-watch使用

var watch = require('gulp-watch');gulp.task('watch', function () {return watch('./src/**/*.html', function () {gulp.start('html');  //执行html任务browserSync.reload(); //刷新浏览器});
});// 加入'watch'任务
gulp.task('default', ['clean'], function() {gulp.start(['html', 'js_main','css_main','images', 'browser', 'watch'])
});

3、gulp-watch封装使用

为什么将监听任务全部拆开，而不是统一监听 src/ 下的文件变化，请参照第五点的说明

gulp.task('watch', function () {w('./src/**/*.html', 'html');w('./src/js/**', 'js_main');w('./src/libs/**/*.js', 'js_libs');w('./src/css/**', 'css_main');w('./src/libs/**/*.css', 'css_libs');w('./src/images/**', 'images');function w(path, task){watch(path, function () {gulp.start(task);browserSync.reload();});}
});

五、gulp-watch使用说明及要求

1、监听文件变化，自动打包并且自动刷新浏览器。需要自动打包是因为我们的文件引入都是直接指向打包之后的 dist/ 文件夹；

2、自动打包。要求速度要快，否则每次保存文件（很多程序猿习惯设置自动保存）就自动打包，根据性能的不同可能会等待一定的时间（特别是对于大型项目）。所以

1）尽可能的将监听任务拆开，如上；
2）减少开发模式下的功耗：比如不进行压缩处理，特别是图片的压缩需要时间较长。这就需要判断当前是开发环境还是生产环境，可继续浏览后续文章；

3、浏览器刷新。浏览器刷新要在打包完成之后，参考下面文章：

gulp构建项目（四）：run-sequence实现逐个执行任务

六、效果浏览

项目地址（别忘了给星哦）

https://github.com/shiguang0116/gulp-project

gulp构建项目（一）：环境准备及项目基础结构搭建
gulp构建项目（二）：browser-sync启本地服务并开启浏览器
gulp构建项目（三）：gulp-watch监听文件改变、新增、删除
gulp构建项目（四）：run-sequence实现逐个执行任务
gulp构建项目（五）：gulp-if条件判断及环境变量设置
gulp构建项目（六）：gulp-html-tpl处理公用模板
gulp构建项目（七）：gulp-uglify压缩js以及检查js语法错误
gulp构建项目（八）：gulp编译less，添加CSS前缀以及压缩css
gulp构建项目（九）：gulp-imagemin压缩图片及gulp-cache缓存
gulp构建项目（十）：gulp-rev-collector-dxb添加版本号（?hash）
gulp构建项目（十一）：gulp-htmlmin压缩html
gulp构建项目（十二）：gulp-babel编译es6
gulp构建项目（十三）：babel-polyfill编译es6新增api
gulp构建项目（十四）：gulp-rename重定义打包生成文件的路径
.
gulp构建项目（附录一）：gulp发生错误时，进程挂掉的问题

gulp构建项目（三）：gulp-watch监听文件改变、新增、删除相关推荐

webpack学习笔记（三）：监听文件变化并编译
在上一篇webpack学习笔记中主要认识了webpack配置文件中相关的基础配置和命令的执行.这次学习如何在文件发生变化时自动打包编译. 首先,我们来看一下配置文件 const path = requ ...
grunt 监听文件改变自动编译js
gruntfile.js配置如下: module.exports = function(grunt){ Project configuration.grunt.initConfig({pkg: gru ...
gulp构建项目（七）：gulp-uglify压缩js以及检查js语法错误
需求分析:将js文件压缩成一行,减少js文件的大小.压缩过程中如果遇到js语法错误,将会报错并且压缩会被终止.所以我们需要: 在开发环境下,编写js代码时,要监听并检查js文件的语法,避免语法错误导致 ...
Java实现监听文件变化的三种方法，推荐第三种
背景在研究规则引擎时,如果规则以文件的形式存储,那么就需要监听指定的目录或文件来感知规则是否变化,进而进行加载.当然,在其他业务场景下,比如想实现配置文件的动态加载.日志文件的监听.FTP文件变动监 ...
Cesium 三维球转动监听事件（相机监听事件）并且获取当前中心点位置
三维球转动监听,可以使用相机监听,也可以使用鼠标移动监听. 相机监听有延迟,必须转动到一定程度后,才会启动监听. 鼠标移动监听可以实时监听 /* 三维球转动添加监听事件 */ viewer.camer ...
监听文件变化并自动运行 npm script
监听文件变化并自动运行 npm script 软件工程师做的事情基本都是在实现自动化,比如各种业务系统是为了业务运转的自动化,部署系统是为了运维的自动化,对于开发者本身,自动化也是提升效率的关键环节, ...
java实现监听文件
监听文件是否添加当前项目需要读取日志信息,向监听日志更新的动态. 用线程的方式来监控log日志文件我们首先要了解以下这三个类 1.Tailer类 Tailer类的主要作用是采用线程的方式去监控日志 ...
vue之实现日历----显示农历，滚动日历监听年月改变
第一次手写日历,遇到很多坑,好在都解决,感谢度娘娘(微笑) gitHub源码(https://github.com/xqtian/calendar)让你满意记得给小星星哦功能包括显示星期公历,农历, ...
使用Node.JS监听文件夹变化
使用Node.JS监听文件夹改变有许多应用场合,比如: 构建自动编绎工具当源文件改变时,自动运行build过程,比如当你写CoffeeScript文件或SASS CSS文件时,保存之后可即时生成对应 ...

gulp构建项目（三）：gulp-watch监听文件改变、新增、删除

一、gulp.watch()功能介绍

二、gulp.watch()功能限制及解决方案

gulp.watch()无法监听到新增加的文件，这样一来，我们每次增加文件时都要执行gulp命令来重启服务。这并不是我们希望的结果。可以引入gulp-watch模块解决这个问题：

三、安装gulp-watch，监听文件改变、新增、删除

四、gulp-watch使用

1、gulp-watch参数说明

2、gulp-watch使用

3、gulp-watch封装使用

五、gulp-watch使用说明及要求

1、监听文件变化，自动打包并且自动刷新浏览器。需要自动打包是因为我们的文件引入都是直接指向打包之后的 dist/ 文件夹；

2、自动打包。要求速度要快，否则每次保存文件（很多程序猿习惯设置自动保存）就自动打包，根据性能的不同可能会等待一定的时间（特别是对于大型项目）。所以

3、浏览器刷新。浏览器刷新要在打包完成之后，参考下面文章：

六、效果浏览

项目地址（别忘了给星哦）

相关文章

gulp构建项目（三）：gulp-watch监听文件改变、新增、删除相关推荐

最新文章

热门文章