Skip to Content

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)

/wp-content/uploads/2016/05/ws1_946084.png

– Map your files

/wp-content/uploads/2016/05/ws2_946118.png

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

/wp-content/uploads/2016/05/ws3_946119.png

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

/wp-content/uploads/2016/05/g1_946120.png

If we add in our file :


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



And run instruction gulp myfirst_step

/wp-content/uploads/2016/05/g2_946124.png

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:

/wp-content/uploads/2016/05/g3_946125.png

Change a css file present in your folder.

And now, you should have :

/wp-content/uploads/2016/05/g4_946126.png

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 !

/wp-content/uploads/2016/05/final_946083.jpg


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
To report this post you need to login first.

3 Comments

You must be Logged on to comment or reply to a post.

  1. Nigel James

    Great stuff Cyril Grunt and Gulp and even npm scripts by themself are pretty cool tools for SAPUI5 Development.

    Make sure that you use good git commit hygine and not just a bit backup commit at the end of the day.

    Thanks for sharing your workflow.

    Cheers,

    Nigel

    (0) 

Leave a Reply