Optimize workflow
This commit is contained in:
dengtongyu committed
1 parent
cec28fc0f3
commit
1f18052940
14 files changed
+11765
-451
No files matched your search
@@ -1,15 +1,16 @@
|
|||||||
#webpage 单页面开发工作流
|
webpage 单页面开发工作流
|
||||||
|
|
||||||
##初始化
|
初始化
|
||||||
```sh
|
```sh
|
||||||
npm install
|
npm install
|
||||||
|
|
||||||
##启动
|
创建新项目
|
||||||
npm start
|
npm run new
|
||||||
|
|
||||||
1 --- 创建开发目录（随机创建目录名）
|
开发已有项目
|
||||||
2 --- 创建开发目录（命名创建目录名）
|
npm run dev
|
||||||
3 --- 选择开发目录（输入目录名）
|
|
||||||
4 --- 构建目录
|
打包已有项目
|
||||||
|
npm run pack
|
||||||
|
|
||||||
```
|
```
|
||||||
@@ -0,0 +1,143 @@
|
|||||||
|
/**
|
||||||
|
*
|
||||||
|
* @authors Tony.Deng (dengtongyu123@163.com)
|
||||||
|
* @date 2018-05-14 16:44:06
|
||||||
|
* @version $Id$
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
const program = require('commander');
|
||||||
|
const inquirer = require('inquirer');
|
||||||
|
const util = require('./task/util');
|
||||||
|
const task = require('./task/task');
|
||||||
|
|
||||||
|
program
|
||||||
|
.version('0.1.0')
|
||||||
|
.command('new')
|
||||||
|
.alias('n')
|
||||||
|
.description('新建一个项目')
|
||||||
|
.option('-n, --name [pathName]', '构建路径名称')
|
||||||
|
.option('-t, --tpl [tplType]', '模版类型（pc or phone）')
|
||||||
|
.action(option => {
|
||||||
|
let config = Object.assign({
|
||||||
|
tpl: 0,
|
||||||
|
name: null
|
||||||
|
}, option)
|
||||||
|
|
||||||
|
//console.log(config)
|
||||||
|
|
||||||
|
let promps = [];
|
||||||
|
|
||||||
|
if(!config.name) {
|
||||||
|
promps.push({
|
||||||
|
type: 'input',
|
||||||
|
name: 'name',
|
||||||
|
message: '请输入需要创建的路径名:',
|
||||||
|
default: util.randomActName()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
if(!config.tpl) {
|
||||||
|
promps.push({
|
||||||
|
type: 'list',
|
||||||
|
name: 'tpl',
|
||||||
|
message: '请选择需要创建的模板：',
|
||||||
|
choices: [
|
||||||
|
{
|
||||||
|
name: '1. tpl-pc',
|
||||||
|
value: 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '2. tpl-phone',
|
||||||
|
value: 2
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
inquirer.prompt(promps).then(function (answers) {
|
||||||
|
//console.log('\n',answers)
|
||||||
|
option = Object.assign(answers,option);
|
||||||
|
//console.log(option);
|
||||||
|
//util.initPath(answers.name);
|
||||||
|
task.selectTpl(option.name,option.tpl);
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
program
|
||||||
|
.command('dev')
|
||||||
|
.alias('d')
|
||||||
|
.description('开发一个已存在的项目')
|
||||||
|
.option('-n, --name [pathName]', '开发路径名称')
|
||||||
|
.action(option => {
|
||||||
|
let config = Object.assign({
|
||||||
|
name: null
|
||||||
|
}, option)
|
||||||
|
|
||||||
|
//console.log(config)
|
||||||
|
|
||||||
|
let promps = [];
|
||||||
|
|
||||||
|
if(!config.name) {
|
||||||
|
promps.push({
|
||||||
|
type: 'input',
|
||||||
|
name: 'name',
|
||||||
|
message: '请输入需要开发的路径名:',
|
||||||
|
validate: function (input){
|
||||||
|
if(!input) {
|
||||||
|
return '不能为空'
|
||||||
|
}
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
inquirer.prompt(promps).then(function (answers) {
|
||||||
|
//console.log('\n',answers)
|
||||||
|
option = Object.assign(answers,option);
|
||||||
|
//console.log(option.name);
|
||||||
|
|
||||||
|
//util.initPath(answers.name);
|
||||||
|
task.dev(option.name);
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
program
|
||||||
|
.command('build')
|
||||||
|
.alias('b')
|
||||||
|
.description('打包构建一个已存在的项目')
|
||||||
|
.option('-n, --name [pathName]', '打包构建路径名称')
|
||||||
|
.action(option => {
|
||||||
|
let config = Object.assign({
|
||||||
|
name: null
|
||||||
|
}, option)
|
||||||
|
|
||||||
|
//console.log(config)
|
||||||
|
|
||||||
|
let promps = [];
|
||||||
|
|
||||||
|
if(!config.name) {
|
||||||
|
promps.push({
|
||||||
|
type: 'input',
|
||||||
|
name: 'name',
|
||||||
|
message: '请输入需要打包构建的路径名:',
|
||||||
|
validate: function (input){
|
||||||
|
if(!input) {
|
||||||
|
return '不能为空'
|
||||||
|
}
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
inquirer.prompt(promps).then(function (answers) {
|
||||||
|
//console.log('\n',answers)
|
||||||
|
option = Object.assign(answers,option);
|
||||||
|
//console.log(option);
|
||||||
|
task.pack(option.name);
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
program.parse(process.argv)
|
||||||
|
|
||||||
|
//console.log(program);
|
||||||
-176
@@ -1,176 +0,0 @@
|
|||||||
/**
|
|
||||||
*
|
|
||||||
* @authors Tony.Deng (dengtongyu123@163.com)
|
|
||||||
* @date 2017-05-17 15:09:29
|
|
||||||
* @version $Id$
|
|
||||||
*/
|
|
||||||
|
|
||||||
const gulp = require('gulp');
|
|
||||||
const gutil = require("gulp-util");
|
|
||||||
const runSequence = require('run-sequence');
|
|
||||||
const copy = require('gulp-contrib-copy');
|
|
||||||
|
|
||||||
|
|
||||||
//webPackConfig.entry.app.unshift("webpack-dev-server/client?http://localhost:8080/");
|
|
||||||
|
|
||||||
//初始化变量
|
|
||||||
let config = {
|
|
||||||
base: 'src',
|
|
||||||
build: 'build'
|
|
||||||
};
|
|
||||||
|
|
||||||
let pathConfig = {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
//提示
|
|
||||||
let LOG = {
|
|
||||||
DEFAULT: '',
|
|
||||||
ERROR: 'red',
|
|
||||||
GOOD: 'green',
|
|
||||||
WARN: 'yellow',
|
|
||||||
FUN: 'pink',
|
|
||||||
EM: 'cyan',
|
|
||||||
TIPS: 'gray'
|
|
||||||
};
|
|
||||||
let colorLog = function (text, color) {
|
|
||||||
let colors = {
|
|
||||||
red: 31,
|
|
||||||
green: 32,
|
|
||||||
yellow: 33,
|
|
||||||
blue: 34,
|
|
||||||
pink: 35,
|
|
||||||
cyan: 36,
|
|
||||||
gray: 90
|
|
||||||
};
|
|
||||||
return console.log('\033[' + (colors[color] || '00') + 'm' + text + '\033[0m');
|
|
||||||
};
|
|
||||||
|
|
||||||
let userInput = 1; //输入值
|
|
||||||
|
|
||||||
//复制模板
|
|
||||||
gulp.task('copy-pc', function () {
|
|
||||||
return gulp.src(config.base + '/template/tpl-pc/**/*.*')
|
|
||||||
.pipe(copy())
|
|
||||||
.pipe(gulp.dest(config.base + '/pages/' + pathName));
|
|
||||||
});
|
|
||||||
gulp.task('copy-phone', function () {
|
|
||||||
return gulp.src(config.base + '/template/tpl-phone/**/*.*')
|
|
||||||
.pipe(copy())
|
|
||||||
.pipe(gulp.dest(config.base + '/pages/' + pathName));
|
|
||||||
});
|
|
||||||
|
|
||||||
function setPath(pathName) {
|
|
||||||
|
|
||||||
pathConfig.currPath = pathName;
|
|
||||||
|
|
||||||
//stylus build目录
|
|
||||||
pathConfig.styleBuildPath = config.base + '/pages/' + pathName + '/**/!(_)*.styl';
|
|
||||||
|
|
||||||
//swig build目录
|
|
||||||
pathConfig.htmlBuildPath = config.base + '/pages/' + pathName + '/**/*.htm';
|
|
||||||
|
|
||||||
//htmlmin build目录
|
|
||||||
pathConfig.htmlminBuildPath = config.build + '/pages/' + pathName + '/**/*.html';
|
|
||||||
|
|
||||||
//wabpck build 目录
|
|
||||||
pathConfig.scriptBuildPath = config.base + '/pages/' + pathName + '/**/*.js';
|
|
||||||
pathConfig.webpackOutPath = config.build + '/pages/' + pathName;
|
|
||||||
|
|
||||||
//uglify build目录
|
|
||||||
pathConfig.uglifyBuildPath = config.build + '/pages/' + pathName + '/**/*.js';
|
|
||||||
|
|
||||||
//tmod build目录
|
|
||||||
pathConfig.tmodBuildPath = config.base + '/pages/' + pathName + '/**/*.tmod';
|
|
||||||
pathConfig.tmodBasePath =config.base + '/pages/';
|
|
||||||
pathConfig.tmodOutPath = config.base + '/script/tmodjs/';
|
|
||||||
|
|
||||||
require('./task')(pathConfig,config);
|
|
||||||
}
|
|
||||||
|
|
||||||
//随机路径名
|
|
||||||
function randomActName() {
|
|
||||||
let d = new Date();
|
|
||||||
let m = (d.getMonth() + 1) < 10 ? '0' + (d.getMonth() + 1) : (d.getMonth() + 1).toString();
|
|
||||||
let dd = d.getDate() < 10 ? '0' + d.getDate() : d.getDate();
|
|
||||||
let str = d.getFullYear() + m + dd + String.fromCharCode(Math.floor(Math.random() * 26) + "a".charCodeAt(0)) + Math.floor(Math.random() * 10);
|
|
||||||
d = m = null;
|
|
||||||
return str;
|
|
||||||
}
|
|
||||||
|
|
||||||
//选择模板
|
|
||||||
function selectTpl() {
|
|
||||||
colorLog('请选择需要创建的模板：', LOG.EM);
|
|
||||||
colorLog('1. tpl-pc\n2. tpl-phone', LOG.TIPS);
|
|
||||||
gets(function (choose) {
|
|
||||||
let input = choose.replace(/[\n\r]+/ig, '');
|
|
||||||
if (input == 1) {
|
|
||||||
runSequence('copy-pc', function () {
|
|
||||||
setPath(pathName);
|
|
||||||
runSequence('dev');
|
|
||||||
});
|
|
||||||
} else if (input == 2) {
|
|
||||||
runSequence('copy-phone', function () {
|
|
||||||
setPath(pathName);
|
|
||||||
runSequence('dev');
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
colorLog('没有该选项，请重新运行！', LOG.ERROR);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
//输入流
|
|
||||||
function gets(cb) {
|
|
||||||
process.stdin.resume();
|
|
||||||
process.stdin.setEncoding('utf8');
|
|
||||||
process.stdin.once('data', function (chunk) {
|
|
||||||
process.stdin.pause();
|
|
||||||
cb(chunk);
|
|
||||||
//process.stdin.end();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
gulp.task('default', function () {
|
|
||||||
colorLog('请选择执行的任务：', LOG.EM);
|
|
||||||
colorLog('1. random create\n2. name create\n3. dev\n4. pack', LOG.TIPS);
|
|
||||||
gets(function (text) {
|
|
||||||
userInput = text.replace(/[\n\r]+/ig, '');
|
|
||||||
if (userInput == 1) {
|
|
||||||
pathName = randomActName();
|
|
||||||
selectTpl();
|
|
||||||
} else if (userInput == 2) {
|
|
||||||
colorLog('请输入需要创建的路径名：', LOG.EM);
|
|
||||||
gets(function (name) {
|
|
||||||
pathName = name.replace(/[\n\r]+/ig, '');
|
|
||||||
selectTpl();
|
|
||||||
//setPath(pathName);
|
|
||||||
//runSequence('dev');
|
|
||||||
});
|
|
||||||
} else if (userInput == 3) {
|
|
||||||
colorLog('请输入页面路径名：', LOG.EM);
|
|
||||||
gets(function (name) {
|
|
||||||
pathName = name.replace(/[\n\r]+/ig, '');
|
|
||||||
setPath(pathName);
|
|
||||||
runSequence('dev');
|
|
||||||
});
|
|
||||||
} else if (userInput == 4) {
|
|
||||||
colorLog('请输入构建路径名：', LOG.EM);
|
|
||||||
gets(function (name) {
|
|
||||||
pathName = name.replace(/[\n\r]+/ig, '');
|
|
||||||
setPath(pathName);
|
|
||||||
runSequence('build');
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
colorLog('没有该选项，请重新运行！', LOG.ERROR);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
gulp.task('build', function (callback) {
|
|
||||||
runSequence('stylus_build','swig_build','htmlmin_build','tmod_build','webpack_build','uglify_build');
|
|
||||||
});
|
|
||||||
|
|
||||||
gulp.task('dev', function (callback) {
|
|
||||||
runSequence('stylus_build','swig_build','htmlmin_build','tmod_build','webpack_build','server');
|
|
||||||
});
|
|
||||||
Generated
+11211
File diff suppressed because it is too large.
Load diff
+11
-3
@@ -4,7 +4,9 @@
|
|||||||
"description": "web pages",
|
"description": "web pages",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "gulp"
|
"new": "node app new",
|
||||||
|
"dev": "node app dev",
|
||||||
|
"pack": "node app pack"
|
||||||
},
|
},
|
||||||
"author": "dengtongyu",
|
"author": "dengtongyu",
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
@@ -22,8 +24,14 @@
|
|||||||
"gulp-swig": "^0.8.0",
|
"gulp-swig": "^0.8.0",
|
||||||
"gulp-tmod": "^2.0.3",
|
"gulp-tmod": "^2.0.3",
|
||||||
"gulp-uglify": "^3.0.0",
|
"gulp-uglify": "^3.0.0",
|
||||||
"gulp-webpack": "^1.5.0",
|
|
||||||
"http-proxy-middleware": "^0.17.4",
|
"http-proxy-middleware": "^0.17.4",
|
||||||
"run-sequence": "^2.2.1"
|
"run-sequence": "^2.2.1",
|
||||||
|
"webpack-stream": "^4.0.3"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"chalk": "^2.4.1",
|
||||||
|
"commander": "^2.15.1",
|
||||||
|
"gulp-contrib-copy": "^0.1.3",
|
||||||
|
"inquirer": "^5.2.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"title": "node",
|
"title": "分手的打算",
|
||||||
"description":"node",
|
"description":"我是一个标题",
|
||||||
"keywords":"node"
|
"keywords":"我是一个标题"
|
||||||
}
|
}
|
||||||
@@ -1,7 +1,7 @@
|
|||||||
|
|
||||||
{% extends 'base.tpl' %}
|
{% extends 'base.tpl' %}
|
||||||
|
|
||||||
{% block title %}node-{% endblock %}
|
{% block title %}城市的-{% endblock %}
|
||||||
|
|
||||||
{% block head %}
|
{% block head %}
|
||||||
<link href="./index.css?v={[now()]}" rel="stylesheet">
|
<link href="./index.css?v={[now()]}" rel="stylesheet">
|
||||||
|
|||||||
@@ -1,3 +1,6 @@
|
|||||||
|
|
||||||
//加载弹窗组件（不用可去掉）
|
//加载弹窗组件（不用可去掉）
|
||||||
var dialog = require('../../script/extends/phone/dialog');
|
import log from '../../script/extends/phone/dialog';
|
||||||
|
|
||||||
|
log.showMsg('哈哈大大');
|
||||||
|
|
||||||
@@ -1,3 +1,3 @@
|
|||||||
|
|
||||||
//加载弹窗组件（不用可去掉）
|
//加载弹窗组件（不用可去掉）
|
||||||
var dialog = require('../../script/extends/phone/dialog');
|
import dialog from '../../script/extends/phone/dialog';
|
||||||
@@ -1,233 +0,0 @@
|
|||||||
/**
|
|
||||||
*
|
|
||||||
* @authors Tony.Deng (dengtongyu123@163.com)
|
|
||||||
* @date 2017-05-17 15:35:29
|
|
||||||
* @version $Id$
|
|
||||||
*/
|
|
||||||
|
|
||||||
const gulp = require('gulp');
|
|
||||||
const webpack = require('gulp-webpack');
|
|
||||||
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 lodash = require('lodash');
|
|
||||||
const path = require('path');
|
|
||||||
const plumber = require('gulp-plumber');
|
|
||||||
const notify = require('gulp-notify');
|
|
||||||
const babel = require('gulp-babel');
|
|
||||||
const runSequence = require('run-sequence');
|
|
||||||
|
|
||||||
let swigOpts = {
|
|
||||||
defaults: {
|
|
||||||
varControls: ['{[', ']}'],
|
|
||||||
cache: false
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
function onErrorHandler(err) {
|
|
||||||
notify.onError({
|
|
||||||
title: "Webpage",
|
|
||||||
subtitle: err.plugin + " error!",
|
|
||||||
message: "Error: <%= error.message %>",
|
|
||||||
sound: "Beep"
|
|
||||||
})(err);
|
|
||||||
this.emit('end');
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function pathType(filePath) {
|
|
||||||
let type = path.parse(filePath).ext;
|
|
||||||
if(type == '.styl') {
|
|
||||||
return 0;
|
|
||||||
}else if(type == '.htm') {
|
|
||||||
return 1;
|
|
||||||
}else if(type == '.html') {
|
|
||||||
return 2;
|
|
||||||
}else if(type == '.js') {
|
|
||||||
if(filePath.match(/build/ig)) {
|
|
||||||
return 4;
|
|
||||||
}else {
|
|
||||||
return 3;
|
|
||||||
}
|
|
||||||
}else if(type == '.tmod') {
|
|
||||||
return 5;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = function (pathConfig,config) {
|
|
||||||
|
|
||||||
let swigData = require('./' + config.base + '/pages/' + pathConfig.currPath + '/data.json');
|
|
||||||
swigData.now = function () {
|
|
||||||
return new Date().getTime()
|
|
||||||
};
|
|
||||||
swigOpts.defaults.locals = swigData;
|
|
||||||
|
|
||||||
let webPackConfig = require('./webpack.config.js')(pathConfig.currPath);
|
|
||||||
|
|
||||||
function watcherListFun(watchList) {
|
|
||||||
for (var i = 0; i < watchList.length; i++) {
|
|
||||||
if(watchList[i].taskName[0] == 'uglify_build' || watchList[i].taskName[0] == 'htmlmin_build') continue;
|
|
||||||
|
|
||||||
gulp.watch(watchList[i].watchPath,watchList[i].taskName).on('change', function (event) {
|
|
||||||
let fileType = pathType(event.path);
|
|
||||||
pathConfig[watchList[fileType].taskPath] = path.relative(__dirname,event.path);
|
|
||||||
//added为新增,deleted为删除，changed为改变
|
|
||||||
//变化类型 和 变化的文件的路径
|
|
||||||
console.log(event.type + ' : ' + pathConfig[watchList[fileType].taskPath]);
|
|
||||||
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let watchList = [{
|
|
||||||
watchPath:pathConfig.styleBuildPath,
|
|
||||||
taskName:['stylus_build'],
|
|
||||||
taskPath:'styleChangePath'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
watchPath:pathConfig.htmlBuildPath,
|
|
||||||
taskName:['html_build'],
|
|
||||||
taskPath:'swigChangePath'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
watchPath:pathConfig.htmlminBuildPath,
|
|
||||||
taskName:['htmlmin_build'],
|
|
||||||
taskPath:'htmlminChangePath'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
watchPath:pathConfig.scriptBuildPath,
|
|
||||||
taskName:['js_build'],
|
|
||||||
taskPath:'scriptChangePath'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
watchPath:pathConfig.uglifyBuildPath,
|
|
||||||
taskName:['uglify_build'],
|
|
||||||
taskPath:'uglifyChangePath'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
watchPath:pathConfig.tmodBuildPath,
|
|
||||||
taskName:['tmodjs_build'],
|
|
||||||
taskPath:'tmodChangePath'
|
|
||||||
}];
|
|
||||||
|
|
||||||
//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,proxy2]
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
watcherListFun(watchList);
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
//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 () {
|
|
||||||
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);
|
|
||||||
});
|
|
||||||
|
|
||||||
//webpack任务
|
|
||||||
gulp.task('webpack_build', function () {
|
|
||||||
return gulp.src(pathConfig.scriptBuildPath)
|
|
||||||
.pipe(plumber({errorHandler: onErrorHandler}))
|
|
||||||
.pipe(webpack( webPackConfig ))
|
|
||||||
.pipe(babel({
|
|
||||||
presets: ['env']
|
|
||||||
}))
|
|
||||||
.pipe(gulp.dest(pathConfig.webpackOutPath))
|
|
||||||
.on("end", reload);
|
|
||||||
});
|
|
||||||
|
|
||||||
//uglify任务
|
|
||||||
gulp.task('uglify_build', function () {
|
|
||||||
return gulp.src(pathConfig.uglifyBuildPath, {base: config.build})
|
|
||||||
.pipe(plumber({errorHandler: onErrorHandler}))
|
|
||||||
.pipe(uglify())
|
|
||||||
.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('webpack_build', 'uglify_build');
|
|
||||||
});
|
|
||||||
|
|
||||||
//watch tmodjs任务
|
|
||||||
gulp.task('tmodjs_build', function () {
|
|
||||||
runSequence('tmod_build', 'webpack_build', 'uglify_build');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
+227
@@ -0,0 +1,227 @@
|
|||||||
|
/**
|
||||||
|
*
|
||||||
|
* @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 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(babel({
|
||||||
|
presets: ['env']
|
||||||
|
}))
|
||||||
|
.pipe(webpack({
|
||||||
|
output: {
|
||||||
|
filename: 'index.js',
|
||||||
|
}
|
||||||
|
}))
|
||||||
|
.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())
|
||||||
|
.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(callback) {
|
||||||
|
runSequence('stylus_build', 'swig_build', 'htmlmin_build', 'tmod_build', 'babel_build', 'uglify_build');
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.task('dev', function(callback) {
|
||||||
|
runSequence('stylus_build', 'swig_build', 'htmlmin_build', 'tmod_build', 'babel_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);
|
||||||
|
runSequence('build');
|
||||||
|
}
|
||||||
+102
@@ -0,0 +1,102 @@
|
|||||||
|
/**
|
||||||
|
*
|
||||||
|
* @authors Tony.Deng (dengtongyu123@163.com)
|
||||||
|
* @date 2018-05-15 10:55:16
|
||||||
|
* @version $Id$
|
||||||
|
*/
|
||||||
|
|
||||||
|
const path = require('path');
|
||||||
|
|
||||||
|
let _pathConfig = null;
|
||||||
|
|
||||||
|
let _config = {
|
||||||
|
base: 'src',
|
||||||
|
build: 'build'
|
||||||
|
};
|
||||||
|
|
||||||
|
exports.initPath = (pathName) => {
|
||||||
|
|
||||||
|
_pathConfig = {};
|
||||||
|
|
||||||
|
_pathConfig.currPath = pathName;
|
||||||
|
|
||||||
|
//stylus build目录
|
||||||
|
_pathConfig.styleBuildPath = _config.base + '/pages/' + pathName + '/**/!(_)*.styl';
|
||||||
|
|
||||||
|
//swig build目录
|
||||||
|
_pathConfig.htmlBuildPath = _config.base + '/pages/' + pathName + '/**/*.htm';
|
||||||
|
|
||||||
|
//htmlmin build目录
|
||||||
|
_pathConfig.htmlminBuildPath = _config.build + '/pages/' + pathName + '/**/*.html';
|
||||||
|
|
||||||
|
//wabpck build 目录
|
||||||
|
_pathConfig.scriptBuildPath = _config.base + '/pages/' + pathName + '/index.js';
|
||||||
|
_pathConfig.babelOutPath = _config.build + '/pages/' + pathName;
|
||||||
|
|
||||||
|
//uglify build目录
|
||||||
|
_pathConfig.uglifyBuildPath = _config.build + '/pages/' + pathName + '/**/*.js';
|
||||||
|
|
||||||
|
//tmod build目录
|
||||||
|
_pathConfig.tmodBuildPath = _config.base + '/pages/' + pathName + '/**/*.tmod';
|
||||||
|
_pathConfig.tmodBasePath = _config.base + '/pages/';
|
||||||
|
_pathConfig.tmodOutPath = _config.base + '/script/tmodjs/';
|
||||||
|
|
||||||
|
return _pathConfig;
|
||||||
|
}
|
||||||
|
|
||||||
|
exports.getPathConfig = () => {
|
||||||
|
return _pathConfig;
|
||||||
|
}
|
||||||
|
|
||||||
|
exports.getConfig = () => {
|
||||||
|
return _config;
|
||||||
|
}
|
||||||
|
|
||||||
|
//随机路径名
|
||||||
|
exports.randomActName = () => {
|
||||||
|
let d = new Date();
|
||||||
|
let m = (d.getMonth() + 1) < 10 ? '0' + (d.getMonth() + 1) : (d.getMonth() + 1).toString();
|
||||||
|
let dd = d.getDate() < 10 ? '0' + d.getDate() : d.getDate();
|
||||||
|
let str = d.getFullYear() + m + dd + String.fromCharCode(Math.floor(Math.random() * 26) + "a".charCodeAt(0)) + Math.floor(Math.random() * 10);
|
||||||
|
|
||||||
|
return str;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
exports.siwgConfig = () => {
|
||||||
|
let url = '../' + _config.base + '/pages/' + _pathConfig.currPath + '/data.json';
|
||||||
|
delete require.cache[require.resolve(url)]
|
||||||
|
let swigData = require(url);
|
||||||
|
|
||||||
|
swigData.now = function () {
|
||||||
|
return new Date().getTime()
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
defaults: {
|
||||||
|
varControls: ['{[', ']}'],
|
||||||
|
cache: false,
|
||||||
|
locals:swigData
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
exports.pathType = (filePath) => {
|
||||||
|
let type = path.parse(filePath).ext;
|
||||||
|
if (type == '.styl') {
|
||||||
|
return 0;
|
||||||
|
} else if (type == '.htm') {
|
||||||
|
return 1;
|
||||||
|
} else if (type == '.html') {
|
||||||
|
return 2;
|
||||||
|
} else if (type == '.js') {
|
||||||
|
if (filePath.match(/build/ig)) {
|
||||||
|
return 4;
|
||||||
|
} else {
|
||||||
|
return 3;
|
||||||
|
}
|
||||||
|
} else if (type == '.tmod') {
|
||||||
|
return 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@@ -0,0 +1,53 @@
|
|||||||
|
/**
|
||||||
|
*
|
||||||
|
* @authors Tony.Deng (dengtongyu123@163.com)
|
||||||
|
* @date 2018-05-15 15:45:22
|
||||||
|
* @version $Id$
|
||||||
|
*/
|
||||||
|
|
||||||
|
const chalk = require('chalk');
|
||||||
|
//const util = require('./util');
|
||||||
|
|
||||||
|
|
||||||
|
exports.init = (pathConfig,gulp) => {
|
||||||
|
//let pathConfig = util.getPathConfig();
|
||||||
|
|
||||||
|
let watchList = [{
|
||||||
|
watchPath: pathConfig.styleBuildPath,
|
||||||
|
taskName: ['stylus_build'],
|
||||||
|
taskPath: 'styleChangePath'
|
||||||
|
}, {
|
||||||
|
watchPath: pathConfig.htmlBuildPath,
|
||||||
|
taskName: ['html_build'],
|
||||||
|
taskPath: 'swigChangePath'
|
||||||
|
}, {
|
||||||
|
watchPath: pathConfig.htmlminBuildPath,
|
||||||
|
taskName: ['htmlmin_build'],
|
||||||
|
taskPath: 'htmlminChangePath'
|
||||||
|
}, {
|
||||||
|
watchPath: pathConfig.scriptBuildPath,
|
||||||
|
taskName: ['js_build'],
|
||||||
|
taskPath: 'scriptChangePath'
|
||||||
|
}, {
|
||||||
|
watchPath: pathConfig.uglifyBuildPath,
|
||||||
|
taskName: ['uglify_build'],
|
||||||
|
taskPath: 'uglifyChangePath'
|
||||||
|
}, {
|
||||||
|
watchPath: pathConfig.tmodBuildPath,
|
||||||
|
taskName: ['tmodjs_build'],
|
||||||
|
taskPath: 'tmodChangePath'
|
||||||
|
}];
|
||||||
|
|
||||||
|
for (var i = 0; i < watchList.length; i++) {
|
||||||
|
if (watchList[i].taskName[0] == 'uglify_build' || watchList[i].taskName[0] == 'htmlmin_build') continue;
|
||||||
|
|
||||||
|
gulp.watch(watchList[i].watchPath, watchList[i].taskName).on('change', function(event) {
|
||||||
|
//let fileType = util.pathType(event.path);
|
||||||
|
//pathConfig[watchList[fileType].taskPath] = path.relative(__dirname, event.path);
|
||||||
|
//added为新增,deleted为删除，changed为改变
|
||||||
|
//变化类型 和 变化的文件的路径
|
||||||
|
console.log(chalk.green(event.type + ' : ' + event.path));
|
||||||
|
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,25 +0,0 @@
|
|||||||
/**
|
|
||||||
*
|
|
||||||
* @authors Tony.Deng (dengtongyu123@163.com)
|
|
||||||
* @date 2017-05-17 15:20:47
|
|
||||||
* @version $Id$
|
|
||||||
*/
|
|
||||||
|
|
||||||
const webpack = require('webpack');
|
|
||||||
|
|
||||||
module.exports = function(pathName) {
|
|
||||||
|
|
||||||
let path = pathName?pathName:'test';
|
|
||||||
|
|
||||||
let exportObj = {
|
|
||||||
|
|
||||||
//入口文件
|
|
||||||
entry: "./src/pages/"+path+"/index.js",
|
|
||||||
output: {
|
|
||||||
path: __dirname + "/build/pages/"+path,//打包后的文件存放的地方
|
|
||||||
filename: "index.js"//打包后输出文件的文件名
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return exportObj;
|
|
||||||
}
|
|
||||||
Reference in new issue
Block a user