基础支持 - 同步添加和删除 ¶

• 作者：KK

• 发表日期：2016.6.23

监听文件系统 章节提到过，gulp.watch这个方法是无法监听新文件的添加和删除的，旧文件的删除可以，但再重新添加旧文件一样的名字就不发生added事件了

在gulp里要解决这些问题目前我知道gulp-watch这个模块可以做到，先在项目目录下执行以下命令来安装gulp-watch模块：

npm install --save-dev gulp-watch

实现监听完整的添加、修改、删除 ¶

示例代码：

var gulp = require('gulp'),
	watch = require('gulp-watch');

gulp.task('default', function(){
	watch('./src/**/**.js')
		.on('add', function(file){
			console.log('添加了 ' + file);
		})
		.on('change', function(file){
			console.log('修改了 ' + file);
		})
		.on('unlink', function(file){
			console.log('删除了 ' + file);
		});
});

这样无论在src目录下怎么添加删除都可以监听到事件，所以不能指望gulp.watch能成事，咱们要借助gulp-watch模块来实现完善的文件变化监听

实现同步添加和删除 ¶

将以上示例代码完善后如下：

var gulp = require('gulp'),
	minjs = require('gulp-uglify'),
	watch = require('gulp-watch'),
	path = require('path'),
	fileSystem = require('fs');

gulp.task('default', function(){
	watch('./src/**/**.js')
		.on('add', buildJs)
		.on('change', buildJs)
		.on('unlink', function(file){
			//删除文件
			var distFile = './dist/' + path.relative('./src', file); //计算相对路径
			fileSystem.existsSync(distFile) && fileSystem.unlink(distFile);
		});
});

function buildJs(file){
	gulp.src(file, {base : './src'}) //指定这个文件
		.pipe(minjs().on('error', function(error){
			console.error(error.message + '\n出错行号:' + error.lineNumber);
		}))
		.pipe(gulp.dest('./dist'));
}

以上代码可以实现src里添加和修改时都将JS文件压缩并部署到dist目录

而当文件被删除的时候又可以删除dist下对应的文件

由于学习这些内容的人一般可能是不熟悉NodeJs的，所以我啰嗦一下

其中path和fs两个模块是NodeJs内置的模块，所以不用执行npm install...来安装

path主要处理一些关于目录路径的计算，fs主要负责文件的管理，自己搜索“NodeJs path“和“NodeJs fs“进行深入的学习，相信会对你实现更复杂的自动化构建环境有很大帮助