10/13/2017 - #development
by: RĂ©gis Grutter

The front-end web projects are usually highly complex lifelong adventures. They are sprouting with time and reflection to get fully developed. Before reaching this state of a ripeness fruit, front-end projects last in a fuzzy draft condition.

It’s high  time to give life to your sad webdesign mockups. Who never got  scared by the amount of CSS lines foreseen in a brand new project ? “From where should I begin ?” is the most common question before typing any line of code. One of the answer is pretty obvious : implementing the Gulp toolkit.

This task automation tool will become your best ally in your quest for the Grall. See also the toolkit Grunt, aka the Doppelgänger of Gulp, in the battle of task automatization. In this battle, Gulp is one step ahead with its easier configuration and faster implementation.

In your local environment, Gulp will refresh automatically your browser after any code modification. Here is an insight of a few features among many others :

  • Optimize and minify the CSS, JS and images

  • Compile LESS/SASS automatically

  • Auto-refreshing the browser after any modifications

  • Adding prefix in CSS properties


Before starting...

Enjoying the super-powers of Gulp will require the setup of Node.js in your environment. Open your terminal and type the following commands :

sudo apt-get update
sudo apt-get install nodejs npm


Gulp installation 

npm install gulp -p

After successfully installed Gulp, these following two files must be placed in the root of your project. The following code is integrated to work on a Magento 1 project.


  • Package.json contains the list of plugins

 "name": "Project name",
 "author": "BlackbirdAgency",
 "description": "Project name node modules dependencies for local development",
 "version": "1.0.0",
 "license": "(OSL-3.0 OR AFL-3.0)",
 "repository": {
   "type": "git",
   "url": "https://github.com/magento/magento2.git"
 "homepage": "http://magento.com/",
 "devDependencies": {
   "glob": "^5.0.14",
   "gulp": "^3.9.1",
   "gulp-concat": "^2.6.1",
   "gulp-jshint": "^2.0.4",
   "gulp-less": "^3.3.0",
   "gulp-livereload": "^3.8.1",
   "gulp-rename": "^1.2.2",
   "gulp-uglify": "^2.0.1",
   "gulp-sourcemaps": "^2.0.1",
   "gulp-util": "^3.0.8",
   "imagemin-svgo": "^4.0.1",
   "jshint": "^2.9.4",
   "load-grunt-config": "^0.16.0",
   "morgan": "^1.5.0",
   "node-minify": "^1.0.1",
   "path": "^0.11.14",
   "serve-static": "^1.7.1",
   "strip-json-comments": "^1.0.2",
   "underscore": "^1.7.0"
 "engines": {
   "node": ">=0.10.0"
 "dependencies": {
   "less": "^2.7.2"

To install these plugins, type the following command in your terminal, still in the root folder :
npm install


All the plugins will be installed in the node_modules folder generated in the root folder.


  • Gulpfile.js contains the tasks that will be executed

var gulp = require('gulp'),
   jshint = require('gulp-jshint'),
   less = require('gulp-less'),
   concat = require('gulp-concat'),
   uglify = require('gulp-uglify'),
   rename = require('gulp-rename'),
   gutil = require('gulp-util'),
   livereload = require('gulp-livereload'),
   sourcemaps = require('gulp-sourcemaps');
gulp.task('less', function() {
   return gulp.src(['skin/frontend/theme/default/css/styles.less'])
       .on('error', swallowError)
       .pipe( sourcemaps.write() )
       .pipe( livereload() )
gulp.task('watch', function() {
   gulp.watch('skin/frontend/theme/default/css/*.less', ['less']);
gulp.task('default', ['less', 'watch']);
function swallowError (error) {
   // If you want details of the error in the console

The source and destination paths must be adapted to your environment : gulp.src(“...”) and gulp.dest(“...”). The gulp-less plugin is compiling the LESS to CSS.

Add to your .bashrc file the following alias :
alias gulp='./node_modules/gulp/bin/gulp.js'

Install and activate the LiveReload of your Google Chrome, this will automatically refresh  your page after file modifications.

After that, this last command will activate the auto compilation of LESS and browser auto-refresh :


  • styles.less

@import 'global.less';
@import 'navigation.less';

  • global.less

// Colors variable
@import 'global.less';
@import 'navigation.less';

  • navigation.less

@import global.less';
.page-wrapper {
.nav-sections {
 background-color: @blue;
 .navigation {
   ul.ui-menu {
     text-align: right;
     li.level0 {
       a {
         padding: 10px 20px;
           color: @base;
           text-transform: uppercase;
           font-size: 14px;
           font-weight: 500;
           letter-spacing: 2px;

  • styles.css (automatically generated by Gulp)

.page-wrapper .nav-sections {
background-color: #2e3285;
.page-wrapper .nav-sections .navigation ul.ui-menu {
text-align: right;
.page-wrapper .nav-sections .navigation ul.ui-menu li.level0 a {
padding: 10px 20px;
.page-wrapper .nav-sections .navigation ul.ui-menu li.level0 a span {
color: #1a1a2a;
text-transform: uppercase;
font-size: 14px;
font-weight: 500;
letter-spacing: 2px;

Thus, it takes almost nothing, a zest of Gulp and a few adjustments of process, to avoid the tedious long-term frontend development. Your CSS will then arise from its ashes like the shining Sun over the far mountains. Brace yourself, Gulp is coming !


Write your comment

for take-off?

Blackbird is a web agency specialized in the development of eCommerce websites. We are Magento Experts and we offer our services and advice for e-marketing, strategy, branding, deployment and methodology.

+339 50 66 21 38

Legal terms
Agency 30, Avenue du Rhin
67100 Strasbourg