As you might have already heard, Gulp.js is toolkit for automating tasks and many developers already using it to save time and to increase productivity. However, for an HTML Developer without a programming background its a tough task to get your hands in. Do not worry, I was on the same boat. So today I will show you how you can build a project with little help of Gulp. So, Let’s start the gulp tutorial.
Do I really need to use Gulp?
That’s a question you need to answer before starting with Gulp. To get that answer, you should know how Gulp can help in your project. As I said earlier, Gulp is an automation tool, like a robot. Its based on JavaScript (Node.js). So if you are familiar with JavaScript, jQuery Plugins, it would be much easier. And the sample code we need for different plugins will be given in the plugin page of NPM (Node’s Package manager).
Here are few things people use Gulp for:
- Compiling SASS / SCSS Files
- Concatenates CSS / JS Files
- Minify / Uglify JS / CSS / HTML Files
- Live reloading with Browser Sync
- Optimizing Images
- Cleaning up files
- Autoprefix CSS Attributes
- and 3500+ reasons (Total Gulp plugins available)
So, if you need to automate any of the features listed above, You’ll need Gulp.
Grunt vs Gulp
Now, arises the next famous question. Do I need Grunt or Gulp? Gruntjs is also used for automation and its also based on JavaScript. So, why can’t I use Grunt? Of course you can choose Grunt as well. Its a personal preference. Just look at the code, plugins, community support and you decide which one to choose. Why did I chose Gulp? Just because of the community. If you look at the Github Page of both Grunt & Gulp, you can see that the Gulp is most starred as well as less Open Issues. This means the community is more active in Gulp. If iam getting any issues, Iam more likely to get an answer. You can read a lot of articles on which one to choose. So if you decide Gulp, you can read on.
Installation
Lets start installing our required softwares and plugins.
Install Node.js and NPM
Download Node.js on your Computer using this link https://nodejs.org/en/
Double click the installation file and finish the setup
Open your command line and check whether its installed properly by typing the following command.
node -v npm -v
A note on Command line: Mac and Linux already have a fully featured command line, but Windows does not have that. Some of the latest Windows version comes with Powershell. So check if you have powershell available, or else you can install that from Microsoft Website.
Install Gulpjs
Open your Terminal / Command Line tool and type the below command and hit enter
npm install gulp -g
This will install Gulp using Node package Manager NPM globally (-g) so that we can use gulp anywhere in the system.
Creating a Gulp Project
The main installation is over, now let’s create new project in any path you want. Eg: D:/Works/GulpProject
Now, create few folders for our source files and build files. I’ll be using src for source files (HTML, CSS, Images etc.) and dist for production. The root folder will contain the node_modules, package.json and gulpfile.js files.
Create package.json file
Lets create a package.json file to set up Node.js in that directory. Open your command line and navigate to your Project Directory. For Windows users, Open the Project folder and right-click on the white space by pressing Shift Key simultaniously and select Power Shell from the Options.
Enter the following command and hit Enter:
npm init
Hit Enter and it will ask you to fill few details. Enter the details and press Enter until it finishes.Enter without adding anything if that field does not apply to you. Choose Yes to finish setup and it will automatically create a package.json file.
Install Gulp for this Project
Enter the following command and hit Enter:
npm install gulp --save-dev
This command will install Gulp in the Project folder. --save-dev flag is to add gulp as a dev dependency in package.json. Now you will see a folder called node_modules which contains all required files and folders for Gulp.
Create Gulpfile.js
Manually create gulpfile.js file in your project folder and open the file in your favorite code editor.
Now Copy the following code and paste:
const gulp = require('gulp');
This tells Node to look into the node_modules folder for a package named gulp and assign its contents to the variable gulp.
We can now begin to write a gulp task with this gulp variable. The basic syntax of a gulp task is:
gulp.task('my-task', function() {
// Do something
});
my-task refers to the name of the task, which would be used whenever you want to run a task in Gulp. You can run the task in the command line by typing gulp my-task.
To test it out, let’s create a simple task that says Hello World!
gulp.task('test', function() {
console.log('Hello World');
});
Now, let’s run this task in the command line:
gulp test
The command line will return a log that says Hello World.
Installing Gulp Plugins
Now, its time to find your favorite plugins from https://www.npmjs.com/ or https://gulpjs.com/plugins/
For example, we will install and configure autoprefixer plugin.
Check out the NPM page and see the code to install this particular plugin. In this case its:
npm install --save-dev gulp-autoprefixer
Once installed, copy the sample code to our gulpfile.js file.
const gulp = require('gulp');
const autoprefixer = require('gulp-autoprefixer');
gulp.task('default', () =>
gulp.src('src/app.css')
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('dist'))
);
Make sure the source path and destination path is correct. In our case its same as we named earlier.
Some Tips on how you can write gulp.src
// If you have multiple files, you can write: gulp.src(['src/app.css', 'src/main.css', 'src/framework.css']) // If you don't want to write file names, write like this gulp.src(['src/css/*.css', 'src/js/*.js']) // Add all CSS but exclude few files gulp.src(['src/css/*.css', 'src/js/*.js', '!src/css/notme.css']) // Recursive if you have multiple folders gulp.src(['src/**/*.css', 'src/**/*.js'])
Run Gulp Tasks
Now all installation done, you need to run gulp tasks to do the tasks we defined in the js file.
Here are some commands for that:
// run default gulp tasks gulp // run single task gulp prefix
To run multiple tasks in one go, you can add the following code in the js file.
gulp.task('build', ['prefix', 'copy', 'concat', 'uglify'], function() {
console.log('Building files');
})
Now, you will be able to run all tasks using this one command:
gulp build
Conclusion
That’s it. This is just a starting point and there are a lot more you can do with Gulp. Please read on further articles to get to know more about the Gulp and its features. If you think this tutorial is helpful or if you have any questions, please leave a comment below.
