Automating tasks

At this point, we have some task compressed into a single file. All this compression will be performed when we run the gulp command. We can group the preconfigured task to be run into one single command. Suppose we have three tasks already defined: process-styles, other-task, and some-other-task. Now we just need to define all these tasks into a single new task:

// run all tasks
gulp.task('run', ['process-styles', 'other-task', 'some-other-task']);

Save and press Enter the gulp run command line to execute all the tasks defined.

That's great, but we still need to enter commands manually. Rumpelstiltskin, that was not part of the deal! Don't worry, we have one last surprise for you—gulp.watch(). With this method, you could monitor your source files and execute some task when a change is detected. Let's configure watch task into our gulpfile:

// watch for changes in code
gulp.task('watch', function() {
  // some example tasks
  // detect image changes
  gulp.watch(folder.src + 'img/**/*', ['images-task']);

  // detect html changes
  gulp.watch(folder.src + 'html/**/*', ['html-task']);

  // detect javascript changes
  gulp.watch(folder.src + 'js/**/*', ['js-task']);

  // detect css changes <--- Our created task
  gulp.watch(folder.src + 'scss/**/*', ['process-styles']);
.
.
.
// And so many task as we need to watch! });

Finally, rather than running gulp watch task manually, let's configure a default task:

gulp.task('default', ['run', 'watch']);

Save, and then just run the command gulp into your terminal. You will note that a gulp observer is always looking if any change is performed in the files preconfigured! Of course, it includes all your .scss files! Now you can change and add new styles and view it automatically reflected in your browser, without the need to execute some command by yourself. If you want to terminate this watch process, just type Ctrl + C to abort monitoring and return to the command line. Now you really have a strong task automation tool configured and ready for use! The Aurelia CLI preconfigures gulp task activities for you, but it's very important to know how it works behind the scenes; also, you are able to modify this configuration and add custom behavior if you consider it needed.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.149.241.48