Introduction

Just some tips I would like share to speed up development :

• Chrome Devtools
• Gulp
• Browser-sync

In my case, I develop first SAPUI5 application in WebIde then I clone my Git repository locally.

Chrome workspaces

You probably already know dev Tools in your favorite browser (I guess Chrome ;-) ) and use it to change in live your css files.

But do you use workspaces to save your changes directly on your disk ?

If not, you have to try it ! It's a really time saving !

https://developers.google.com/web/tools/setup/setup-workflow

It's not a new functionality but too unknown ...

It's just two steps :

- in devtools / sources tab, add folder to workspace by right clicking (allow chrome to access to the folder)

- Map your files

Now, when you change your files (in this exemple, css) in devtools, your source files will be directly updated.

Note that Sublime Text editor automatically check files changes. So when you back to your editor, your last version is shown.

Very appreciated !

SSRR Cycle : Save, Switch, Reload, Replay

When we work on front-end development, we unending loop in SSRR Cycle.

It could be very cool to modify source files and inject in live to our browser to see modifications without manual update.

Good news, we can do it !

Basically, we have to :

- Watch our source files to detect the changes

- Sent to browser files up to date

- Refresh web page

What do we need ?

- Gulp to automate our workflow (http://gulpjs.com/)

- Browser-sync to synchronise files (https://www.browsersync.io )

So, once Gulp and Browser-sync have been installed via NPM, we have to create a gulpfile.js

A simple "Hello world" file could look like this :

var gulp = require('gulp');
gulp.task('default', function() {
console.log('Hello World !');
});

In Node.js command prompt, execute gulp in the folder where is your gulpfile.js

If we add in our file :

gulp.task('myfirst_step', function() {
console.log('My first step ...');
});

And run instruction gulp myfirst_step

To chain tasks,

gulp.task('default', ['myfirst_step', 'mysecond_step']);

Now, a very interesting function to wacth files changes.

Add this task in your file and run gulp Watch

gulp.task('watch', function () {
gulp.watch('./*.css',  function() {
console.log('CSS changed'); });
});

In your console, you should see something like this:

Change a css file present in your folder.

And now, you should have :

So, now we can add browser-sync to have a gulpfiles.js looks like this one :

var gulp = require('gulp');
var browserSync = require('browser-sync').create();
gulp.task('watch', function () {
gulp.watch('./*.css',  function() {
console.log('CSS changed');
gulp.src('./*.css').pipe(browserSync.stream()); });
});
gulp.task('init', function() {
browserSync.init({
injectChanges: true,
server: {
baseDir: "./"
}    });
});
gulp.task('default', ['init', 'watch']);

Run Gulp

Now, you can open several browser with url http://localhost:3000/ and when you change css file, all browser are updated !

Automate git repository update

It's possible to automate Git actions using gulp-git ressources.

We can add something like this :

gulp.task('add', function(){  return gulp.src('./*')    .pipe(git.add()); });
gulp.task('commit', function(){  return gulp.src('./*')    .pipe(git.commit('new commit')); });
gulp.task('push', function(){  git.push('origin', 'master', function (err) {    if (err) throw err;  }); });

Then why not add a watch step to update Git repository when a file is changed

gulp.task('release', function () {
gulp.watch('./release.txt', ['add', 'commit', 'push']);
});

Now, when I updated my release.txt file, my Git repository is updated.

Summary

In summary, in SAPUI5 context, we can :

• Create SAPUI5 application using Webide
• Clone Git repository from HCP
• Run Gulp script with Browser-sync
• Work in my favorite Editor
• Check in live my changes on several browsers
• Update Git repository
• Deploy on HCP