Настройка GULP для верстальщика

Ромчик
0

gulpДоброго времени суток. В данной статье мы поговорим о настройках Gulp для верстальщика. Я на своем примере покажу как установить и настроить Gulp для проекта, какими пакетами я пользуюсь для автоматизации. Как настроить задачи в Gulp и как объединить выполнения нескольких задач в одну.

И так…

Что такое Gulp?

Gulp – это менеджер задач для автоматического выполнения их. Gulp написан на языке программирования JavaScript. Для запуска задач используется командная строка. Для конфигурации используется файл gulpfile.js. Распространяется через менеджер пакетов npm.

Установка Gulp для проекта.

Для установки gulp у нас должен быть установлен npm. Что такое npm и для чего он нужен очень хорошо описано в статье «npm для простых смертных» .

Открываем терминал и переходим в папку с проектом. Первое, что нам необходимо сделать это инициализировать npm для этого выполняем команду:


npm init

От вас потребуется:

  • Указать название проекта
  • Версию проекта
  • Описание проекта
  • Точку входа
  • Команду
  • Git репазиторий
  • Ключевые слова
  • Имя автора
  • Лицензия

Все можно оставить по умолчанию (если вы не хотите выкладывать проект в общий доступ)

Затем подтверждаем введенную информацию.

Инициализация npm

Отлично. NPM инициализировали. Теперь в корне появился файл packages.json – файл конфигурации менеджера пакетов.

Теперь мы можем установить gulp. Вначале надо установить его глобально, а затем для проекта. Для глобальной установки выполните следующую команду:


npm i –g gulp

Глобальная установка Gulp

Теперь установим gulp для проекта:


npm install --save-dev gulp

Установка Gulp для проекта

Все gulp для проекта установлен.

Давайте проверим. Создадим файл gulpfile.js и создадим в нем одну задачу test, которая будет выводить в консоль «Я работаю».


var gulp         = require('gulp');


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

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

});

Первое мы подключаем gulp, и второе мы вызываем функцию task у gulp, которая принимает два параметра:

  • Название задачи
  • Анонимная функция в которой описывается наша задача

Теперь в консоли выполните следующую команду


gulp test

Проверка работы Gulp

Задача работает.

Теперь давайте установим и подключим пакеты, которые помогают при верстке.

Browsersync, пакет который позволяет при изменении файлов обновлять страницу автоматически

Для установки в консоли выполняем следующую команду:


npm i browser-sync --save-dev

Установка browser sync

Теперь давайте создадим задачу, которая будет запускать 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

Установка gulp sass

Теперь создадим задачу 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

Установка gulp autoprefix

И добавим в задачу 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 у на с будет:

  1. Компилирование sass в css
  2. Добавление префиксов
  3. Сохранение файла в src/css

Следующий пакет объединяет все css файлы в один.

Установка и настройка contactCss

Для установки contactCss используем следующую команду:


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

Установка gulp concat css

И добавим выполнение данного пакета в задачу 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

Установка gulp rename

Пока данный пакет не будем добавлять ни в какие задачи.

Установка и настройка пакета для минимизации CSS файлов – clean-css

Для установки clean-css выполним следующую команду:


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

Установка gulp clean css

Теперь давайте создадим задачу 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

Установка gulp uglify

Теперь создадим задачу, которая будет добавлять к файлу суффикс «.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/  и устанавливать их. А затем создавать задачи для оптимизации процесса разработки.

Понравилась статья? Поделись с друзьями.
  • Add to favorites
  • Добавить ВКонтакте заметку об этой странице
  • Twitter
  • Facebook
  • Мой Мир
  • LiveJournal
  • Одноклассники
  • Блог Я.ру
  • MySpace
  • FriendFeed
  • В закладки Google
  • Google Buzz
  • Яндекс.Закладки
  • Reddit
  • StumbleUpon
  • Technorati
  • del.icio.us
  • БобрДобр
  • LinkedIn
  • Memori.ru
  • Сто закладок
  • Blogger

©2012-2018 По всем вопросам обращайтесь через форму обратной связи

Яндекс.Метрика