基础支持 - 同步图片等资源 ¶

• 作者：KK

• 发表日期：2016.6.23

因为测试时要对dist目录下的代码运行测试，但如果这些CSS和img标签引用的图片呀字体呀那些都不存在的话页面也不能正常调试

所以src目录下添加/修改了图片的时候也应该同步一份到dist

其实这个是很简单的事情，但也是构成前端独立开发环境的一个环节

同步代码：

gulp.src('./src/**/**.{jpg,jpeg,png,bmp,gif,woff,ttf,map,ico}')
	.pipe(gulp.dest('./dist'))

监听同步 ¶

watch('./src/**/**.{jpg,jpeg,png,bmp,gif,woff,ttf,map,ico}')
	.on('add', function(file){
		console.log(file + ' 添加');
		gulp.src(file, {base : './src'})
			.pipe(gulp.dest('./dist'));
	})
	.on('change', function(file){
		console.log(file + ' 修改');
		gulp.src(file, {base : './src'})
			.pipe(gulp.dest('./dist'));
	})
	.on('unlink', function(file){
		console.log(file + ' 删除');
		var distFile = './dist/' + path.relative('./src', file); //计算相对路径
		fs.existsSync(distFile) && fs.unlink(distFile);
	});

说白了不就是指定文件后缀名的给复制过去么，不过其实还有些插件可以自动压缩图片到最佳大小，以免图片太大等

这些自己看着找来用吧，哈哈，继续下一节