基础支持 - 需要做个部署任务 ¶

• 作者：KK

• 发表日期：2016.6.23

先看看这个gulpfile

var gulp = require('gulp'),
	watch = require('gulp-watch'),
	minjs = require('gulp-uglify'),
	mincss = require('gulp-mini-css'),
	sass = require('gulp-sass'),
	layout = require('gulp-layout'),
	path = require('path'),
	fs = require('fs');
	
var paths = {
	src : path.normalize('../frontent'),
	dist : path.normalize('../web')
},
	srcOptions = {base : paths.src};

layout.config({
    workingPath : paths.src,
	layouts : [
		{
			layoutFile : '',
			files : [
				'login.html'
			]
		}
	]
});

//默认任务	
gulp.task('default', ['minjs', 'mincss', 'layout', 'assets']);

//压缩JS
gulp.task('minjs', function(){
	var buildJs = function(file){
		console.log(file + ' 发生变动');
		gulp.src(file, srcOptions)
			.pipe(minjs().on('error', function(error){
				console.error(error.message + '\n出错行号:' + error.lineNumber);
			}))
			.pipe(gulp.dest(paths.dist));
	};

	watch(paths.src + '/**/**.js')
		.on('add', buildJs)
		.on('change', buildJs)
		.on('unlink', unlinkDistFile);
});

//压缩CSS，编译SASS
gulp.task('mincss', function(){
	var buildCss = function(file){
		console.log(file + ' 发生变动');
		var stream = gulp.src(file, srcOptions);
		if(path.extname(file) == '.scss'){
			stream = stream.pipe(sass().on('error', sass.logError));
		}
		
		stream.pipe(mincss())
			.pipe(gulp.dest(paths.dist));
	};
	
	watch(paths.src + '/**/**.{css,scss}')
		.on('add', buildCss)
		.on('change', buildCss)
		.on('unlink', unlinkDistFile);
});

//合并layout
gulp.task('layout', function(){
	var buildHtml = function(file){
		gulp.src(file, srcOptions)
			.pipe(layout.run())
			.pipe(gulp.dest(paths.dist));
	};

	watch(paths.src + '/**/**.html')
		.on('add', buildHtml)
		.on('change', buildHtml)
		.on('unlink', unlinkDistFile);
});

//同步图片、字体、图标等
gulp.task('assets', function(){
	watch(paths.src + '/**/**.{jpg,jpeg,png,bmp,gif,woff,ttf,map,ico}', function(file){
		gulp.src(file, srcOptions)
			.pipe(gulp.dest(paths.dist));
	})
		.on('add', function(file){
			console.log(file + ' 添加');
			gulp.src(file, srcOptions)
				.pipe(gulp.dest(paths.dist));
		})
		.on('change', function(file){
			console.log(file + ' 修改');
			gulp.src(file, srcOptions)
				.pipe(gulp.dest(paths.dist));
		})
		.on('unlink', unlinkDistFile);
});

function unlinkDistFile(file){
	console.log(file + ' 删除');
	var distFile = paths.dist + '/' + path.relative(paths.src, file); //计算相对路径
	fs.existsSync(distFile) && fs.unlink(distFile);
}

以上构建代码用来开发一般没什么问题，接下来我们考虑一下发生这种情况会怎样：

• 情况1：

  有10个文件以上都要使用layout

  但是你修改了layout不会触发这10个文件进行构建，于是dist目录下的html文件代码没有新的layout修改内容

  要使dist目录下的html都有layout变化就必须修改这10个文件逐个触发？

• 情况2：

  为了整理项目，有一次清空了整个dist目录，然后要重新将文件构建过去，是不是又得一个个文件修改一下才行触发构建？

这时候就需要一个一次性构建的任务了，这个任务也很简单，我们将它命名为deploy吧：

gulp.task('deploy', function(){
	gulp.src(paths.src + '/**/**.{jpg,jpeg,png,bmp,gif,woff,ttf,map,ico}')
		.pipe(gulp.dest(paths.dist));
	
	gulp.src(paths.src + '/**/**.js')
		.pipe(minjs().on('error', function(error){
			console.log(error.message, error.lineNumber);
		}))
		.pipe(gulp.dest(paths.dist));
		
	gulp.src(paths.src + '/**/**.css')
		.pipe(mincss())
		.pipe(gulp.dest(paths.dist));
	
	gulp.src(paths.src + '/**/**.scss')
		.pipe(sass().on('error', sass.logError))
		.pipe(gulp.dest(paths.dist));
		
	gulp.src(paths.src + '/**/**.html')
		.pipe(layout.run())
		.pipe(gulp.dest(paths.dist));
});

于是只要执行gulp deploy命令就能一次性将图片字体资源复制、压缩JS、压缩CSS以及合并html到layout了

可以多看网上别人分享出来的gulpfile，以及一些QQ群的群共享里的，都有类似这个deploy的任务哦