Gulp for beginner

Gulp is a tool that helps us write a number of tasks to speed up the Web development process.

It is often used to

• Spinning up web server
• Reload browser when the file is saved.
• Use SASS or LESS
• Optimizing assets such as CSS, JS, images

Proficient in Gulp will help us to become more active in web development.

However, because I do not have to use it often, I only use it to code front-end quickly.

In this article, I will build a template for quick use by front-end side-projects

Install Gulp

To be able to instal Gulp, Nodejs is required already installed on your computer. If you have not installed Nodejs, you can install it on the Nodejs homepage.

After installing Nodejs, install gulp. Flag -g to install gulp global, more convenient for running tasks.

Create projects and install dependencies

• Folder stucture will be as follows

A brief explanation of this folder structure.
Folder App for storing source files, while dist / for storing compressed files for production.

Gulfile.js is the file for configuring gulp.

Writing first gulp task

By definition, gulp is an async function, which can be created simply as follows

When running gulp hello will print out log.

Specifically, the gulp task has the form

gulp.src specifies the file will run that task, gulp.pipe is the plugin that will be run on the file, gulp.dest specifies the output

Preprocess with gulp

Sass, LESS can compile via csss with gulp as follows

Specifically, this gulp task will compile styles.scss and translate it through app / css / styles.css

Glob in gulp

Gulp uses its own pattern to match files. Patterns are commonly used in gulp

• * .scss All .scss files in root folder
• ** / .scss Match all scss files in the root folder and in subfolders
• ! not-me.scss: Removes not-me.scss from the list of selected files
• *. + (scss | sass): All files ending with scss or sass in root folder

Our task can be updated as follows

Currently, when we want to compile sass through css, we must call gulp sass . Gulp allows us to compile the file every time the file is modified with gulp.watch

Watching file

Note that I use gulp 3.x so the syntax will be different from 4.x. With 4.x you need to fix the syntax.

Here is the method of watch file using gulp

And we can write watch task with sass as follows

Reloading page with browsersync

Now we can automatically compile sass -> css every time we change the file. However, if it just stops here, it still hasn’t really speed up the development process. Gulp combined with browsersync will help us to reload the page every time we change the sass file

Config

Now we need to do is can start browsersync, Compile again every time there is a change on the file, then reload the page again. We can do as follows

Task Watch will need 2 tasks ‘browserSync’, ‘sass’ to run first.

If we learn a little more, we can do the same thing with JS, html

We can definitely do more with Gulp like that

• Compress Css, JS into one file before it is put into production
• Compress images
• Clean auto-generated file

Since my original purpose was to create a side-templte to code FE, I will stop here. The above sections can be found at https://css-tricks.com/gulp-for-beginners/ . And there’s so much more that can be done with gulp to speed up software development.

One note that you should use gulp 3.x. I tried to migrate to 4.x, but due to the lack of familiarity, I got a lot of syntax errors, but the current guide to migrate to 4.x is still quite sketchy

OK. Thank you for watching