Skip to content

chore: use gulp-connect as webserver #2409

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Dec 28, 2016
Merged

chore: use gulp-connect as webserver #2409

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,11 +67,11 @@
"gulp-clean": "^0.3.2",
"gulp-clean-css": "^2.3.0",
"gulp-cli": "^1.2.2",
"gulp-connect": "^5.0.0",
"gulp-htmlmin": "^3.0.0",
"gulp-if": "^2.0.2",
"gulp-markdown": "^1.2.0",
"gulp-sass": "^2.3.2",
"gulp-server-livereload": "^1.8.2",
"gulp-shell": "^0.5.2",
"gulp-sourcemaps": "^1.6.0",
"gulp-transform": "^1.1.0",
Expand Down
35 changes: 15 additions & 20 deletions tools/gulp/task_helpers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@ const gulpClean = require('gulp-clean');
const gulpMerge = require('merge2');
const gulpRunSequence = require('run-sequence');
const gulpSass = require('gulp-sass');
const gulpServer = require('gulp-server-livereload');
const gulpSourcemaps = require('gulp-sourcemaps');
const gulpAutoprefixer = require('gulp-autoprefixer');
const gulpConnect = require('gulp-connect');
const resolveBin = require('resolve-bin');


Expand Down Expand Up @@ -167,7 +167,8 @@ export function buildAppTask(appName: string) {
return (done: () => void) => {
gulpRunSequence(
'clean',
['build:components', ...buildTasks],
'build:components',
[...buildTasks],
done
);
};
Expand All @@ -183,29 +184,23 @@ export function vendorTask() {
}));
}

export type livereloadOptions = boolean | {
enable: boolean;
filter: (filename: string, callback: (isAllowed: boolean) => void) => void;
}

