Настройка GULP для верстальщика
Доброго времени суток. В данной статье мы поговорим о настройках Gulp для верстальщика. Я на своем примере покажу как установить и настроить Gulp для проекта, какими пакетами я пользуюсь для автоматизации. Как настроить задачи в Gulp и как объединить выполнения нескольких задач в одну.
И так…
Что такое Gulp?
Gulp – это менеджер задач для автоматического выполнения их. Gulp написан на языке программирования JavaScript. Для запуска задач используется командная строка. Для конфигурации используется файл gulpfile.js. Распространяется через менеджер пакетов npm.
Установка Gulp для проекта.
Для установки gulp у нас должен быть установлен npm. Что такое npm и для чего он нужен очень хорошо описано в статье «npm для простых смертных» .
Открываем терминал и переходим в папку с проектом. Первое, что нам необходимо сделать это инициализировать npm для этого выполняем команду:
npm init
От вас потребуется:
- Указать название проекта
- Версию проекта
- Описание проекта
- Точку входа
- Команду
- Git репазиторий
- Ключевые слова
- Имя автора
- Лицензия
Все можно оставить по умолчанию (если вы не хотите выкладывать проект в общий доступ)
Затем подтверждаем введенную информацию.
Отлично. NPM инициализировали. Теперь в корне появился файл packages.json – файл конфигурации менеджера пакетов.
Теперь мы можем установить gulp. Вначале надо установить его глобально, а затем для проекта. Для глобальной установки выполните следующую команду:
npm i –g gulp
Теперь установим gulp для проекта:
npm install --save-dev gulp
Все gulp для проекта установлен.
Давайте проверим. Создадим файл gulpfile.js и создадим в нем одну задачу test, которая будет выводить в консоль «Я работаю».
var gulp = require('gulp');
gulp.task('test', function() {
console.log('Я работаю');
});
Первое мы подключаем gulp, и второе мы вызываем функцию task у gulp, которая принимает два параметра:
- Название задачи
- Анонимная функция в которой описывается наша задача
Теперь в консоли выполните следующую команду
gulp test
Задача работает.
Теперь давайте установим и подключим пакеты, которые помогают при верстке.
Browsersync, пакет который позволяет при изменении файлов обновлять страницу автоматически
Для установки в консоли выполняем следующую команду:
npm i browser-sync --save-dev
Теперь давайте создадим задачу, которая будет запускать browser-sync и отслеживать изменения файлов.
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);
});
Задача называется serve. И browser-sync будет обновлять страницу браузера автоматически, если изменились файлы с расширением css (которые расположены в папке src/css) и с расширением html (которые расположены в папке src).
Для запуска данной задачи выполняем команду
gulp serve
Для верстки я использую sass. Поэтому для компиляции из sass в css я использую пакет gulp-sass.
Установка и настройка gulp-sass
Для установки gulp-sass в консоли выполняем команду:
npm i gulp-sass --save-dev
Теперь создадим задачу sass, которая будет компилировать sass в css. И изменим задачу serve, чтобы наш browser-sync отслеживал вместо css файлы sass.
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());
});
Теперь при запуске задачи serve, будет запускаться задача sass.
Отлично. Дальше установим и подключим пакет gulp-autoprefixer, который будет добавлять к css стилям префиксы (для старых браузеров).
Установка и настройка gulp-autoprefixer
Для установки gulp-autoprefixer выполним команду:
npm i gulp-autoprefixer --save-dev
И добавим в задачу sass добавление префикса.
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());
});
Теперь при запуске задачи sass у на с будет:
- Компилирование sass в css
- Добавление префиксов
- Сохранение файла в src/css
Следующий пакет объединяет все css файлы в один.
Установка и настройка contactCss
Для установки contactCss используем следующую команду:
npm i gulp-concat-css --save-dev
И добавим выполнение данного пакета в задачу sass. (Будем все файлы css объединять в 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());
});
Отлично. Теперь добавим пакет, который переименовывает файлы. (Он нам понадобится, кода мы будем минимизировать css, и js файлы)
Установка и настройка gulp-rename
Для установки gulp-rename выполним следующую команду:
npm i gulp-rename --save-dev
Пока данный пакет не будем добавлять ни в какие задачи.
Установка и настройка пакета для минимизации CSS файлов – clean-css
Для установки clean-css выполним следующую команду:
npm i gulp-clean-css --save-dev
Теперь давайте создадим задачу mincss, которая будет добавлять к имени файла суффикс «.min», минимизировать css файл и сохранять в 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"));
})
Отлично, давайте установим gulp пакет, который будет минимизировать js файлы.
Установка и настройка пакета gulp для минимизации js файлов —gulp-uglify
Для установки gulp-uglify выполним следующую команду:
npm i gulp-uglify --save-dev
Теперь создадим задачу, которая будет добавлять к файлу суффикс «.min», минимизировать файл js и сохранять в 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"));
})
Мы создали основные задачи. Но две последние должны выполняться при выкладывании проекта в продакшен. И выполняться должны вместе. Давайте создадим задачу, которая будет выполнять задачу mincss, а потом minjs
Создание задачи в gulp
Создадим задачу min, которая будет запускать задачи mincss и minjs
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']);
Все. Давайте еще зададим задачу по умолчанию.
Задание задачи по умолчанию gulp
gulp.task('default', ['serve']);
Вывод.
Мы с вами рассмотрели для чего нужен gulp, как его установить. Установили дополнительные пакеты, которые необходимы для верстки и задали задачи.
Вы можете самостоятельно находить необходимые пакеты на сайте https://gulpjs.com/plugins/ и устанавливать их. А затем создавать задачи для оптимизации процесса разработки.
