gulp自动构建大纲

维护人:戴荔春 (6016)

说明

gulp自动构建知识体系大纲

目录

前言

新手可以直接看 hello word自动构建项目体验,先体验下自动构建的魅力

参考来源

前人栽树,后台乘凉,本文参考了以下来源

前置技术要求

gulp是基于Node.js开发的,所以需要注意

什么是gulp

gulp是前端开发过程中对代码进行构建的工具,通过gulp,我们可以轻易的管理项目,特别是前端项目中,可以轻易的将源码和部署包区分出来

为什么要用gulp

所有的技术都是服务于实际需求的,不满足需求的技术研究都是空中阁楼,gulp也不例外

gulp的简单使用

介绍gulp的安装与使用

全局安装gulp

注意,一般的项目中用到的gulp都建议采用全局安装

hello word 示例

全局安装好gulp后,可以创建一个hello word项目测试效果

注意

gulp自动构建之初体验

这一步,将会引导新人使用一个已搭建好的自动构建项目,来体验自动构建的魅力

hello word 自动构建项目体验

这个项目部署在本文作者的测试服务器,自动监听svn的变化,所以只需要提交svn即可刷新项目

gulp自动构建的原理解析

gulp自动构建的原理解析,介绍上面那个 hello word自动构建项目的实现方法以及原理

实现原理

上述自动构建项目,是基于 SVN自动更新方案获取最新源码以及Gulp Watch自动监听文件变化,以及Gulp 其它插件对文件进行操作输出部署,原理如下

gulp监听文件变动并自动构建部署文件

以下主要讲解如何通过gulp自动监听文件变化并自动构建部署文件

请注意,前提条件是已经安装好了gulp并成功运行hello word程序

示例项目下载

可以下载已经编写好的测试项目: autoBuildDemo.zip

安装依赖插件

本示例依赖于 gulp-clean,run-sequence,gulp-plumber这几个插件

编写gulpfile.js

编写可执行的gulpfile.js

//示例项目的名称就是这个,如需改变,换为对应项目名即可
var projectPath = '/test.dcloud.testGulpDemo';
var src = './src' + projectPath;
//也可以用../代表 当前gulpfile的上一级文件夹
var dest = './build' + projectPath+'';

var config = {
	clean:{
		src: dest
	},
	other:{
		src: src + "/**/*",
		dest: dest + "",
		svn:{
			src: src + "/**/.svn/**/*",
		}
	},
	watch:{
		src:src+'/gulpWatch.json'
	}
};
var gulp = require('gulp');

var clean = require('gulp-clean');
	//串行执行任务
var runSequence = require('run-sequence');

//错误抛出的补丁->防止异常情况下停止程序
var plumber = require('gulp-plumber');

var handleErrors = function(error){
	//继续监听
	console.log("~~~错误:"+error);
};
//情况以前目录
gulp.task('clean', function() {
	return gulp.src([
		config.clean.src
	])
	//异常处理的补丁-打上这个后就算出错也不会终止程序
	.pipe(plumber({
			errorHandler:handleErrors
		}))
	//强制删除,当目录不在gulp运行目录下时需要配置
	.pipe(clean({force: true}))
});

//处理其它,默认将目录下的文件输出到部署目录
//正式项目中可以做压缩等等事件
gulp.task('dealOthers', function() {
	//去除svn,有时候项目中的.svn文件夹是不需要部署的
	return gulp.src([config.other.src,  '!' + config.other.svn.src])
		.pipe(plumber({
			errorHandler:handleErrors
		}))
		.pipe(gulp.dest(config.other.dest));
});

// 看守
gulp.task('watch', function() {

	console.log("路径:"+config.watch.src);
	// 看守所有位在 dist/  目录下的档案，一旦有更动，便进行重整
//	gulp.watch(config.watch.src).on('change', function(file) {
//		console.log("改动");
//	});
	gulp.watch(config.watch.src, ['default']);

});

//注册一个默认任务-删除以前部署,然后重新部署
gulp.task('default', function(callback) {
	runSequence('clean', 'dealOthers',
		callback);
});

手动测试编译效果

测试自动监听构建效果

说明

gulp自动构建的更多应用

文件md5签名解决静态资源缓存和更新问题

请参考 文件md5签名解决静态资源缓存和更新问题

请注意,前端项目中,缓存问题是一个比较重要的问题,这篇文章中强调了自动构建解决缓存问题的必要性

gulp api

参考: gulp api

gulp 插件

参考: gulp 插件使用