webpage/task/task.js

/**
 * 
 * @authors Tony.Deng (dengtongyu123@163.com)
 * @date    2018-05-15 14:49:06
 * @version $Id$
 */
const gulp = require('gulp');
const webpack = require('webpack-stream');
const stylus = require('gulp-stylus');
const swig = require('gulp-swig');
const htmlmin = require('gulp-htmlmin');
const uglify = require('gulp-uglify');
const tmodjs = require('gulp-tmod');
const browserSync = require('browser-sync');
const reload = browserSync.reload;
const proxyMiddleware = require('http-proxy-middleware');
const babel = require('gulp-babel');
const runSequence = require('run-sequence');
const plumber = require('gulp-plumber');
const notify = require('gulp-notify');
const copy = require('gulp-contrib-copy');
const chalk = require('chalk');
const util = require('./util');
const watch = require('./watch');


function onErrorHandler(err) {
	notify.onError({
		title: "Webpage",
		subtitle: err.plugin + " error!",
		message: "Error: <%= error.message %>",
		sound: "Beep"
	})(err);
	this.emit('end');
}

init = (pathName) => {

	let pathConfig = util.initPath(pathName);
	let config = util.getConfig();
	let swigOpts = util.siwgConfig();

	//stylus任务
	gulp.task('stylus_build', function() {
		return gulp.src(pathConfig.styleBuildPath, config)
			.pipe(plumber({
				errorHandler: onErrorHandler
			}))
			.pipe(stylus({
				compress: true
			}))
			.pipe(gulp.dest(config.build))
			.on("end", reload);
	});

	//swig任务
	gulp.task('swig_build', function() {
		swigOpts = util.siwgConfig();
		return gulp.src(pathConfig.htmlBuildPath, config)
			.pipe(plumber({
				errorHandler: onErrorHandler
			}))
			.pipe(swig(swigOpts))
			.pipe(gulp.dest(config.build))
			.on("end", reload);
	});

	//htmlmin任务
	gulp.task('htmlmin_build', function() {
		return gulp.src(pathConfig.htmlminBuildPath, config)
			.pipe(plumber({
				errorHandler: onErrorHandler
			}))
			.pipe(htmlmin({
				collapseWhitespace: true
			}))
			.pipe(gulp.dest(config.build))
			.on("end", reload);
	});

	//babel任务
	gulp.task('babel_build', function() {
		return gulp.src(pathConfig.scriptBuildPath)
			.pipe(plumber({
				errorHandler: onErrorHandler
			}))
			.pipe(webpack({
				output: {
					filename: 'index.js',
				}
			}))
			.pipe(babel({
				presets: ['env']
			}))
			//.pipe(webpack( require('./webpack.config.js')(pathConfig.scriptBuildPath) ))
			.pipe(gulp.dest(pathConfig.babelOutPath))
			.on("end", reload);
	});

	//uglify任务
	gulp.task('uglify_build', function() {
		return gulp.src(pathConfig.uglifyBuildPath, {
				base: config.build
			})
			.pipe(plumber({
				errorHandler: onErrorHandler
			}))
			.pipe(uglify({
				ie8: true
			}))
			.pipe(gulp.dest(config.build))
			.on("end", reload);
	});

	//tmod任务
	gulp.task('tmod_build', function() {
		//console.log(pathConfig.tmodBuildPath);
		return gulp.src(pathConfig.tmodBuildPath)
			.pipe(plumber({
				errorHandler: onErrorHandler
			}))
			.pipe(tmodjs({
				templateBase: pathConfig.tmodBasePath,
				output: pathConfig.tmodOutPath,
				combo: false,
				type: 'cmd'
			}))
			.on("end", reload);
	});

	//watch html任务
	gulp.task('html_build', function() {
		runSequence('swig_build', 'htmlmin_build');
	});

	//watch js任务
	gulp.task('js_build', function() {
		//console.log('执行了js_build')
		runSequence('babel_build', 'uglify_build');
	});

	//watch tmodjs任务
	gulp.task('tmodjs_build', function() {
		runSequence('tmod_build', 'babel_build', 'uglify_build');
	});

	//server任务
	gulp.task('server', function() {

		//代理配置
		let proxy = proxyMiddleware(
			['/node_modules', '/res/images/userimage'], {
				//target:'http://172.26.68.35:8085'//
				target: 'http://node.dengtongyu.com'
				//target:'http://47.94.23.46:80'
			}
		);
		// let proxy2 = proxyMiddleware(
		// 	['/data/getPictureList'], {
		// 		target: 'http://localhost:8080'
		// 	}
		// );

		browserSync({
			host: 'localhost',
			open: 'external',
			startPath: '/pages/' + pathConfig.currPath,
			browser: 'google chrome',
			ghostMode: false, // 每个页面的镜像独立，不相互影响
			server: {
				baseDir: 'build',
				middleware: [proxy]
			}
		});

	});


	gulp.task('build', function() {
		runSequence('stylus_build', 'swig_build', 'htmlmin_build', 'tmod_build', 'babel_build', 'uglify_build', function() {
			console.log(chalk.green.bold(pathName + ' 打包完成！'));
		});
	});

	gulp.task('dev', function() {
		runSequence('stylus_build', 'swig_build', 'htmlmin_build', 'tmod_build', 'babel_build', 'uglify_build', 'server');
	});

}

copyTpl = (pathName) => {
	let pathConfig = util.initPath(pathName);
	let config = util.getConfig();
	//复制模板
	gulp.task('copy-pc', function() {
		return gulp.src(config.base + '/template/tpl-pc/**/*.*')
			.pipe(copy())
			.pipe(gulp.dest(config.base + '/pages/' + pathConfig.currPath));
	});
	gulp.task('copy-phone', function() {
		return gulp.src(config.base + '/template/tpl-phone/**/*.*')
			.pipe(copy())
			.pipe(gulp.dest(config.base + '/pages/' + pathConfig.currPath));
	});
}

exports.selectTpl = (pathName, type) => {
	copyTpl(pathName);
	if (type == 1) {
		runSequence('copy-pc', function() {
			init(pathName);
			runSequence('dev');
		});
	}

	if (type == 2) {
		runSequence('copy-phone', function() {
			init(pathName);
			runSequence('dev');
		});
	}
}

exports.dev = (pathName) => {
	init(pathName);
	runSequence('dev');
	watch.init(util.getPathConfig(), gulp);
}

exports.pack = (pathName) => {
	init(pathName);
	//console.log(chalk.green(pathName));
	runSequence('build');
}