Gulp is a build tool based on Node.js. It provides a Javascript interface to maintain complex build tasks intuitive and manageable.
You can find different gulpfile.js
files inside a Wakanda project.
mobile folder
web folder
These are the entry points of the build process of your application.
Wakanda Studio is able to run the build tasks defined in the gulpfile.js
files.
Gulp logic can be summarized by the concept of tasks. A gulpfile.js
can include multiple tasks. When Gulp is launched, it collects all the tasks defined by the user and runs the specified ones.
Gulp is optional. When installed, the Studio is able to run several additional functionalities like the live-reload defined on web/gulpfile.js
.
On Run Page the serve
task is triggered:
gulp.task('serve', ['watch', 'connect']);
The first parameter is the task name, ‘serve’, and the second parameter can be a function or an actions list. By default we run different tasks:
connect
: launch a server ready to live-reload when a file change message is received. gulp.task('connect', function() {
connect.server({
root: ['.'],
port: options.connectPort,
livereload: {
port: options.livereloadPort
},
middleware: function(conn, opt) {
return [
proxy('!/app/**', {
target: options.serverUrl,
changeOrigin: false,
ws: true
})
];
}
});
});
watch
and reload
: watch file changements in the specified folders and inform the live-reload server. var baseFolder = options.app;
gulp.task('watch', function() {
gulp.watch([
baseFolder + 'scripts/**/*.js',
baseFolder + 'styles/**/*.css',
baseFolder + 'views/**/*.html',
baseFolder + 'index.html'
], ['reload']);
});
gulp.task('reload', function() {
gulp.src(options.app + '**')
.pipe(connect.reload());
});
This is the code necessary for the live-reload to work. These tasks are normally different for each project:
watch
task.Many additional Gulp modules are available. Here’s a list of the most popular packages:
Let’s see an example: