» Gulp + Compass

Доброго времени суток!

Сегодня я продемонстрирую мой конфиг для gulp, которым я собираю свои проекты. Я не претендую на 100% правильность и полноту описания всех возможностей. Может кто-нибудь подчерпнет идеи для своих проектов.

var gulp = require('gulp'); // Подключение самого gulp

var compass = require('gulp-compass'); // Плагин для компиляции compass файлов

var minifyCSS = require('gulp-minify-css'); // Минификация CSS

var concatJS = require('gulp-concat'); // Конкатенация JS

var uglify = require('gulp-uglify'); // Минификация JS

// Вспомогательные библиотеки

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

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

var path = require('path');

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

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

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

// Пути для папок, используемых в проекте (замените на свои)

var bundle = 'Catalog';

var scssDir = 'src/' + bundle + 'Bundle/Resources/public/scss';

var cssDir = 'src/' + bundle + 'Bundle/Resources/public/css';

var jsDir = 'src/' + bundle + 'Bundle/Resources/public/js';

// Точка входа для gulp

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

gulp.run('styles');

gulp.run('scripts');

livereload.listen();

//watch .scss files

gulp.watch(scssDir + '/*.scss', ['styles']);

//watch .js files

gulp.watch(jsDir + '/hlebon/*.js', ['scripts']);

});

// Очищаем папку перед тем как собрать CSS файлы

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

return gulp.src(cssDir)

.pipe(clean());

});

//the title and icon that will be used for the Grunt notifications

var notifyInfo = {

title: 'Gulp',

icon: path.join(__dirname, 'gulp.png')

};

//error notification settings for plumber

var plumberErrorHandler = { errorHandler: notify.onError({

title: notifyInfo.title,

icon: notifyInfo.icon,

message: "Error: <%= error.message %>"

})

};

gulp.task('styles', ['clean'], function () {

// т.к. я использую в своем проекте Font Awesome и хочу подключать его отдельным файлом, то каждый раз я его копирую в папку с CSS

gulp.src(cssDir + '/../lib/font-awesome.min.css')

.pipe(gulp.dest(cssDir));

return gulp.src(scssDir + '/application.scss')

.pipe(plumber(plumberErrorHandler))

.pipe(compass({

sass: scssDir

}))

.pipe(minifyCSS())

.pipe(rename('all.min.css'))

.pipe(gulp.dest(cssDir))

.pipe(notify({

title: notifyInfo.title,

icon: notifyInfo.icon,

message: '<%= file.relative %> - done!'

}))

.pipe(livereload());

});

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

//gulp.src(jsDir + '/hlebon/*.js')

gulp.src([ jsDir + '/hlebon/menu-top.js', jsDir + '/hlebon/sidebar.js', jsDir + '/hlebon/observer-resize.js'])

.pipe(concatJS('last_file_hlebon.js'))

.pipe(gulp.dest(jsDir));

return gulp.src(jsDir + '/*.js')

.pipe(uglify())

.pipe(concatJS('all.js'))

.pipe(gulp.dest(jsDir + '/min'))

.pipe(notify({

title: notifyInfo.title,

icon: notifyInfo.icon,

message: '<%= file.relative %> - done!'

}))

});

Расскажу об основных моментах:

Начинается все с task’а default
Каждый раз когда я запускаю gulp я хочу чтобы он сразу пересобрал проект (на случай, если я что-то уже поправил, а gulp забыл включить)
Подключаю livereload для CSS файлов (чтобы не перезагружать страницу каждый раз)
Ставлю 2 watch на css и js файлы, которые выполняют те же task, что и во 2-ом пункте

Теперь о каждом task в отдельности:

Styles (CSS)
1. В своих проектах я использую Font-Awesome. Я не хочу конкатенировать этот файл в свой css, поэтому файл должен лежать в той же папке что и css, но отдельным файлом. Т.к. каждый раз перед task “styles” вызывается task “clean”, который очищает папку css, то необходимо, чтобы файл font-awesome.min.css копировался в целевую папку.
2. Дальше начинается обработка Compass файлов. Основная идея состоит в том, что у меня есть 1 файл application.scss, в котором я подключаю все остальные файлы (header.scss, content.scss, footer.scss …). Я это сделал для того, чтобы потом не разбираться с дублированием CSS и конкатенацией файлов. Конечно возникает проблема, что моя IDE не понимает откуда я беру переменные, находящиеся в других файлах, но я согласен с этим мириться. (Если кто-то знает как собрать все scss файлы в один без дублирования @import, то расскажите мне)
3. Из интересных моментов хочется отметить plumber – это плагин, который перехватывает все ошибки, которые будут ниже по pipe и позволяет обрабатывать их в одном месте. (Грубо говоря он к каждой функции добавляет .on(‘error’, function(){…}) к каждой функции. Если Вас заинтересовала эта тема советую просвятиться тут.
4. Notify я использую несколько модифицирован. Исключительно в эстетических целях в него добавлен title и icon, а message выводится название файла, который был только что собран.
5. В конце вызывается livereload, которая без перезагрузки страницы обновляет css файл

Scripts (JS)

В этом task все очень похоже, но есть несколько своих особенностей. Чтобы лучше их понять нужно знать структуру файлов

/js
	hlebon	мои файлы
	min	результирующий минифицированный файл
	./	библиотеки, которые я использую в своем проекте (jQuery…)

Идея состоит в том, чтобы собрать все мои личные файлы из /js/hlebon в 1 файл в папку /js/, где уже находятся библиотеки. Основной момент состоит в том чтобы файлы конкатенировались в определенном порядке. Для регулирования порядка я просто перечисляю все файлы в том порядке, которым мне нужен. Если бы я не указывал его, то файлы собирались по алфавиту.
А затем все эти файлы (мой общий + библиотеки) сконкатенировать в один и положить в /js/min

Как-то так…

Related Posts