Основы сборки на Gulp и автоматизации процессов

На протяжении нескольких лет слышал об автоматизированном потоке разработке, как это экономит время и вообще. Решил разобраться с автоматизацией и, сразу же поменял часть решений связанных с минификацией css и js. Думаю, должно быть интересно.

К использованию автоматизации я пришел, когда понял, что оптимизировать картинки для сайтов ни руками, ни экшенами, ни даже специализированными программами уже не так интересно и эффективно. Решил поискать что-то новое и сразу же обратил внимание на автоматическую сборку проектов. Меня заинтересовали два самых распространенных сборщика, это были grunt и gulp.

Оба эти сборщика являются исполнителями задач (task runner) и работают по одному алгоритму. Сначала мы создаем папку проект (ну или несколько папок, нас вообще никто ничем не ограничивает, но удобнее иметь одну папку). После того, как мы создали какой-то проект, для использования сборщика нам необходимо создать файл с командами, понятный нашему сборщику. После того, как мы настроили все нужные нам действия, скармливаем файл с командами сборщику и все.

Теперь будет проще объяснить принципиальную разницу между этими двумя решениями. Сборщик Grunt для обработки проекта использует файл настройки, в которой команды для выполнения записываются в виде файла настроек в формате JSON. Можно использовать не только JSON, но и JavaScript, но лично мне при использовании Grunt не удобен. Gulp, в отличии от Grunt, в качестве файла команд использует код node.js, который бывает гораздо короче и более выразителен. В общем, попробовав и то, и то, остановился на Gulp, о чем сейчас не жалею.

На процессе установки Gulp подробно останавливаться не буду, отмечу только три момента. Во-первых, для работы Gulp необходимо установить node.js и менеджер пакетов npm. Во-вторых, Gulp необходимо установить как локально, так и глобально. В-третьих, тот функционал, которым я хотел воспользоваться, был только в 4 версии, которая доступна только через Github (можно было и без этого, но так интереснее). Еще обращу внимание читателя, что я не буду освещать такую вещь, как gulp.watch (то есть автоматическое выполнение выбранных тестов при изменении определенных файлов или файлов в папке). Мне данная опция пока ни разу не пригодилась, так как проекты я отлаживаю локально и собираю уже готовый локальный проект и потом выкладываю уже весь проект целиком.

Итак, сам процесс установки Gulp в моем случае начинается с инициализации папки, назовем ее projectpack:

npm init

заполняем все данные для нашего проекта. В идеале в папке можно сразу создать файл gulpfile.js, чтобы он сразу прописался основным файлом в package.json при инициализации. Далее нам необходимо поставить gulp, причем глобально и потом локально. Ставить мы будем сразу 4 версию:

npm install gulpjs/gulp-cli -g
npm install gulpjs/gulp#4.0 --save-dev

Все, теперь надо проверить нашу текущую установленную версию:

[18:08:36] CLI version 1.2.2
[18:08:36] Local version 4.0.0-alpha.2

Все, Gulp установлен и мы можем начать разработку собственной сборки. В свою сборку я буду включать следующие действия: объединение и минификация файлов CSS, объединение и минификация файлов JavaScript и оптимизация изображений. Для всех этих действий нам понадобятся следующие расширения для Gulp: gulp-concat, gulp-imagemin, gulp-autoprefixer, gulp-cssnano, gulp-jshint, gulp-uglify. Все файлы для обработки мы будем хранить в папке source, в которой у нас будут папки css, images, js, а обработанные файлы класть в папку destination.

Устанавливаем следующие расширения для Gulp следующими двумя командами.

npm install jshint #необходимо установить для использования с gulp-jshint
npm install gulp-concat gulp-imagemin gulp-autoprefixer gulp-cssnano gulp-jshint gulp-uglify --save-dev

Если все пакеты встали у нас без проблем, то нам достаточно посмотреть на package.json в разделе devDependencies или выполнить npm list –-depth=0. Все, проверив все поставленные зависимости создаем файл gulpfile.js, в который помещаем следующий код:

// подключаем раширения
var gulp = require('gulp'),
	concat = require('gulp-concat'),
	imagemin = require('gulp-imagemin'),
	autoprefix = require('gulp-autoprefixer'),
	cssnano = require('gulp-cssnano'),
	jshint = require('gulp-jshint'),
	uglify = require('gulp-uglify');

// берем все файлы css из папки источника и обрабатываем
// autoprefix автоматически добавляет вендорные префиксы, теперь из не надо писать :)
// concat добавляем все к одному файлу, так мы получим только один файл
// cssnano минифицирует CSS
// кладем обработанные данные в папку назначение
gulp.task('css',function() {
	console.log('css files started');
	return gulp.src('source/css/**/*.css')
		.pipe(autoprefix({
			browsers: ['last 2 versions']
		}))
		.pipe(concat('styles.css'))
		.pipe(cssnano())
		.pipe(gulp.dest('destination/css/'));
});

// берем все файлы js из папки источника и обрабатываем
// jshint проверяет js код на потенциальные ошибки и проблемы
// concat добавляем все к одному файлу, так мы получим только один файл
// uglify минифицирует js файл
// кладем обработанные данные в папку назначение
gulp.task('js', function() {
	console.log('javascript files started');
	return gulp.src('source/js/**/*.js')
		.pipe(jshint())
		.pipe(jshint.reporter('default'))
		.pipe(concat('scripts.js'))
		.pipe(uglify().on('error', function(e) {console.log(e);}))
		.pipe(gulp.dest('destination/js/'));
});

// берем все картинки из папки источника и обрабатываем
// оптимизируем gif
// оптимизируем jpg
// оптимизируем png
// оптимизируем svg
// кладем обработанные данные в папку назначение
gulp.task('img',function() {
	console.log('img compression started');
	return gulp.src('source/images/**/*.+(png|jpg|jpeg|gif|svg)')
		.pipe(imagemin([
			imagemin.gifsicle({interlaced: true}),
			imagemin.jpegtran({progressive: true}),
			imagemin.optipng({optimizationLevel: 5}),
			imagemin.svgo({plugins: [{removeViewBox: true}]})
		]))
		.pipe(gulp.dest('destination/images/'));
});

// по умолчанию мы параллельно запускаем все три задачи на выполнение
// gulp.parallel есть только в 4 версии Gulp именно за этим мы ее и ставили
gulp.task('default',gulp.parallel('css','js','img'));

Все, теперь можно прямо из командной строки либо просто запустить gulp, тогда у нас выполнится задача по умолчанию, а именно все три задачи. Или мы можем выполнить gulp css, для обработки CSS файлов, выполнить gulp js, для обработки javasript файлов или отдельно выполнить gulp img, для обработки картинок.

UPDATE: Совсем забыл сказать, что использование сборщиков пакетов позволяет отказаться от разных серверных решений по минификации, будь то, отдельное решение как minify или готовое дополнение к MODX, как MinifyX. С точки зрения скорости отдачи статические файлы лучше, а сборщики делают возможность собирать их нажатием одной кнопки, или вообще без нажатий :)