1. 暂时不支持目录修改、创建、删除
    var gulp = require('gulp');
  2. var fs = require('fs');
  3. var path = require('path');
  4. var less = require('gulp-less');
  5. var sass = require('gulp-sass');
  6. var minifycss = require('gulp-minify-css');
  7. var concat = require('gulp-concat');
  8. var uglify = require('gulp-uglify');
  9. var rename = require('gulp-rename');
  10. var del = require('del');
  11. var tinylr = require('tiny-lr');
  12. var server = tinylr();
  13. var port = 1234;
  14.  
  15. // browser-sync
  16. var browserSync = require('browser-sync');
  17.  
  18. // 创建多层目录
  19. function mkdirs(dirname, mode, callback){
  20. fs.exists(dirname, function (exists){
  21. if(exists){
  22. callback();
  23. }else{
  24. //console.log(path.dirname(dirname));
  25. mkdirs(path.dirname(dirname), mode, function (){
  26. fs.mkdir(dirname, mode, callback);
  27. });
  28. }
  29. });
  30. }
  31.  
  32. // 拷贝文件
  33. function copyfile(oldPath, newPath) {
  34. console.log('复制'+oldPath+' -> '+newPath);
  35.  
  36. var stat = fs.lstatSync(oldPath);
  37. if(stat.isDirectory()) {
  38. console.log(oldPath+'是目录');
  39. return false;
  40. }
  41.  
  42. var readStream = fs.createReadStream(oldPath);
  43. var writeStream = fs.createWriteStream(newPath);
  44. readStream.pipe(writeStream);
  45. readStream.on('end', function () {
  46. console.log('copy end');
  47. });
  48. readStream.on('error', function () {
  49. console.log('copy error');
  50. });
  51. }
  52.  
  53. gulp.task('default', function() {
  54.  
  55. });
  56.  
  57. gulp.task('css', function() {
  58. return gulp.src('src/*.css') //压缩的文件
  59. .pipe(gulp.dest('target/css')) //输出文件夹
  60. .pipe(minifycss()); //执行压缩
  61. });
  62.  
  63. // 编译Sass
  64. gulp.task('sass', function() {
  65. gulp.src('./src/css/*.scss')
  66. .pipe(sass())
  67. .pipe(rename({ suffix: '.min' }))
  68. .pipe(minifycss())
  69. .pipe(gulp.dest('target/css'));
  70. });
  71.  
  72. gulp.task('js', function() {
  73. return gulp.src('./src/js/*.js')
  74. .pipe(gulp.dest('target/js')) //输出main.js到文件夹
  75. .pipe(rename({suffix: '.min'})) //rename压缩后的文件名
  76. .pipe(uglify()) //压缩
  77. .pipe(gulp.dest('target/js')); //输出
  78. });
  79.  
  80. gulp.task('html', function() {
  81. return gulp.src('./src/*.php')
  82. .pipe(gulp.dest('target/')); //输出
  83. });
  84.  
  85. // 监听任务 运行语句 gulp watch
  86. gulp.task('watch',function(){
  87. server.listen(port, function(err){
  88. if (err) {
  89. return console.log(err);
  90. }
  91.  
  92. //拷贝修改过的文件
  93. gulp.watch('src/**/**', function(e) {
  94. console.log(e);
  95. var oldPath = e.path;
  96. var newPath = oldPath.replace('\\src\\', '\\target\\');
  97. var newDirPathTemp = newPath.split("\\");
  98. var currentPath = fs.realpathSync('.');
  99. var newDirPath = [];
  100. for(var i = 0; i < newDirPathTemp.length-1; i++) {
  101. newDirPath[i] = newDirPathTemp[i];
  102. }
  103. newDirPath = newDirPath.join("\\");
  104. newDirPath = newDirPath.replace(currentPath, '');
  105. newDirPath = newDirPath.replace(/\\/g, "/");
  106. newDirPath = newDirPath.replace("/", "./");
  107. //console.log('当前路径'+newDirPath);
  108.  
  109. // 修改或增加时
  110. if('added' == e.type || 'changed' == e.type || 'renamed' == e.type) {
  111. // 判断目录是否存在,不存在则创建
  112. fs.exists(newDirPath, function(exists){
  113. if(exists){
  114. //console.log("文件夹存在");
  115. copyfile(oldPath, newPath);
  116. } else {
  117. //console.log("文件夹不存在,则创建目录");
  118. mkdirs(newDirPath);
  119.  
  120. // 延时,等待目录创建完成
  121. setTimeout(function(){
  122. copyfile(oldPath, newPath);
  123. }, 200);
  124. }
  125. });
  126. } else if('deleted' == e.type) { //删除
  127. fs.unlink(newPath, function(err){
  128. console.log('删除'+newPath+err);
  129. });
  130. }
  131. });
  132.  
  133. // 监听sass
  134. gulp.watch('src/css/*.scss', function(){
  135. gulp.run('sass');
  136. });
  137.  
  138. // 监听js
  139. gulp.watch('./src/js/*.js', function(){
  140. gulp.run('js');
  141. });
  142.  
  143. // 监听html
  144. gulp.watch('./src/*.php', function(){
  145. gulp.run('html');
  146. });
  147.  
  148. });
  149.  
  150. // 实时同步到浏览器
  151. browserSync.init(['target/css/*', 'target/js/*', 'target/*.html', 'target/*.php'], {
  152. /* 静态服务
  153. server: {
  154. baseDir: "target"
  155. }
  156. */
  157.  
  158. // 代理模式
  159. proxy: "dz.com"
  160. });
  161.  
  162. });

  

