Skip to content

feat(build): add build:watch task to rebuild library on change on `*… #99

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.

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
Oct 8, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
4 changes: 4 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,8 @@ If you find next sections way too long, here is a quick summary for you:
* **Library main tasks**:
* Testing Library: `gulp test`
* Building Library: `gulp build`
* Watching source files and auto-rebuilding Library: `gulp build:watch`
* Watching source files and auto-rebuilding Library (without running tests): `gulp build:watch-fast`
* **Releasing Library**: `gulp release --version=[major|minor|patch]`
* **Demo app main tasks**:
* **Serving demo app**: `gulp serve:demo`
Expand Down Expand Up @@ -277,6 +279,8 @@ Here are the most important `gulp` tasks to use during your development workflow
Task | Purpose
:-----------------------|:--------------------------------------------------------------------------------------------------------------------------------------------------
`gulp build` | Builds and packages your library under the `dist/` folder.
`gulp build:watch` | Watches the source files (*.ts, *.html and *.scss) and re-builds your library upon changes (useful for live refresh of demo app during development).
`gulp build:watch-fast` | Watches the source files (*.ts, *.html and *.scss) and re-builds your library upon changes (without running tests).
`gulp test` | Launches the tests (`*.spec.ts`) you wrote in `src/` and run code coverage on them. The coverage report can be found in `coverage/` folder
`gulp test:watch` | Launches tests in watch mode. Every changes in `*.spec.ts`
`gulp test:watch-no-cc` | Same as `gulp test:watch` but files do not get instrumented for code coverage (useful for debugging)
Expand Down
48 changes: 22 additions & 26 deletions app/templates/_gulpfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -261,21 +261,37 @@ gulp.task('ng-compile',() => {
});
});

// Lint, Prepare Build, <% if(!skipStyles) { %>, Sass to css, Inline templates & Styles<% } %> and Compile
// Lint, Prepare Build, <% if(!skipStyles) { %>, Sass to css, Inline templates & Styles<% } %> and Ng-Compile
gulp.task('compile', (cb) => {
runSequence('lint', 'pre-compile', 'inline-templates', 'ng-compile', cb);
});

// Watch changes on (*.ts, *.html<% if(!skipStyles) { %>, *.sass<% } %>) and Compile
gulp.task('watch', () => {
gulp.watch([config.allTs, config.allHtml, <% if(!skipStyles) { %>config.allSass<% } %>], ['compile']);
});

// Build the 'dist' folder (without publishing it to NPM)
gulp.task('build', ['clean'], (cb) => {
runSequence('compile', 'test', 'npm-package', 'rollup-bundle', cb);
});

// Same as 'build' but without cleaning temp folders (to avoid breaking demo app, if currently being served)
gulp.task('build-watch', (cb) => {
runSequence('compile', 'test', 'npm-package', 'rollup-bundle', cb);
});

// Same as 'build-watch' but without running tests
gulp.task('build-watch-no-tests', (cb) => {
runSequence('compile', 'npm-package', 'rollup-bundle', cb);
});

// Watch changes on (*.ts, *.html<% if(!skipStyles) { %>, *.sass<% } %>) and Re-build library
gulp.task('build:watch', () => {
gulp.watch([config.allTs, config.allHtml, <% if(!skipStyles) { %>config.allSass<% } %>], ['build-watch']);
});

// Watch changes on (*.ts, *.html<% if(!skipStyles) { %>, *.sass<% } %>) and Re-build library (without running tests)
gulp.task('build:watch-fast', () => {
gulp.watch([config.allTs, config.allHtml, <% if(!skipStyles) { %>config.allSass<% } %>], ['build-watch-no-tests']);
});


/////////////////////////////////////////////////////////////////////////////
// Packaging Tasks
/////////////////////////////////////////////////////////////////////////////
Expand Down Expand Up @@ -448,26 +464,6 @@ gulp.task('test:demo', () => {
return execDemoCmd('test --preserve-symlinks', { cwd: `${config.demoDir}`});
});

gulp.task('test:demo-ssr', () => {
// Load zone.js for the server.
require('./demo/node_modules/zone.js/dist/zone-node');

// Import renderModuleFactory from @angular/platform-server.
var renderModuleFactory = require('./demo/node_modules/@angular/platform-server').renderModuleFactory;

// Import the AOT compiled factory for your AppServerModule.
// This import will change with the hash of your built server bundle.
var AppServerModuleNgFactory = require('./demo/dist-server/main.bundle').AppServerModuleNgFactory;

// Load the index.html file.
var index = require('fs').readFileSync('./demo/src/index.html', 'utf8');

// Render to HTML and log it to the console.
return renderModuleFactory(AppServerModuleNgFactory, { document: index, url: '/' }).then(html => {
console.log(html);
});
});

gulp.task('serve:demo', () => {
return execDemoCmd('serve --preserve-symlinks<% if(useCompodoc){ %> --proxy-config proxy.conf.json<% } %>', { cwd: `${config.demoDir}` });
});
Expand Down