Using the Gulp project builder makes the website development process much easier and faster.
By using the collectors at the output, you get minified (css, js, html files) and files adapted for different browsers (CSS files).
By using additional Gulp modules such as gulp-webp, you can convert your .jpg / .png images to the modern web .webp format, which will make your pages load faster.
Part 1 - Gulp installation
To install your previously installed Node.js, you can download it from the link.
Next, run the installation via the command line with the following command:
npm install --global gulp
The tag --global sets gulp for the whole system and you can use it in multiple projects.
Go to your project by using the command:
cd
Enter the command:
npm init
This will create a package.json file, this file contains information about your project, dependencies, module settings.
Install gulp dependencies:
npm install gulp --save-dev
This command will locally install the necessary modules in the project.
Part 2 - Configuring Gulp
Create gulpfile.js
In this file, we describe the tasks we need and write all the modules for the further work.
What modules does Atekla web studio uses to develop their projects:
- gulp-autoprefixer
- gulp-file-include
- gulp-sass
- gulp-uglify
- gulp-htmlmin
- gulp-webp
- gulp-clone
- browser-sync
Gulp-autoprefixer - Builds a CSS file with prefixes for different browsers, plus adds rules to support older browsers.
Gulp-file-include - allows you to include your html files as if you were working with PHP
Gulp-sass - allows you to build CSS files if your project is written using SASS / SCSS
Gulp-uglify - minification of JS files
Gulp-htmlmin - minifying HTML files
Gulp-webp - convert JPG / PNG images to WEBP with image quality setting
Gulp-clone - allows you to save the original JPG / PNG image and transfer it to the project folder for use in browsers without WEBP support
Browser-sync - make up your project without hosting and using MAMP.
Part 3 - Creating the gulpfile.js
We connect the modules to the gulpfile.js file
'use strict';
const gulp = require('gulp'), atekla_autoprefixer = require('gulp-autoprefixer'), atekla_file_include = require('gulp-file-include'), atekla_sass = require('gulp-sass'), atekla_uglify = require('gulp-uglify'), atekla_htmlmin = require('gulp-htmlmin'), atekla_browserSync = require('browser-sync'), atekla_webp = require('gulp-webp'), atekla_clone = require('gulp-clone'), atekla_clonesink = atekla_clone.sink(), atekla_reload = atekla_browserSync.reload;Creating paths for Gulp to work
const path = { build : { build_html : './', build_js : './/js', build_css : './/css', build_fonts: './/fonts', build_img : './/img', build_video : './/vid' }, src : { src_html : './/*.html', src_js : './/js/*.js', src_css : './/css/*.css', src_fonts : './/fonts/**', src_video : './/vid/**', src_img : './/img/**/*.{jpg,jpeg,png,gif,ico,svg}', }, watch : { watch_html : './/**/*.html', watch_js : './/**/*.js', watch_css : './/**/*.css', watch_fonts : './/fonts/**', watch_video : './/vid/**', watch_img : './/img/**/*.{jpg,jpeg,png,gif,ico,svg}', }
}; Webserver task - creates a local hosting for layout
gulp.task("webserver", function () { atekla_browserSync({ server : { baseDir : './' }, host : 'localhost', port : '3000', tunnel : true });
});Webserver task - creates a local hosting for layout
gulp.task("img:build", function () { return gulp.src(path.src.src_img) .pipe(atekla_clonesink) .pipe(atekla_webp({ quality: 70 })) .pipe(atekla_clonesink.tap()) .pipe(gulp.dest(path.build.build_img)) .pipe(atekla_reload({stream:true}))
});Fonts assembly task
gulp.task("fonts:build", function () { return gulp.src(path.src.src_fonts) .pipe(gulp.dest(path.build.build_fonts)) .pipe(atekla_reload({stream:true}))
});The task for assembling videos
gulp.task("video:build", function () { return gulp.src(path.src.src_video) .pipe(gulp.dest(path.build.build_video)) .pipe(atekla_reload({stream:true}))
});The task for building HTML
gulp.task("html:build", function () { return gulp.src(path.src.src_html) .pipe(atekla_file_include({ prefix: '@@', basepath: '@file' })) .pipe(atekla_htmlmin({ collapseWhitespace: true, removeComments: true })) .pipe(gulp.dest(path.build.build_html)) .pipe(atekla_reload({stream:true}))
});JS Build Task
gulp.task("js:build", function () { return gulp.src(path.src.src_js) .pipe(atekla_file_include()) .pipe(atekla_uglify()) .pipe(gulp.dest(path.build.build_js)) .pipe(atekla_reload({stream:true}))
});CSS Build Task
gulp.task("css:build", function () { return gulp.src(path.src.src_css) .pipe(atekla_sass({outputStyle: 'compressed'})) .pipe(atekla_autoprefixer()) .pipe(gulp.dest(path.build.build_css)) .pipe(atekla_reload({stream:true}))
});The task for tracking file changes
gulp.task('watch', function() { gulp.watch(path.watch.watch_css, gulp.series('css:build')); gulp.watch(path.watch.watch_js, gulp.series('js:build')); gulp.watch(path.watch.html, gulp.series('html:build')); gulp.watch(path.watch.watch_img, gulp.series('img:build')); gulp.watch(path.watch.watch_fonts, gulp.series('fonts:build')); gulp.watch(path.watch.video, gulp.series('video:build'));
});Our package.json settings for Gulp
"dependencies": { "browser-sync": "^2.26.13", "del": "^5.1.0", "gulp": "^4.0.2", "gulp-autoprefixer": "^7.0.1", "gulp-clone": "^2.0.1", "gulp-file-include": "^2.2.2", "gulp-htmlmin": "^5.0.1", "gulp-sass": "^3.2.1", "gulp-sourcemaps": "^2.6.5", "gulp-uglify": "^3.0.2" }, "browserslist": [ "> 1%", "ie >= 8", "edge >= 15", "ie_mob >= 10", "ff >= 45", "chrome >= 45", "safari >= 6", "opera >= 23", "ios >= 6", "android >= 4", "bb >= 10" ], "devDependencies": { "gulp-webp": "^4.0.1" } Let's summarize
By using Gulp you get the following benefits:
- Rapid development
- Support for older browsers
- Automatic image optimization and conversion
- File minification
- No need for your own hosting
- Easy scalability
- Easy project support
Ready gulpfile.js
Download the finished js file and place it in the root folder of the project - gulpfile.js