gulp监听文件变化,并拷贝到指定目录的更多相关文章

  1. gulp监听文件变化,并拷贝到指定目录(转)---参考记录

    ###暂时不支持目录修改.创建.删除.var gulp = require('gulp'); var fs = require('fs'); var path = require('path'); v ...

  2. 如何使用NodeJs来监听文件变化

    1.前言 在我们调试修改代码的时候,每修改一次代码,哪怕只是很小的修改,我们都需要手动重新build文件,然后再运行代码,看修改的效果,这样的效率特别低,对于开发者来说简直不能忍. 2.构建自动编译工 ...

  3. node.js监听文件变化

    前言 随着前端技术的飞速发展,前端开发也从原始的刀耕火种,向着工程化效率化的方向发展.在各种开发框架之外,打包编译等技术也是层出不穷,开发体验也是越来越好.例如HMR,让我们的更新可以即时可见,告别了 ...

  4. 利用WatchService监听文件变化

    在实现配置中心的多种方案中,有基于JDK7+的WatchService方法,其在单机应用中还是挺有实践的意义的. 代码如下: package com.longge.mytest; import jav ...

  5. shell遍历文件目录,监听文件变化,拼接字符串

    最近利用业余时间学习了shell 并做了个例子 实现的功能是 : 监听demo文件夹下的文件,只要新增了  .js的文件就把对应的文件名重组,拼接, 最后写入到demo.js里面. 文件结构如下 : ...

  6. gulp之sass 监听文件,自动编译

    gulpfile.js文件如下: var gulp = require('gulp'); var sass = require('gulp-sass'); gulp.task('default', f ...

  7. 玩转gulp之watch监听文件自动编译

    博客移至 https://www.dodoblog.cn/blog?id=5befc928e0feb34495b57035 我们在写页面的时候,用到sass less等css预处理器的时候,虽然写的很 ...

  8. Java NIO.2 使用Path接口来监听文件、文件夹变化

    Java7对NIO进行了大的改进,新增了许多功能: 对文件系统的访问提供了全面的支持 提供了基于异步Channel的IO 这些新增的IO功能简称为 NIO.2,依然在java.nio包下. 早期的Ja ...

  9. 【转载】java 监听文件或者文件夹变化的几种方式

    1.log4j的实现的文件内容变化监听 package com.jp.filemonitor; import org.apache.log4j.helpers.FileWatchdog; public ...

随机推荐

  1. FPGA作为从机与STM32进行SPI协议通信---Verilog实现 [转]

    一.SPI协议简要介绍 SPI,是英语Serial Peripheral Interface的缩写,顾名思义就是串行外围设备接口.SPI,是一种高速的,全双工,同步的通信总线,并且在芯片的管脚上只占用 ...

  2. Bitmap 的几种压缩方式

    微信的缩略图要求是不大于32k,这就需要对我的图片进行压缩.试了几种方法,一一道来. 代码如下 ByteArrayOutputStream baos =  new  ByteArrayOutputSt ...

  3. Ajax实现原理

    Ajax的工作 Ajax直觉认识:我们发送一个请求,但是这个请求比较特殊它是异步的,也就是说客户端是不会感觉到的.在发送这个请求的时候我们绑定了一个事件,这个事件会监控我们发送请求的状态,并且每次状态 ...

  4. Tomcat容器虚拟路径设置

    1.[官方文档]在tomcat\conf下server.xml中找到 <Host name="localhost" appBase="webapps" u ...

  5. android开发中的问题集锦(慢慢搬运...)

    1, android 设置ExpandableListView 系统默认箭头到右边 if(android.os.Build.VERSION.SDK_INT < android.os.Build. ...

  6. Trie树-字典查找

    描述 小Hi和小Ho是一对好朋友,出生在信息化社会的他们对编程产生了莫大的兴趣,他们约定好互相帮助,在编程的学习道路上一同前进. 这一天,他们遇到了一本词典,于是小Hi就向小Ho提出了那个经典的问题: ...

  7. [转] 从 C 到 Objective C 入门1

    转自: http://blog.liuhongwei.cn/iphone/objective-c/ 进军iPhone开发,最大的难点之一就是怪异的Objective C语法了.不过,了解之后才发现,原 ...

  8. ArrayList和Vector的区别

    3.ArrayList和Vector的区别 答: 这两个类都实现了List接口(List接口继承了Collection接口),他们都是有序集合,即存储在这两个集合中的元素的位置都是有顺序的,相当于一种 ...

  9. js⑤

    ##返回在制定位置的的字符  var result = str.charAt(1);  console.log(result);  console.log(str[1]); ##返回在指定的位置的字符 ...

  10. Java 社区论坛 - Sym 1.6.0 发布

    简介 Sym 是一个用 Java 写的现代化的社区论坛,欢迎来体验!(如果你需要搭建一个企业内网论坛,请使用 SymX) 非常详细的 Sym 功能点脑图 Sym 的诞生是有如下几点原因: (正版) 好 ...