Сборка front-end’а на пальцах с помощью Gulp

4709
views

Как установить и настроить gulp

В наше время сборка front-end’a является уже неким стандартом в разработке сайтов и веб-приложений. Есть множество вариантов сборки ресурсов сайта и каждый разработчик выбирает для себя сам, какие инструменты для этого использовать. Я же хочу поведать о процессе сборке с помощью менеджера задач, которому отдал предпочтение, а именно GULP.

В двух слова о Gulp

Gulp —  это менеджер задач (как grunt) для сборки ресурсов и выполнения рутинных задач. Он прост в использовании. Это крайне полезный швейцарский нож и может выполнять множество функций. А самое главное он быстр.

Установка Gulp

Прежде всего для работы gulp необходимо установить node.js

Находясь в корне проекта инициализируем проект для npm.

npm init

Установим gulp и добавим его в зависимости проекта

npm install --save-dev gulp

Теперь необходимо создать файл в корне проекта gulpfile.js и создадим пустую задачу для примера.

var gulp = require('gulp');

gulp.task('default', function() {
  // место для кода, который будет выполняться в задаче
});

Собственно так и будут выглядеть задачи в gulp. Практически для каждой задачи, которую может понадобиться выполнить для сборки вашего front-end’a есть плагины. Об установке и использовании плагинов далее.

Сборка css

Думаю в наши дни уже все используют css препроцессоры. Если вы еще не используете какой-либо css препроцессор, вам срочно необходимо ознакомиться с Используем препроцессор sass или Как начать работать с LESS и начать использовать sass или less в работе.

Я предпочитаю использовать sass, поэтому покажу на примере плагина sass.

Установка плагина

npm install gulp-sass --save-dev

Две простейших задачи для сборки и live сборки sass файлов при их изменении.

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

//Задача для сборки
gulp.task('sass', function () {
  return gulp.src('./sass/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./css'));
});

//Задача, после запуска которой, gulp будет следить за изменениями файлов
gulp.task('watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});

Теперь прописав в консоли gulp sass, gulp соберет все ваши sass файлы в указанной директории.
А выполнив gulp watch запустится процесс, который будет следить за изменением sass файлов, и при изменении сразу их компилировать.

Для остановки процесса достаточно нажать на клавиатуре Ctrl + C.

Объединение JavaScript файлов

Для этого необходимо установить плагин gulp-concat.

npm install --save-dev gulp-concat

Теперь добавим задачу в наш gulpfile.js.

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

gulp.task('sass', function () {
  return gulp.src('./sass/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('dist/css'));
});

gulp.task('scripts', function() {
  return gulp.src('src/**/*.js')
    .pipe(concat('app.js'))
    .pipe(gulp.dest('dist/js'));
});

gulp.task('watch', ['sass', 'scripts'], function() {
  gulp.watch('css/**/*.sass', ['sass']);
  gulp.watch('src/**/*.js', ['scripts']);
});

Обратите внимание, что задачи sass и scripts находятся в зависимостях у задачи watch.

Теперь скрипты будут объединяться по команде gulp scripts или же при gulp watch.

Минификация ресурсов

Для минификации JavaScript файлов необходимо установить плагин uglify, а для минификации sass файлов необходимо добавить опцию {outputStyle: 'compressed'}.

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

gulp.task('sass', function () {
  return gulp.src('./sass/**/*.scss')
    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
    .pipe(gulp.dest('dist/css'));
});

gulp.task('scripts', function() {
  return gulp.src('src/**/*.js')
    .pipe(concat('app.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'));
});

gulp.task('watch', ['sass', 'scripts'], function() {
  gulp.watch('css/**/*.sass', ['sass']);
  gulp.watch('src/**/*.js', ['scripts']);
});

Версионность ресурсов

Версионность ресурсов необходима для контроля кешированных файлов в браузерах посетителей. Если вы работаете с html файлами, то имена создаваемым файлам и пути к ним можно генерировать с помощью плагина gulp-rev или gulp-rev-all. С помощью них выходят файлы файлы с именами такого типа: app-ef62e7.js .
Но когда вы работаете с движками сайтов и вам нужно в определенном файле (любого формата), в определенном месте прописать необходимые пути, то реализовать это можно таким способом.

В первую очередь установим плагины gulp-html-replace и gulp-rename.

npm install gulp-html-replace --save-dev
npm install gulp-rename --save-dev

gulp-rename — будет называть файлы, а gulp-html-replace будет прописывать пути в указанных файлах.

Имена файлов

Теперь дополним наш gulpfile новыми строками:

var gulp = require('gulp');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var htmlreplace = require('gulp-html-replace');
var rename = require("gulp-rename");
var time = Date.now();

gulp.task('path', function () {
    gulp.src('/assets_tpl.php')
        .pipe(htmlreplace({
            'js': [
                '/dist/js/app-'+time+'.js'
            ],
            'css': [
                '/dist/css/bundle-'+time+'.css'
            ]
        }))
        .pipe(rename('assets.php'))
        .pipe(gulp.dest('/'));
});

gulp.task('sass',['path'], function () {
  return gulp.src('./sass/**/*.scss')
    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
    .pipe(concat('bundle-'+time+'.css'))
    .pipe(gulp.dest('dist/css'));
});

gulp.task('scripts',['path'], function() {
  return gulp.src('src/**/*.js')
    .pipe(concat('app-'+time+'.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'));
});

gulp.task('watch', ['sass', 'scripts'], function() {
  gulp.watch('css/**/*.sass', ['sass']);
  gulp.watch('src/**/*.js', ['scripts']);
});

Переменная time создана для генерации уникального числа в момент инициализации gulp скрипта. В данном случае это простой timestamp. Он и будет прописываться в имя файла.

Пути к файлам

Также создана новая задача path, которая по файлу-шаблону assets_tpl.php сгенерирует файл assets.php с боевыми путями к файлам.

Вот как выглядит файл-шаблон assets_tpl.php:

<!-- build:css -->
<!-- endbuild -->

<!-- build:js -->
<!-- endbuild -->

Вместо указанных тегов в сгенерированном файле будут прописаны пути к файлу.

Так же стоит обратить внимание, что задача path добавлена как зависимость для задач sass и scripts.

Но теперь у нас при каждом выполнении любой из задач будут создаваться новые файлы, а старые будут оставаться. Для того, что бы хранились только свежие файлы, необходимо чистить папку с скомпилированными ресурсами. Для этого необходимо установить плагин gulp-clean.

npm install --save-dev gulp-clean

Затем добавим задачу с флагом {read: false}, для ускоренного удаления.

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

gulp.task('clean', function () {
    return gulp.src('dist', {read: false})
        .pipe(clean());
});

И создадим задачу build, которая будет выполнять чистку, а затем собирать все наши ресурсы.

gulp.task('build',['clean','sass','scripts','path'], function () {});

Таким образом выполнив в консоли команду gulp build, gulp полностью автоматически соберет весь front-end для проекта. Данную команду также можно повесить на хук после деплоя проекта на сервер / хостинг.

Заключение

В данной статье показан пример для ознакомления, как можно собирать файлы стилей и скриптов для ваших проектов. Вариантов и плагинов множество и выбрать каждый может под себя сам.

Если вам полезен данный материал, подписывайтесь на мой блог, чтобы получать уведомления о новых публикациях на темы: верстки, javascript и разработки кроссплатформенных мобильных приложений.

Подписаться на блог по эл. почте