An Introduction to JavaScript Automation with Gulp
As web developers, we sometimes find ourselves repeating the same tedious tasks again and again. If you consider how much time is wasted by running a build command or hitting refresh on your browser, you will realize that you can be saving a lot of time. Additionally, by automating your processes, you can stay focused on the task at hand instead of temporarily leaving the zone (your state of productivity).
In this JavaScript automation tutorial, you will learn how to automate your design and development process with Gulp. If you are more design-oriented, I encourage you to overcome any fears you have and to read on. On the other hand, if you are a developer you will be able to sweep right through this once you understand the logic behind it.![An Introduction to JavaScript Automation with Gulp - Image 1](https://www.mytechlogy.com/upload/by_users/ipapuc/1017040501211.jpg)
![An Introduction to JavaScript Automation with Gulp - Image 2](https://www.mytechlogy.com/upload/by_users/ipapuc/101704050544ScreenShot20170410at6.png)
![An Introduction to JavaScript Automation with Gulp - Image 3](https://www.mytechlogy.com/upload/by_users/ipapuc/101704050614ScreenShot20170410at6.png)
![An Introduction to JavaScript Automation with Gulp - Image 4](https://www.mytechlogy.com/upload/by_users/ipapuc/1017040506362.jpg)
I have created a watcher starter kit that you can use straight away. You can download it from
gulp
This command starts the default task which initiates the watcher. At this We have set up a watcher for our task with only 3 extra lines of code. That said, the watcher starter kit does not differ much from the introductory example. In this section, we will go through all the additions and alterations.
return gulp.src(['scss/**/*.scss', '!scss/**/_*'])
In this example, Gulp source is provided with an array of globs. The first one includes all the files that end in .scss also in subfolders, and the second one excludes the ones that start with _. This way we can use SCSS’s built-in function @import to concatenate the _page.
gulp.task('default', ['scss'], function() {
Here we define the default task. The
gulp.watch('scss/**/*.scss', ['scss']);
Finally, we call Gulp’s watch function to point at any file ending with .scss and whenever a change event occurs, to run the ![An Introduction to JavaScript Automation with Gulp - Image 5](https://www.mytechlogy.com/upload/by_users/ipapuc/1017040507333.jpg)
![An Introduction to JavaScript Automation with Gulp - Image 6](https://www.mytechlogy.com/upload/by_users/ipapuc/1017040509064.jpg)
In this process automation
![An Introduction to JavaScript Automation with Gulp - Image 7](https://uploads.toptal.io/blog/post_image/90158/gulpjs_4-d8386dfa98c60878dda585a0b99f5d70.jpg)
JavaScript
Gulp
![](https://www.mytechlogy.com/view/images/edit_blog.png)