Guide: Getting Started With Gulp.js: Tips and Tutorial
Gulp is a tool that allows you to automate bits of your workflow that can literally save you hours per day. Whether you’re a developer or a designer who occasionally creates HTML wireframes, I recommend digging in. In this article, we’ll take a look at the basics of using Gulp – from installation to basic syntax and a few examples. You should be able to do that at the end of the article find, install, and use packages that others have created for Gulp to compile CSS preprocessors, optimize images, create sprites, merge files and more!
Install fly
We use Terminal in OSX and Linux to install Gulp. For Windows we recommend to use Cygwin, Cmder or WSL (Windows Subsystem for Linux). I’ll just call them Terminal. First, we make sure that Node.js and NPM are already installed in our compter. Open up the Terminal and type npm -v and hit enter. If you see the version number, you have already installed it. If you get a “command not found” (or similar error), go to the Node.js download page and select the correct package for your system. Once installed, the npm command is available in the terminal. Now we can type the following command in the Terminal to install the Gulp CLI. npm install –global gulp-cli This allows us to run the gulp command to perform the gulp tasks.
Add Gulp package to a project
This Gulp package covers and defines the Gulp tasks to be performed in our project. To install it, we can type the following command: npm install –save-dev gulp This will install the Gulp package in the node_modules folder in our project folder and register Gulp as the project dependency. It is actually telling that Gulp is a tool that we only use in a development environment.
Gulp file
The Gulpfile is where the magic happens. It’s where you define the automations you need and when you want them to happenLet’s create an empty default job by creating a file called gulpfile.js and pasting the following code into it. const gulp = require (‘gulp’); gulp.task (‘default’, function () {// This doesn’t do anything for now, we’ll add functionality later…}); Once this file is saved, you can go back to your terminal and run the gulp command on its own. Gulp detects which project it is in and runs the default task – the one we just created. You should see something like this:
Nothing actually happens here as the task is empty, but it works fine. Let’s get started with some great examples!
Copy a file
This is a boring one, I’ll admit it, but it will help you easily understand what’s going on. In your project folder, create a file named to_copy.txt and a folder named dev. Let’s go to our Gulpfile and create a new task called copy. const gulp = require (‘gulp’); gulp.task (‘default’, function () {return gulp.src (‘file.txt’). pipe (gulp.dest (‘dist’));}); The first line defines a task called copy. Within this we use gulp.src to specify which files we target this task – in this case it’s a single file named to_copy.txt. We then pip these files to the gulp.dest function which specifies where we want to put these files – I used the dev directory. Go back to your terminal and type gulp copy to perform this task, it should copy the specified file to the specified directory, something like this:
The pipe command is located on the heart van Gulp. It is an efficient way to move data between jobs. The src command specifies the files to be forwarded to the dest command. In more complex scenarios, we would move our files to other commands before specifying a destination. Also keep in mind that the source code can be specified as a single file or multiple files. If we have a directory called src and we want to move all files from our dist directory into it, then we can use the following command: const gulp = require (‘gulp’); gulp.task (‘default’, function () {return gulp.src (‘src / *’). pipe (gulp.dest (‘dist’));}); The asterisk matches everything in the directory. You could also match all files in all sub folders, and do all kinds of other nice matching. Check out the node-glob documentation for more information.
Compile Sass
Compiling a CSS Pre processors like Sass to CSS is a very common task in website development. With Gulp, it is quite easy to do it with a few modules namely node-sass and gulp-sass. You can type the following command in Terminal to install these modules: npm install node-sass gulp-sass –save-dev Once done, you can use the syntax that the package dictates to compile your code. To do this, create a file called styles.scss with the following content: $ primary: # ff9900; body {background: $ primary;} Now create the following Gulp task in the Gulpfile. const sass = require (‘gulp-sass’); sass.compiler = require (‘node-sass’); gulp.task (‘sass’, function () {return gulp.src (‘*. scss’). pipe (sass ()) .pipe (gulp.dest (‘css’));}); When you run gulp sass, all files with the scss extension will be piped to the sass function, which will convert them to css. These are then piped to the destination function that places them in the css folder.
View files and folders
So far this has all been useful, but we still have to type a command every time we want to run a task, which isn’t very efficient, especially when it comes to style sheet changes. Gulp allows you to view files for changes and run commands automatically. In the Gulpfile, create a command called automate that will use the watch command to check a set of files for changes, and run a specific command when a file changes. const sass = require (‘gulp-sass’); sass.compiler = require (‘node-sass’); gulp.task (‘sass’, function () {return gulp.src (‘. scss’). pipe (sass ()) .pipe (gulp.dest (‘css’));}); gulp.task (‘automate’, function () {return gulp.watch (‘. scss’, gulp.parallel (‘sass’));}); If we type automate gulp it will start and end the task, but it won’t return to the prompt because it checks for changes. We indicated that we want to view all scss files in the root directory and if they change we want to run the sass command we set up earlier. If we change the style.scss file, it will be automatically compiled to the css file in the css directory.
Perform multiple tasks
There are many situations where you want to perform multiple tasks. When viewing your javascript folder, you may want to merge two files and then shrink them. You can do this in two ways. When tasks are related, I like to do that chain them. A good example is the concatenation and reduction of javascript files. We first pipe our files to the concat action, then we pipe them to slurp and then use the destination function to run them. If tasks aren’t related, you could call multiple tasksAn example is a task where we want to merge and minify our scripts and also compile our Sass. Here he is full Gulpfile of what that would look like. const gulp = require (‘gulp’); const uglify = require (‘gulp-uglify’); const concat = require (‘gulp-concat’); const sass = require (‘gulp-sass’); sass.compiler = require (‘node-sass’); gulp.task (‘scripts’, function () {return gulp.src (‘js / ** / . js’). pipe (concat (‘scripts.js’)). pipe (gulp.dest (‘js’) )). pipe (uglify ()). pipe (gulp.dest (‘js’))}); gulp.task (‘sass’, function () {return gulp.src (‘. scss’). pipe (sass ()) .pipe (gulp.dest (‘css’));}); gulp.task (‘automate’, function () {gulp.watch ([‘.scss’, ‘js/**/.js’], gulp.parallel (‘sass’, ‘scripts’));}); gulp.task (‘default’, [‘scripts’, ‘styles’] When you type gulp scripts in the terminal, all the javascript files in the js directory will be merged, run to the root directory, then upgraded and stored in the root directory. When you type gulp sass, all your scss files will be compiled and stored in the css directory. When you type gulp (the default task), your script task will run, followed by your style task. The gulp automation task checks multiple directories for changes to our scss and js files and will perform both tasks we defined, if a change is detected.
Overview
Using Gulp is not difficult, in fact many people prefer it over Grunt for its simpler syntax. Remember the steps to take when creating a new automation:
Search for plugin Install plugin Requires plugin in your Gulpfile Use the syntax in the documentation
The five commands available in Gulp (task, run, watch, src, dest) are all you need to know, all third-party add-ons have great documentation. Here’s a list of some of the things I’m using that will get you started right now:
Optimize images with gulp image optimization Create image sprites with gulp-sprite Concatenate files with gulp-concat Shrink files with gulp-uglify Delete files with gulp-del Javascript linting with fly-jsl ribbon JSON linting with fly json ribbon Autoprefix CSS with gulp autoprefixer Find and replace with gulp-frep Minify CSS with gulp-minify-css
Getting Started With Gulp.js: Tips and Tutorial: benefits
[wpsm_list type=”star”]
The Getting Started With Gulp.js: Tips and Tutorial tutorial is free . This guide already helps so many users follow up with interest in a timely manner. The price of the Getting Started With Gulp.js: Tips and Tutorial guide is free.
[/wpsm_list]
Faq
[wpsm_accordion] [wpsm_accordion_section title=”Tutorial summary of Getting Started With Gulp.js: Tips and Tutorial”] In this guide, we told you about the Getting Started With Gulp.js: Tips and Tutorial; please read all steps so that you understand Getting Started With Gulp.js: Tips and Tutorial in case if you need any assistance from us, then contact us. [/wpsm_accordion_section] [wpsm_accordion_section title=”How this tutorial helping you?”] So in this guide, we discuss the Getting Started With Gulp.js: Tips and Tutorial, which undoubtedly helps you. [/wpsm_accordion_section] [wpsm_accordion_section title=”What is actual time in which this method complete?”] The time to complete the Getting Started With Gulp.js: Tips and Tutorial tutorial is 10+ minutes. [/wpsm_accordion_section] [wpsm_accordion_section title=”What are the supported Device?”] PC Laptop or Desktop [/wpsm_accordion_section] [/wpsm_accordion] [wpsm_divider top=”2px” bottom=”15px” style=”fadeout”]
Final note
I hope you like the guide Getting Started With Gulp.js: Tips and Tutorial. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends. For our visitors: If you have any queries regards the Getting Started With Gulp.js: Tips and Tutorial, then please ask us through the comment section below or directly contact us. Education: This guide or tutorial is just for educational purposes. Misinformation: If you want to correct any misinformation about the guide “Getting Started With Gulp.js: Tips and Tutorial”, then kindly contact us. Want to add an alternate method: If anyone wants to add more methods to the guide Getting Started With Gulp.js: Tips and Tutorial, then kindly contact us. Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off). Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.
