15
May
2016
Доброго времени суток!
Сегодня я продемонстрирую мой конфиг для gulp, которым я собираю свои проекты. Я не претендую на 100% правильность и полноту описания всех возможностей. Может кто-нибудь подчерпнет идеи для своих проектов.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 |
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)
- В своих проектах я использую Font-Awesome. Я не хочу конкатенировать этот файл в свой css, поэтому файл должен лежать в той же папке что и css, но отдельным файлом. Т.к. каждый раз перед task “styles” вызывается task “clean”, который очищает папку css, то необходимо, чтобы файл font-awesome.min.css копировался в целевую папку.
- Дальше начинается обработка Compass файлов. Основная идея состоит в том, что у меня есть 1 файл application.scss, в котором я подключаю все остальные файлы (header.scss, content.scss, footer.scss …). Я это сделал для того, чтобы потом не разбираться с дублированием CSS и конкатенацией файлов. Конечно возникает проблема, что моя IDE не понимает откуда я беру переменные, находящиеся в других файлах, но я согласен с этим мириться. (Если кто-то знает как собрать все scss файлы в один без дублирования @import, то расскажите мне)
- Из интересных моментов хочется отметить plumber – это плагин, который перехватывает все ошибки, которые будут ниже по pipe и позволяет обрабатывать их в одном месте. (Грубо говоря он к каждой функции добавляет .on(‘error’, function(){…}) к каждой функции. Если Вас заинтересовала эта тема советую просвятиться тут.
- Notify я использую несколько модифицирован. Исключительно в эстетических целях в него добавлен title и icon, а message выводится название файла, который был только что собран.
- В конце вызывается livereload, которая без перезагрузки страницы обновляет css файл
- Scripts (JS)
- В этом task все очень похоже, но есть несколько своих особенностей. Чтобы лучше их понять нужно знать структуру файлов
/js hlebon мои файлы min результирующий минифицированный файл ./ библиотеки, которые я использую в своем проекте (jQuery…) - Идея состоит в том, чтобы собрать все мои личные файлы из /js/hlebon в 1 файл в папку /js/, где уже находятся библиотеки. Основной момент состоит в том чтобы файлы конкатенировались в определенном порядке. Для регулирования порядка я просто перечисляю все файлы в том порядке, которым мне нужен. Если бы я не указывал его, то файлы собирались по алфавиту.
- А затем все эти файлы (мой общий + библиотеки) сконкатенировать в один и положить в /js/min
- В этом task все очень похоже, но есть несколько своих особенностей. Чтобы лучше их понять нужно знать структуру файлов
Как-то так…