Last Updated:

Configuring guLP for the layout designer

Hello. In this article we will talk about Gulp settings for the layout designer. Using my own example, I will show you how to install and configure Gulp for the project, what packages I use for automation. How to set up tasks in Gulp and how to combine the execution of several tasks into one.

 

And so...

What is Gulp?

Gulp is a task manager for automatically executing them. Gulp is written in the JavaScript programming language. The command line is used to start tasks. For configuration, the gulpfile.js file is used. Distributed through the npm package manager.

Install Gulp for the project.

To install gulp, we must have npm installed. What is npm and why it is needed is very well described in the article "npm for mere mortals".

Open the terminal and go to the folder with the project. The first thing we need to do is initialize npm to do this run the command:

npm init

You will be required to:

  • Specify the name of the project
  • Project version
  • Description of the project
  • Entry Point
  • Command
  • Git репазиторий
  • Keywords
  • Author's name
  • License

Everything can be left by default (if you do not want to share the project)

Then confirm the entered information.

guLP

It's cool. NPM was initialized. The packages.json file, the package manager configuration file, is now rooted.

Now we can install gulp. First you need to install it globally, and then for the project. For a global installation, run the following command:

npm i –g gulp

guLP 2

Now let's install gulp for the project:

npm install --save-dev gulp

guLP 3

All gulp for the project is installed.

Let's check. Let's create a gulpfile.js file and create one test task in it, which will output to the "I'm working" console.

var gulp         = require('gulp');


gulp.task('test', function() {

console.log('Я работаю');

});

The first we plug in gulp, and the second we call the task function on gulp, which takes two parameters:

  • Task Name
  • Anonymous function that describes our task

Now in the console, run the following command

gulp test

guLP 4

The task works.

Now let's install and connect the packages that help with layout.

Browsersync, a package that allows you to update the page automatically when files change

To install in the console, run the following command:

npm i browser-sync --save-dev

guLP 5

Now let's create a task that will run browser-sync and track file changes.

gulp.task('serve', ['sass'], function() {

browserSync.init({

server: "src/"

});

gulp.watch("src/css/*.css")on('change', browserSync.reload);

gulp.watch("src/*.html").on('change', browserSync.reload);

});

The task is called serve. And browser-sync will update the browser page automatically if files with the extension css (which are located in the src/css folder) and with the extension html (which are located in the src folder) have changed.

To run this task, run the command

gulp serve

I use sass for layout. Therefore, I use the gulp-sass package to compile from sass to css.

Installing and configuring gulp-sass

To install gulp-sass in the console, run the command:

npm i gulp-sass --save-dev

guLP 6

Now let's create a sass task that will compile sass into css. And let's change the serve task so that our browser-sync tracks sass files instead of css.

var gulp         = require('gulp');

var browserSync  = require('browser-sync').create();

var sass         = require('gulp-sass');

gulp.task('serve', ['sass'], function() {



browserSync.init({

server: "src/"

});

gulp.watch("src/sass/*.sass", ['sass']);

gulp.watch("src/*.html").on('change', browserSync.reload);

});

gulp.task('sass', function() {

return gulp.src("src/sass/*.sass")

.pipe(sass().on('error', sass.logError))

.pipe(gulp.dest("src/css"))

.pipe(browserSync.stream());

});

Now, when you run the serve task, the sass task will start.

It's cool. Next, install and connect the gulp-autoprefixer package, which will add prefixes to css styles (for older browsers).

Installing and configuring gulp-autoprefixer

To install gulp-autoprefixer, run the command:

npm i gulp-autoprefixer --save-dev

guLP 7

And add a prefix to the sass task.

var gulp         = require('gulp');

var browserSync  = require('browser-sync').create();

var sass         = require('gulp-sass');

var autoprefixer = require('gulp-autoprefixer');

gulp.task('serve', ['sass'], function() {

browserSync.init({

server: "src/"

});

gulp.watch("src/sass/*.sass", ['sass']);

gulp.watch("src/*.html").on('change', browserSync.reload);

});

gulp.task('sass', function() {

return gulp.src("src/sass/*.sass")

.pipe(sass().on('error', sass.logError))

.pipe(autoprefixer({

browsers: ['last 2 versions'],

cascade: false

}))

.pipe(gulp.dest("src/css"))

.pipe(browserSync.stream());

});

Now, when you run the sass task, you will have on the following:

  1. Compiling sass in css
  2. Add prefixes
  3. Save a file to src/css

The following package combines all the css files into one.

Installing and Configuring contactCss

To install contactCss, use the following command:

npm i gulp-concat-css --save-dev

guLP 8

And let's add the execution of this package to the sass task. (We will merge all css files into style.css)

var gulp         = require('gulp');

var browserSync  = require('browser-sync').create();

var sass         = require('gulp-sass');

var autoprefixer = require('gulp-autoprefixer');

var concatCss    = require('gulp-concat-css');

gulp.task('serve', ['sass'], function() {

browserSync.init({

server: "src/"

});

gulp.watch("src/sass/*.sass", ['sass']);

gulp.watch("src/*.html").on('change', browserSync.reload);

});

gulp.task('sass', function() {

return gulp.src("src/sass/*.sass")

.pipe(sass().on('error', sass.logError))

.pipe(autoprefixer({

browsers: ['last 2 versions'],

cascade: false

}))

.pipe(concatCss("style.css"))

.pipe(gulp.dest("src/css"))

.pipe(browserSync.stream());

});