/** Create a task that serves the dist folder. */
export function serverTask(liveReload: livereloadOptions = true,
streamCallback: (stream: NodeJS.ReadWriteStream) => void = null) {

export function serverTask(livereload = true) {
return () => {
const stream = gulp.src('dist').pipe(gulpServer({
livereload: liveReload,
fallback: 'index.html',
port: 4200
}));

if (streamCallback) {
streamCallback(stream);
}
return stream;
gulpConnect.server({
root: 'dist/',
livereload: livereload,
port: 4200,
fallback: 'dist/index.html'
});
};
}

/** Triggers a reload when livereload is enabled and a gulp-connect server is running. */
export function triggerLivereload() {
gulp.src('dist').pipe(gulpConnect.reload());
}


/** Create a task that's a sequence of other tasks. */
export function sequenceTask(...args: any[]) {
Expand Down
11 changes: 7 additions & 4 deletions tools/gulp/tasks/components.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,10 @@ import * as path from 'path';
import {
DIST_COMPONENTS_ROOT, PROJECT_ROOT, COMPONENTS_DIR, HTML_MINIFIER_OPTIONS, LICENSE_BANNER
} from '../constants';
import {sassBuildTask, tsBuildTask, execNodeTask, copyTask, sequenceTask} from '../task_helpers';
import {
sassBuildTask, tsBuildTask, execNodeTask, copyTask, sequenceTask,
triggerLivereload
} from '../task_helpers';

// No typings for these.
const inlineResources = require('../../../scripts/release/inline-resources');
Expand All @@ -27,9 +30,9 @@ const tsconfigPath = path.relative(PROJECT_ROOT, path.join(COMPONENTS_DIR, 'tsco

/** [Watch task] Rebuilds (ESM output) whenever ts, scss, or html sources change. */
task(':watch:components', () => {
watch(path.join(COMPONENTS_DIR, '**/*.ts'), ['build:components']);
watch(path.join(COMPONENTS_DIR, '**/*.scss'), ['build:components']);
watch(path.join(COMPONENTS_DIR, '**/*.html'), ['build:components']);
watch(path.join(COMPONENTS_DIR, '**/*.ts'), ['build:components', triggerLivereload]);
watch(path.join(COMPONENTS_DIR, '**/*.scss'), ['build:components', triggerLivereload]);
watch(path.join(COMPONENTS_DIR, '**/*.html'), ['build:components', triggerLivereload]);
});


Expand Down
24 changes: 7 additions & 17 deletions tools/gulp/tasks/development.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,37 +4,27 @@ import * as path from 'path';
import {DIST_ROOT, SOURCE_ROOT} from '../constants';
import {
sassBuildTask, tsBuildTask, copyTask, buildAppTask, vendorTask,
serverTask, sequenceTask
serverTask, sequenceTask, triggerLivereload
} from '../task_helpers';


const appDir = path.join(SOURCE_ROOT, 'demo-app');
const outDir = DIST_ROOT;
const LIVERELOAD_PATTERNS = [
/material\.umd\.js$/,
/-demo\.[a-z]+$/,
/\/theming\/prebuilt/
];

task(':watch:devapp', () => {
watch(path.join(appDir, '**/*.ts'), [':build:devapp:ts']);
watch(path.join(appDir, '**/*.scss'), [':build:devapp:scss']);
watch(path.join(appDir, '**/*.html'), [':build:devapp:assets']);
watch(path.join(appDir, '**/*.ts'), [':build:devapp:ts', triggerLivereload]);
watch(path.join(appDir, '**/*.scss'), [':build:devapp:scss', triggerLivereload]);
watch(path.join(appDir, '**/*.html'), [':build:devapp:assets', triggerLivereload]);
});


task(':build:devapp:vendor', vendorTask());
task(':build:devapp:ts', ['build:components'], tsBuildTask(appDir));
task(':build:devapp:scss', [':build:components:scss'], sassBuildTask(outDir, appDir));
task(':build:devapp:ts', tsBuildTask(appDir));
task(':build:devapp:scss', sassBuildTask(outDir, appDir));
task(':build:devapp:assets', copyTask(appDir, outDir));
task('build:devapp', buildAppTask('devapp'));

task(':serve:devapp', serverTask({
enable: true,
filter: (filename: string, callback: Function) => {
callback(LIVERELOAD_PATTERNS.some(pattern => pattern.test(filename)));
}
}));
task(':serve:devapp', serverTask(true));

task('serve:devapp', ['build:devapp'], sequenceTask(
[':serve:devapp', ':watch:components', ':watch:devapp']
Expand Down
16 changes: 7 additions & 9 deletions tools/gulp/tasks/e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,12 @@ import {
} from '../task_helpers';

const gulpRunSequence = require('run-sequence');
const gulpConnect = require('gulp-connect');

const appDir = path.join(SOURCE_ROOT, 'e2e-app');
const outDir = DIST_ROOT;
const PROTRACTOR_CONFIG_PATH = path.join(PROJECT_ROOT, 'test/protractor.conf.js');

/** Method to stop a running e2e web server, which may have not exited properly */
let stopE2eServer = () => {};

task(':watch:e2eapp', () => {
watch(path.join(appDir, '**/*.ts'), [':build:e2eapp:ts']);
watch(path.join(appDir, '**/*.html'), [':build:e2eapp:assets']);
Expand All @@ -25,10 +23,10 @@ task(':watch:e2eapp', () => {
task(':build:e2eapp:vendor', vendorTask());

/** Builds e2e app ts to js. */
task(':build:e2eapp:ts', [':build:components:ts'], tsBuildTask(appDir));
task(':build:e2eapp:ts', tsBuildTask(appDir));

/** No-op (needed by buildAppTask). */
task(':build:e2eapp:scss', [':build:components:scss'], sassBuildTask(outDir, appDir));
task(':build:e2eapp:scss', sassBuildTask(outDir, appDir));

/** Copies e2e app assets (html, css) to build output. */
task(':build:e2eapp:assets', copyTask(appDir, outDir));
Expand All @@ -43,10 +41,10 @@ task(':test:protractor:setup', execNodeTask('protractor', 'webdriver-manager', [
task(':test:protractor', execNodeTask('protractor', [PROTRACTOR_CONFIG_PATH]));

/** Starts up the e2e app server. */
task(':serve:e2eapp', serverTask(false, stream => { stopE2eServer = () => stream.emit('kill'); }));
task(':serve:e2eapp', serverTask(false));

/** Terminates the e2e app server */
task(':serve:e2eapp:stop', () => stopE2eServer());
task(':serve:e2eapp:stop', gulpConnect.serverClose);

/** Builds and serves the e2e app. */
task('serve:e2eapp', sequenceTask('build:components', 'build:e2eapp', ':serve:e2eapp'));
Expand All @@ -68,7 +66,7 @@ task('e2e', (done: (err?: string) => void) => {
'serve:e2eapp:watch',
':test:protractor',
':serve:e2eapp:stop',
(err: any) => stopE2eServer() && done(err)
(err: any) => gulpConnect.serverClose() && done(err)
);
});

Expand All @@ -83,6 +81,6 @@ task('e2e:single-run', (done: (err?: string) => void) => {
'serve:e2eapp',
':test:protractor',
':serve:e2eapp:stop',
(err: any) => stopE2eServer() && done(err)
(err: any) => gulpConnect.serverClose() && done(err)
);
});