Getting started gulp with step by step.
Gulp is mostly used for front-end development, Gulp is a tool that perform several tasks when that really beneficial when you build any HTML. It is a task runner that uses Node.js as a platform.
“Automation – gulp is a toolkit that helps you automate painful or time-consuming tasks in your development workflow. Platform-agnostic – Integration are built into all major IDEs and people are using gulp with PHP, .NET, Node.js, Java, and other platforms.”
Why to use Gulp? or Advantages of Gulp.
- Gulp Create a virtual server or web server for project.
- Automatically reloading the browser whenever any changes detected in files.
- You can user CSS Preprocessors like Sass or LESS
- It Optimizing assets like CSS, JavaScript, and images.
- Autoprefixer (gulp-autoprefixer)
- Can Minify, Compressed or Uglify CSS
- Clean files for a clean build
- run tests and merge files
- Minify HTML
Now after a quick understanding of gulp we can move to its installation steps. Create a new directory where you want to set up your gulp project and perform below steps.
Installing gulp Step by step. / Setting up a New Project
Step1: install Node.js (Node)
As i mention above, You need to install Node.js (Node) in to your system to run Gulp. If you do not have Node installed already, you can download the Node package It,s official website.
Step2: Create a package.json
package.json – this file holds various metadata relevant to the project. This file is used to give information to npm that allows it to identify the project as well as handle the project’s dependencies.
In your command line terminal give npm init to create package.json file. It will ask some parameters like name, version etc.
1 |
$ npm init |
After running npm init command package.json file created in your directory, and something looks like below
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
{ "name": "test", "version": "1.0.0", "description": "Descroption", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "w3reign", "license": "ISC", "dependencies": { "browser-sync": "^2.18.13", "gulp": "^3.9.1", "gulp-sass": "^3.1.0" } } |
Step3: Install gulp
After Installing Node JS, you can install Gulp by using the following command in the command line :
1 2 3 4 5 |
$ sudo npm install gulp -g or $ npm install gulp -g |
Step 4: Create a Gulp Configuration File gulpfile.js
Create a new empty JavaScript file and saved with name gulpfile.js on the root of project folder.
All Gulp configurations are goes in gulpfile.js file.
I am showing you a very basic verion of gulpfile.js file, you can add a lot of declaration, configuraion and it’s task
in that file.
Simplified Version gulpfile.js –
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
var gulp = require('gulp'); var browserSync = require('browser-sync').create(); var sass = require('gulp-sass'); // Compile sass into CSS & auto-inject into browsers gulp.task('sass', function() { return gulp.src(['src/scss/*.scss']) .pipe(sass()) .pipe(gulp.dest("src/css")) .pipe(browserSync.stream()); }); //Move the javascript files into our /src/js folder gulp.task('js', function() { return gulp.src(['node_modules/bootstrap/dist/js/bootstrap.min.js', 'node_modules/jquery/dist/jquery.min.js', 'node_modules/tether/dist/js/tether.min.js']) .pipe(gulp.dest("src/js")) .pipe(browserSync.stream()); }); // Static Server + watching scss/html files gulp.task('serve', ['sass'], function() { browserSync.init({ server: "./src" }); gulp.watch(['src/scss/*.scss'], ['sass']); gulp.watch("src/index.html").on('change', browserSync.reload); }); gulp.task('default', ['serve']); |
You can Download the Detailed version Gulpfile file here with complete configuration.
Step 5: Manage your projects file with gulp.
I recommend you to keep all of your project related files like js, css etc in a separate directory. Like i have created in src folder and according to it i have configure my gulpfile.js.
[paypal-donation]