It's cool. Now let's add a package that renames the files. (We'll need it, the code we'll minimize the css, and the js files)

Installing and configuring gulp-rename

To install gulp-rename, run the following command:

npm i gulp-rename --save-dev

guLP 9

For now, we will not add this package to any tasks.

Installation and configuration of the package to minimize CSS files – clean-css

To install clean-css, run the following command:

npm i gulp-clean-css --save-dev

guLP 10

Now let's create a mincss task that will add the ".min" suffix to the filename, minimize the css file, and save it to app/css

var gulp         = require('gulp');

var browserSync  = require('browser-sync').create();

var sass         = require('gulp-sass');

var autoprefixer = require('gulp-autoprefixer');

var concatCss    = require('gulp-concat-css');

var cleanCSS     = require('gulp-clean-css');

var rename       = require("gulp-rename");

gulp.task('serve', ['sass'], function() {

browserSync.init({

server: "src/"

});

gulp.watch("src/sass/*.sass", ['sass']);

gulp.watch("src/*.html").on('change', browserSync.reload);

});

gulp.task('sass', function() {

return gulp.src("src/sass/*.sass")

.pipe(sass().on('error', sass.logError))

.pipe(autoprefixer({

browsers: ['last 2 versions'],

cascade: false

}))

.pipe(concatCss("style.css"))

.pipe(gulp.dest("src/css"))

.pipe(browserSync.stream());

});

gulp.task('mincss', function() {

return gulp.src("src/css/*.css")

.pipe(rename({suffix: ".min"}))

.pipe(cleanCSS())

.pipe(gulp.dest("app/css"));

})

Great, let's install a gulp package that will minimize js files.

Installing and Configuring the Gulp Package to Minimize js Files —gulp-uglify

To install gulp-uglify, run the following command:

npm i gulp-uglify  --save-dev

guLP 11

Now let's create a task that will add the ".min" suffix to the file, minimize the js file and save it to app/js

var gulp         = require('gulp');

var browserSync  = require('browser-sync').create();

var sass         = require('gulp-sass');

var autoprefixer = require('gulp-autoprefixer');

var concatCss    = require('gulp-concat-css');

var cleanCSS     = require('gulp-clean-css');

var rename       = require("gulp-rename");

var uglify       = require('gulp-uglify');

gulp.task('serve', ['sass'], function() {

browserSync.init({

server: "src/"

});

gulp.watch("src/sass/*.sass", ['sass']);

gulp.watch("src/*.html").on('change', browserSync.reload);

});

gulp.task('sass', function() {

return gulp.src("src/sass/*.sass")

.pipe(sass().on('error', sass.logError))

.pipe(autoprefixer({

browsers: ['last 2 versions'],

cascade: false

}))

.pipe(concatCss("style.css"))

.pipe(gulp.dest("src/css"))

.pipe(browserSync.stream());

});

gulp.task('mincss', function() {

return gulp.src("src/css/*.css")

.pipe(rename({suffix: ".min"}))

.pipe(cleanCSS())

.pipe(gulp.dest("app/css"));

})

gulp.task('minjs', function() {

return gulp.src("src/js/*.js")

.pipe(rename({suffix: ".min"}))

.pipe(uglify())

.pipe(gulp.dest("app/js"));

})

We created the main tasks. But the last two should be performed when posting a project to production. And they have to be done together. let's create a task that will perform the mincss task and then minjs

Creating a task in gulp

Let's create a min task that will run mincss and minjs tasks

var gulp         = require('gulp');

var browserSync  = require('browser-sync').create();

var sass         = require('gulp-sass');

var autoprefixer = require('gulp-autoprefixer');

var concatCss    = require('gulp-concat-css');

var cleanCSS     = require('gulp-clean-css');

var rename       = require("gulp-rename");

var uglify       = require('gulp-uglify');

gulp.task('serve', ['sass'], function() {

browserSync.init({

server: "src/"

});

gulp.watch("src/sass/*.sass", ['sass']);

gulp.watch("src/*.html").on('change', browserSync.reload);

});

gulp.task('sass', function() {

return gulp.src("src/sass/*.sass")

.pipe(sass().on('error', sass.logError))

.pipe(autoprefixer({

browsers: ['last 2 versions'],

cascade: false

}))

.pipe(concatCss("style.css"))

.pipe(gulp.dest("src/css"))

.pipe(browserSync.stream());

});

gulp.task('mincss', function() {

return gulp.src("src/css/*.css")

.pipe(rename({suffix: ".min"}))

.pipe(cleanCSS())

.pipe(gulp.dest("app/css"));

 

})

gulp.task('minjs', function() {

return gulp.src("src/js/*.js")

.pipe(rename({suffix: ".min"}))

.pipe(uglify())

.pipe(gulp.dest("app/js"));

})

gulp.task('min',['mincss', 'minjs']);

All. Let's also set the default task.

Set the default gulp task

gulp.task('default', ['serve']);

Inference.

We have considered what gulp is for, how to install it. Installed additional packages that are necessary for layout and set tasks.

You can find the necessary packages on the https://gulpjs.com/plugins/ website and install them. And then create tasks to streamline the development process.