// Coding
How to Use Gulp
// Coding
Each developer is forced to do routine and monotonous tasks in web development profession, especially the HTML-coder. But what if some of these tasks can be automated? In this case the task manager will help. One of the most popular is Gulp.
The simplest definition says that Gulp is a task manager/stream collector of projects, which is developed in the JavaScript programming language. It can help automate different tasks, while significantly saving time.
How to use Gulp in your project and what exactly is to be automated? We will try to check and consider in this article. Following simple instructions from the documentation, first of all, we see that Gulp works with Node.js. So, need to install it on the computer. Next step is the installation of the module, which can help to use Gulp in any place on your PC. To do this, execute the following code on the command line:
npm i gulp –g
After that, you need to install and add it to your project, after changing the directory, to the required one and use the following command:
npm i gulp --save-dev
We understood how to install. But if there are questions, then for more clear instructions there is always official documentation. Let's move on to the setup stage. For example, we will use two directories: merehead/first-catalog and merehead/secondary-catalog.
In the merehead/first-catalog directory will be the source files, and in the merehead/secondary-catalog directory - files after processing by Gulp.
The basic syntax of any task can be represented in the following code:
gulp.task(‘example’, function() {
});
But for some practice we need to use a real Gulp-plugin. In one of the previous articles, I talked about the advantages of CSS preprocessors. We can use Gulp to convert SASS to CSS. At first, we need to install the plugin that can solve this issue. The following code can do installation:
npm install yourPlaginNameHere --save-dev
Next, we will create a configuration file for the task manager, which we will call gulpfile.js and add the following lines:
var yourPlaginNameHere= require('yourPlaginNameHere'); //Connection of a plugin.
And we will create our first task, which includes plugins SASS, autoprefixer, css-min и rename.
gulp.task('yourPlaginNameHere', function () {
gulp.src('./merehead/first-catalog/app-style/*.scss')
.pipe(sass())
.pipe(autoprefixer())
.pipe(cssmin())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('./mereheadt/secondary-catalog/app-style'));
});
Thus, Gulp helps us, process our files and did the following:
1) It checked all styles files with the extension .scss
2) It converted Sass to CSS
3) It put all the necessary vendor prefixes in CSS
4) It minimized CSS
5) It renamed the files and added the suffix "min"
6) It put the processed files in a folder secondary-catalog/app-css
Thus, we have 6 items, which at least one of them was performed manually. A note, this is just an example of one small task. This short syntax and the flexibility of Gulp makes it a powerful tool. So, every developer can save a lot of time.
We gradually saw what tasks help automate Gulp. The example above describes the process of minimizing CSS, using preprocessors, and prefixing. In addition, the list of skills of this task-manager includes:
- Optimizing images
- Using HTML templates, such as Jade
- Code testing and validation
- Minimize and combine JavaScript.
There are also many other useful plugins. For example, gulp-connect allows you to create and run a local server with livereload support. With this plugin, you can see the changes in the browser after you have updated your sass, HTML or JS file without a lot of clicks on the "update" button.
Another feature of Gulp is that in addition to automating the development process by creating various tasks, it can automate the process of working these same tasks! After all, if you check an example of our tasks above, then to run it you should run the command every time:
gulp sass
Here, Watch method will help us, which monitors the status of the files and run specific tasks, again and again, depending on whether there are changes in those or other files. Let's imagine a code example where this method is used in the following sentence:
gulp.task('myWatcher', ['yourTaskNameHere'], function() {
gulp.watch ('./merehead/first-catalog/app-style/*.scss', ['yourTaskNameHere']);
});
gulp.task('default', ['myWatcher']);
Now, if we execute the Gulp command in the project, the Watch task is run, which will monitor your files and update them during the running session.
At the beginning of the article, I said that Gulp is also a project collector. But, in the role of an assembler, it is convenient to use it only on a small project. When your project uses React, Redux and many different libraries, it's much more convenient to use Webpack. In our company we work on the following way: at the stage of coding of mockups or on small projects I use Gulp, and for full-fledged web applications, other developers of our company use Webpack.
In conclusion, I want to say that for my purposes Gulp is the ideal solution. I think that for yours too. I recommend using this task manager. It will help automate routine tasks, save time and effort. This allows you to perform tasks more efficiently and quickly. So install Gulp, get acquainted with a lot of useful plugins and create personal tasks, depending on your needs.
