mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 12:29:55 +08:00
chore(scripts): update e2e prod build to work with ionic-app-scripts (#10083)
* chore(e2e): WIP to add files needed for app-scripts * chore(e2e): WIP one e2e test building but with errors * chore(e2e): move e2e.prod to working with app-scripts move shared functions into util, add support for debug flag when running e2e.prod / demos.prod which gets passed to app-scripts * chore(build): fix app-scripts build for all e2e and demos * chore(e2e): update ionic-angular import path * chore(build): update dev paths to work with prod * chore(e2e): get watch working with e2e prod * docs(scripts): update README for running e2e and demos closes #8411 closes #10023
This commit is contained in:
Brandy Carney
@ -1,5 +1,4 @@
|
||||
import { spawnSync } from 'child_process';
|
||||
import { accessSync, F_OK, readdirSync, readFileSync, stat, statSync } from 'fs';
|
||||
import { accessSync, F_OK, readFileSync, stat } from 'fs';
|
||||
import { dirname, join } from 'path';
|
||||
|
||||
import { dest, src, start, task } from 'gulp';
|
||||
@ -10,7 +9,7 @@ import { obj } from 'through2';
|
||||
import * as VinylFile from 'vinyl';
|
||||
|
||||
import { DEMOS_SRC_ROOT, DIST_DEMOS_ROOT, DIST_NAME, DEMOS_NAME, ES5, ES_2015, LOCAL_SERVER_PORT, SCRIPTS_ROOT } from '../constants';
|
||||
import { createTempTsConfig, getFolderInfo } from '../util';
|
||||
import { createTempTsConfig, getFolderInfo, getFolders, runAppScripts } from '../util';
|
||||
|
||||
task('demos.prod', demosBuild);
|
||||
|
||||
@ -68,18 +67,24 @@ task('demos.compileTests', (done: Function) => {
|
||||
let folderInfo = getFolderInfo();
|
||||
|
||||
if (folderInfo.componentName && folderInfo.componentTest) {
|
||||
buildTest(folderInfo.componentName);
|
||||
buildTest(folderInfo);
|
||||
} else {
|
||||
buildAllTests(done);
|
||||
}
|
||||
});
|
||||
|
||||
function buildTest(folderName: string) {
|
||||
let includeGlob = [`./dist/demos/${folderName}/*.ts`];
|
||||
let pathToWriteFile = `${DIST_DEMOS_ROOT}/${folderName}/tsconfig.json`;
|
||||
function buildTest(folderInfo: any) {
|
||||
let includeGlob = [`./dist/demos/${folderInfo.componentName}/*.ts`];
|
||||
let pathToWriteFile = `${DIST_DEMOS_ROOT}/${folderInfo.componentName}/tsconfig.json`;
|
||||
|
||||
createTempTsConfig(includeGlob, ES5, ES_2015, `${DEMOS_SRC_ROOT}/tsconfig.json`, pathToWriteFile);
|
||||
return runAppScripts(folderName);
|
||||
|
||||
let sassConfigPath = 'scripts/demos/sass.config.js';
|
||||
|
||||
let appEntryPoint = `dist/demos/${folderInfo.componentName}/main.ts`;
|
||||
let distDir = `dist/demos/${folderInfo.componentName}/`;
|
||||
|
||||
return runAppScripts(folderInfo, sassConfigPath, appEntryPoint, distDir);
|
||||
}
|
||||
|
||||
function buildAllTests(done: Function) {
|
||||
@ -89,7 +94,11 @@ function buildAllTests(done: Function) {
|
||||
folders.forEach(folder => {
|
||||
stat(`./dist/demos/${folder}/app.module.ts`, function(err, stat) {
|
||||
if (err == null) {
|
||||
const promise = buildTest(folder);
|
||||
let folderInfo = {
|
||||
componentName: folder,
|
||||
componentTest: 'basic'
|
||||
};
|
||||
const promise = buildTest(folderInfo);
|
||||
promises.push(promise);
|
||||
}
|
||||
});
|
||||
@ -102,45 +111,6 @@ function buildAllTests(done: Function) {
|
||||
});
|
||||
}
|
||||
|
||||
function runAppScripts(folderName: string) {
|
||||
console.log('Running app scripts with', folderName);
|
||||
|
||||
let sassConfigPath = 'scripts/demos/sass.config.js';
|
||||
|
||||
let appEntryPoint = `dist/demos/${folderName}/main.ts`;
|
||||
let distDir = `dist/demos/${folderName}/`;
|
||||
|
||||
let tsConfig = distDir + 'tsconfig.json';
|
||||
|
||||
try {
|
||||
const scriptsCmd = spawnSync('ionic-app-scripts',
|
||||
['build',
|
||||
'--prod',
|
||||
'--sass', sassConfigPath,
|
||||
'--appEntryPoint', appEntryPoint,
|
||||
'--srcDir', distDir,
|
||||
'--wwwDir', distDir,
|
||||
'--tsconfig', tsConfig
|
||||
]);
|
||||
|
||||
if (scriptsCmd.status !== 0) {
|
||||
return Promise.reject(scriptsCmd.stderr.toString());
|
||||
}
|
||||
|
||||
console.log(scriptsCmd.output.toString());
|
||||
return Promise.resolve();
|
||||
} catch (ex) {
|
||||
return Promise.reject(ex);
|
||||
}
|
||||
}
|
||||
|
||||
function getFolders(dir) {
|
||||
return readdirSync(dir)
|
||||
.filter(function(file) {
|
||||
return statSync(join(dir, file)).isDirectory();
|
||||
});
|
||||
}
|
||||
|
||||
task('demos.watchProd', (done: Function) => {
|
||||
const folderInfo = getFolderInfo();
|
||||
let demoTestPath = DEMOS_SRC_ROOT;
|
||||
|
||||
@ -1,36 +1,42 @@
|
||||
import { accessSync, F_OK, readFileSync, writeFileSync } from 'fs';
|
||||
import { accessSync, F_OK, readFileSync, stat } from 'fs';
|
||||
import { dirname, join } from 'path';
|
||||
|
||||
import * as glob from 'glob';
|
||||
import { dest, src, start, task } from 'gulp';
|
||||
import * as gulpif from 'gulp-if';
|
||||
import * as watch from 'gulp-watch';
|
||||
import { template } from 'lodash';
|
||||
import * as rollup from 'rollup';
|
||||
import * as nodeResolve from 'rollup-plugin-node-resolve';
|
||||
import * as commonjs from 'rollup-plugin-commonjs';
|
||||
import * as runSequence from 'run-sequence';
|
||||
import { obj } from 'through2';
|
||||
import * as VinylFile from 'vinyl';
|
||||
|
||||
import { DIST_E2E_COMPONENTS_ROOT, DIST_E2E_ROOT, DIST_NAME, E2E_NAME, ES5, ES_2015, LOCAL_SERVER_PORT, PROJECT_ROOT, SCRIPTS_ROOT, SRC_COMPONENTS_ROOT, SRC_ROOT } from '../constants';
|
||||
import { createTempTsConfig, deleteFiles, getFolderInfo, runNgc } from '../util';
|
||||
import { DIST_E2E_ROOT, DIST_NAME, E2E_NAME, ES5, ES_2015, LOCAL_SERVER_PORT, DEMOS_SRC_ROOT, SCRIPTS_ROOT, SRC_ROOT } from '../constants';
|
||||
import { createTempTsConfig, getFolderInfo, getFolders, runAppScripts} from '../util';
|
||||
|
||||
task('e2e.prod', e2eBuild);
|
||||
|
||||
function e2eBuild(done: (err: any) => void) {
|
||||
runSequence(
|
||||
'e2e.copyIonic',
|
||||
'e2e.clean',
|
||||
'e2e.polyfill',
|
||||
'e2e.copySource',
|
||||
'e2e.compileTests',
|
||||
'e2e.copyExternalDependencies',
|
||||
'e2e.sass',
|
||||
'e2e.fonts',
|
||||
'e2e.bundleProd',
|
||||
'e2e.compileTests',
|
||||
done);
|
||||
}
|
||||
|
||||
task('e2e.copyIonic', (done: (err: any) => void) => {
|
||||
runSequence(
|
||||
'compile.release',
|
||||
'release.compileSass',
|
||||
'release.fonts',
|
||||
'release.sass',
|
||||
'release.createUmdBundle',
|
||||
done);
|
||||
});
|
||||
|
||||
task('e2e.copySource', (done: Function) => {
|
||||
|
||||
const buildConfig = require('../../build/config');
|
||||
@ -44,7 +50,7 @@ task('e2e.copySource', (done: Function) => {
|
||||
|
||||
function createIndexHTML() {
|
||||
const indexTemplate = readFileSync(`${SCRIPTS_ROOT}/${E2E_NAME}/e2e.template.prod.html`);
|
||||
const indexTs = readFileSync(`${SCRIPTS_ROOT}/${E2E_NAME}/entry.ts`);
|
||||
const indexTs = readFileSync(`${SCRIPTS_ROOT}/${E2E_NAME}/main.ts`);
|
||||
|
||||
return obj(function (file, enc, next) {
|
||||
this.push(new VinylFile({
|
||||
@ -55,7 +61,7 @@ task('e2e.copySource', (done: Function) => {
|
||||
this.push(new VinylFile({
|
||||
base: file.base,
|
||||
contents: new Buffer(indexTs),
|
||||
path: join(dirname(file.path), 'entry.ts'),
|
||||
path: join(dirname(file.path), 'main.ts'),
|
||||
}));
|
||||
next(null, file);
|
||||
});
|
||||
@ -97,108 +103,64 @@ task('e2e.copySource', (done: Function) => {
|
||||
|
||||
task('e2e.compileTests', (done: Function) => {
|
||||
let folderInfo = getFolderInfo();
|
||||
buildE2ETests(folderInfo, done);
|
||||
});
|
||||
|
||||
function buildE2ETests(folderInfo: any, done: Function) {
|
||||
let includeGlob = ['./components/*/test/*/app.module.ts', './components/*/test/*/entry.ts'];
|
||||
if (folderInfo.componentName && folderInfo.componentTest) {
|
||||
includeGlob = [
|
||||
`./components/${folderInfo.componentName}/test/${folderInfo.componentTest}/app.module.ts`,
|
||||
`./components/${folderInfo.componentName}/test/${folderInfo.componentTest}/entry.ts`,
|
||||
];
|
||||
}
|
||||
createTempTsConfig(includeGlob, ES5, ES_2015, `${PROJECT_ROOT}/tsconfig.json`, `${DIST_E2E_ROOT}/tsconfig.json`);
|
||||
runNgc(`${DIST_E2E_ROOT}/tsconfig.json`, (err) => {
|
||||
if (err) {
|
||||
done(err);
|
||||
return;
|
||||
}
|
||||
// clean up any .ts files that remain
|
||||
deleteFiles([`${DIST_E2E_ROOT}/**/*.ts`, `!${DIST_E2E_ROOT}/**/*.ngfactory.ts`, `!${DIST_E2E_ROOT}/**/*.d.ts`], done);
|
||||
});
|
||||
}
|
||||
|
||||
task('e2e.bundleProd', (done) => {
|
||||
let includeGlob = `${DIST_E2E_ROOT}/components/*/test/*/entry.js`;
|
||||
let folderInfo = getFolderInfo();
|
||||
if (folderInfo.componentName && folderInfo.componentTest) {
|
||||
includeGlob = `${DIST_E2E_ROOT}/components/${folderInfo.componentName}/test/${folderInfo.componentTest}/entry.js`;
|
||||
}
|
||||
glob(includeGlob, {}, function (er, files) {
|
||||
var directories = files.map(function (file) {
|
||||
return dirname(file);
|
||||
});
|
||||
|
||||
let indexFileContents = directories.map(function (dir) {
|
||||
let testName = dir.replace(`${DIST_E2E_ROOT}/components/`, '');
|
||||
let fileName = dir.replace(`${PROJECT_ROOT}`, '');
|
||||
return `<p><a href="${fileName}/index.html">${testName}</a></p>`;
|
||||
}, []);
|
||||
|
||||
writeFileSync(`${DIST_E2E_ROOT}/index.html`,
|
||||
'<!DOCTYPE html><html lang="en"><head></head><body style="width: 500px; margin: 100px auto">\n' +
|
||||
indexFileContents.join('\n') +
|
||||
'</center></body></html>'
|
||||
);
|
||||
|
||||
createBundles(files).then(() => {
|
||||
done();
|
||||
}).catch(err => {
|
||||
done(err);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function createBundles(files: string[]) {
|
||||
let start;
|
||||
if (!files) {
|
||||
return Promise.reject(new Error('list of files is null'));
|
||||
} else if (files.length === 0) {
|
||||
return Promise.resolve();
|
||||
buildTest(folderInfo);
|
||||
} else {
|
||||
const outputFileName = join(dirname(files[0]), 'app.bundle.js');
|
||||
start = Date.now();
|
||||
return bundle(files[0], outputFileName).then(() => {
|
||||
const end = Date.now();
|
||||
const seconds = (end - start) / 1000;
|
||||
console.log(`Took ${seconds} seconds to process ${files[0]}`);
|
||||
const remainingFiles = files.concat();
|
||||
remainingFiles.shift();
|
||||
return createBundles(remainingFiles);
|
||||
}).catch(err => {
|
||||
return Promise.reject(err);
|
||||
});
|
||||
buildAllTests(done);
|
||||
}
|
||||
});
|
||||
|
||||
function buildTest(folderInfo: any) {
|
||||
let includeGlob = [`./dist/e2e/components/${folderInfo.componentName}/test/${folderInfo.componentTest}/*.ts`];
|
||||
let pathToWriteFile = `${DIST_E2E_ROOT}/components/${folderInfo.componentName}/test/${folderInfo.componentTest}/tsconfig.json`;
|
||||
|
||||
createTempTsConfig(includeGlob, ES5, ES_2015, `${DEMOS_SRC_ROOT}/tsconfig.json`, pathToWriteFile);
|
||||
|
||||
let sassConfigPath = 'scripts/e2e/sass.config.js';
|
||||
|
||||
let appEntryPoint = `dist/e2e/components/${folderInfo.componentName}/test/${folderInfo.componentTest}/main.ts`;
|
||||
let distDir = `dist/e2e/components/${folderInfo.componentName}/test/${folderInfo.componentTest}/`;
|
||||
|
||||
return runAppScripts(folderInfo, sassConfigPath, appEntryPoint, distDir);
|
||||
}
|
||||
|
||||
function bundle(inputFile: string, outputFile: string): Promise<any> {
|
||||
console.log(`Starting rollup on ${inputFile} ... writing to ${outputFile}`);
|
||||
return rollup.rollup({
|
||||
entry: inputFile,
|
||||
plugins: [
|
||||
commonjs(),
|
||||
nodeResolve({
|
||||
module: true,
|
||||
jsnext: true,
|
||||
main: true,
|
||||
extensions: ['.js']
|
||||
})
|
||||
]
|
||||
}).then(bundle => {
|
||||
return bundle.write({
|
||||
format: 'iife',
|
||||
dest: outputFile,
|
||||
function buildAllTests(done: Function) {
|
||||
let folders = getFolders('./dist/e2e/components');
|
||||
let promises: Promise<any>[] = [];
|
||||
|
||||
folders.forEach(folder => {
|
||||
console.log(folder);
|
||||
stat(`./dist/e2e/components/${folder}/test`, function(err, stat) {
|
||||
if (err == null) {
|
||||
let testFolders = getFolders(`./dist/e2e/components/${folder}/test`);
|
||||
|
||||
testFolders.forEach(test => {
|
||||
console.log('build test for ', folder, test);
|
||||
let folderInfo = {
|
||||
componentName: folder,
|
||||
componentTest: test
|
||||
};
|
||||
const promise = buildTest(folderInfo);
|
||||
promises.push(promise);
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
Promise.all(promises).then(() => {
|
||||
done();
|
||||
}).catch(err => {
|
||||
done(err);
|
||||
});
|
||||
}
|
||||
|
||||
task('e2e.watchProd', ['e2e.copyExternalDependencies', 'e2e.sass', 'e2e.fonts'], (done: Function) => {
|
||||
task('e2e.watchProd', (done: Function) => {
|
||||
const folderInfo = getFolderInfo();
|
||||
let e2eTestPath = SRC_COMPONENTS_ROOT;
|
||||
let e2eTestPath = SRC_ROOT;
|
||||
|
||||
if (folderInfo.componentName && folderInfo.componentTest) {
|
||||
e2eTestPath = join(SRC_COMPONENTS_ROOT, folderInfo.componentName, 'test', folderInfo.componentTest, 'app.module.ts');
|
||||
e2eTestPath = join(`${SRC_ROOT}/components/${folderInfo.componentName}/test/${folderInfo.componentTest}/app.module.ts`);
|
||||
}
|
||||
|
||||
try {
|
||||
@ -208,13 +170,13 @@ task('e2e.watchProd', ['e2e.copyExternalDependencies', 'e2e.sass', 'e2e.fonts'],
|
||||
return;
|
||||
}
|
||||
|
||||
if (e2eComponentsExists()) {
|
||||
if (e2eComponentsExists(folderInfo)) {
|
||||
// already generated the e2e directory
|
||||
e2eWatch(folderInfo.componentName, folderInfo.componentTest);
|
||||
|
||||
} else {
|
||||
// generate the e2e directory
|
||||
console.log('Generated e2e builds first...');
|
||||
console.log('Generate e2e builds first...');
|
||||
e2eBuild(() => {
|
||||
e2eWatch(folderInfo.componentName, folderInfo.componentTest);
|
||||
});
|
||||
@ -224,7 +186,7 @@ task('e2e.watchProd', ['e2e.copyExternalDependencies', 'e2e.sass', 'e2e.fonts'],
|
||||
function e2eWatch(componentName: string, componentTest: string) {
|
||||
// If any tests change within components then run e2e.resources.
|
||||
watch([
|
||||
'src/components/*/test/**/*'
|
||||
'e2e/src/**/*'
|
||||
],
|
||||
function (file) {
|
||||
console.log('start e2e.resources - ' + JSON.stringify(file.history, null, 2));
|
||||
@ -248,16 +210,27 @@ function e2eWatch(componentName: string, componentTest: string) {
|
||||
start('e2e.sass');
|
||||
});
|
||||
|
||||
console.log(`http://localhost:${LOCAL_SERVER_PORT}/${DIST_NAME}/${E2E_NAME}/components/${componentName}/test/${componentTest}/`);
|
||||
let serverUrl = `http://localhost:${LOCAL_SERVER_PORT}/${DIST_NAME}/${E2E_NAME}`;
|
||||
if (componentName) {
|
||||
serverUrl += `/${componentName}`;
|
||||
}
|
||||
|
||||
console.log(serverUrl);
|
||||
|
||||
start('e2e.serve');
|
||||
}
|
||||
|
||||
function e2eComponentsExists(): boolean {
|
||||
function e2eComponentsExists(folderInfo: any): boolean {
|
||||
let componentPath = `${DIST_E2E_ROOT}/components`;
|
||||
|
||||
if (folderInfo.componentName && folderInfo.componentTest) {
|
||||
componentPath += `/${folderInfo.componentName}/test/${folderInfo.componentTest}/build`;
|
||||
}
|
||||
|
||||
try {
|
||||
accessSync(DIST_E2E_COMPONENTS_ROOT, F_OK);
|
||||
accessSync(componentPath, F_OK);
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user