Вступление
Доброго времени суток всем! Наверное, все слышали о замечательном фреймворке Silex, а некоторым, и мне в том числе, он уже успел полюбиться. Основная изюминка микрофреймворков в их простоте. Скачал, настроил и можно работать. И было бы совсем хорошо иметь некую заготовку, которая бы запускалась «на раз-два», парой команд, дабы избавиться от повторяющихся действий, тем самым экономя свое время. Плюс ко всему, было бы совсем хорошо, иметь на борту Gulp и Bower из NodeJS. Подумано — сделано. Кому интересно посмотреть, что у меня получилось, милости просим под кат…
Как? Вы еще не знакомы с Gulp и Bower? Тогда мы идем к вам!
Gulp — это таск менеджер. Он нужен для автоматизации действий, которые приходится выполнять в ходе разработки проекта, таких как минификация js или запуск препроцессоров для css или CoffeeScript и это лишь малая часть его многочисленных умений. Поистине для gulp существует огромное кол-во плагинов. С более подробным описанием Gulp можно ознакомиться в этой статье.
Bower — это менеджер пакетов для web библиотек. С его помощью с легкостью ставятся Bootstrap, js библиотеки вроде jQuery, js фреймворки вроде AngularJS и тд. По аналогии с менеджером пакетов PHP composer в Bower, есть файл настроек bower.json Подробнее, о том, как его установить и что это такое, можно почерпнуть из этой статьи.
Какая польза от Gulp и Bower в проекте на Silex?
В Silex и вообще в PHP, вещей вроде Gulp, нет в принципе. По этой причине, польза, должна быть очевидна. Использование Gulp снимает с вас обязанность вручную запускать различные компиляторы, позволяет ускорить процесс разработки и еще очень очень много чего.
Далее, описание настроек и установки, а пока)
Файлы настроек
Файл gulpfile.js в моей сборке выглядит так:
Спойлер gulpfile.js
'use strict';
var gulp = require('gulp'),
livereload = require('gulp-livereload'),
sass = require('gulp-sass'),
concat = require('gulp-concat'),
csso = require('gulp-csso'),
bc = './bower_components/',
web = './web/',
vendor = web+'vendor/', // папка с вендорами
build = web+'build/', // папка для скомпилированных файлов
src = web+'src/'; // папка с кодом нашего проекта
gulp.task('js', function() {
gulp.src(src+'**/*.js')
.pipe(concat('app.js'))
.pipe(gulp.dest(build+'js/'))
});
gulp.task('sass', function () {
gulp.src(src+'**/*.scss')
.pipe(sass())
.pipe(concat('style.min.css'))
.pipe(csso())
.pipe(gulp.dest(build+'css/'));
});
gulp.task('libs', function() {
gulp.src(bc+'jquery/dist/jquery.js')
.pipe(gulp.dest(vendor+'libs/js/'));
gulp.src(bc+'bootstrap/dist/**/*.*')
.pipe(gulp.dest(vendor+'libs/bootstrap/'));
});
gulp.task('watch', function() {
livereload.listen({start: true});
gulp.watch('app/Resources/**').on('change', livereload.changed);
gulp.watch('app/config/**').on('change', livereload.changed);
gulp.watch('src/**').on('change', livereload.changed);
gulp.watch('web/src/**').on('change', livereload.changed);
gulp.watch(src+'**/*.js', ['js']);
gulp.watch(src+'**/*.scss', ['sass']);
gulp.watch(bc+'**/*.js', ['js']);
gulp.watch(bc+'**/*.scss', ['sass']);
});
gulp.task('default', [
'libs',
'js',
'sass',
'watch'
]);
Как видно, тут все довольно просто и файл легко переписать под свои нужды, если что-то не нужно или чего не хватает.
'gulp-livereload' — нужен для разработки в live режиме. О том как выглядит live режим разработки и что это, можно увидеть в видео от Sorax'a. В своей заготовке я использую NodeJs, а не руби, как в его видео, но в целом все работает примерно также и дает понимание зачем это нужно.
'gulp-sass' — нужен для компиляции scss на лету.
'gulp-concat' — как видно из названия, нужен для объединения файлов в один.
Файл bower.json — нужен для установки пакетов вроде Bootstrap.
Спойлер bower.json
{
"name": "app",
"version": "1.0.0",
"authors": [
"sunway_os <forsag1982@yandex.ru>"
],
"description": "lighty build",
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test"
],
"dependencies": {
"bootstrap": "~3.3.5"
}
Файл package.json — нужен для установки gulp его плагинов.
Спойлер package.json
{
"name": "name",
"version": "1.0.0",
"repository": "https://github.com/Maxlab",
"devDependencies": {
"gulp": "^3.9.0",
"gulp-livereload": "^3.8.0",
"gulp-concat": "^2.5.2",
"gulp-csso": "^1.0.0",
"gulp-sass": "^1.3.3"
}
}
Файл composer.json — нужен для установки пакетов в PHP.
Спойлер composer.json
{
"require": {
"silex/silex": "<1.2.2",
"twig/twig": "~1.13,>=1.13.1",
"moust/silex-cache": "1.0.*@dev",
"symfony/twig-bridge": "~2.5",
"symfony/templating": "~2.6",
"silex/web-profiler" : "1.0.6",
"monolog/monolog": ">=1.0.0",
"symfony/monolog-bridge": "v2.4.2",
"firedog/firedog": "dev-master"
}
}
Моя заготовка
В итоге, у меня получилась вот такая заготовка Silex+Gulp+LiveReload
Как и планировал, все ставится через консоль парой команд. Понадобятся два расширения для хрома LiveReload и FirePHP4Chrome.
Нужен NodeJs, если его нет — ставим.
$ sudo apt-get install nodejs
Также нужен Bower, если нет, то ставим и его.
$ sudo npm install bower -g
Создаете папку, настраиваете сервер, заходите в папку и выполняете команды:
Раз
$ git init && git remote add master git@github.com:Maxlab/silex-gulp-skeleton.git && git remote -v && git fetch master && git checkout master && git remote remove master && cp ./app/config.distr.php ./app/config.php
Два
$ composer install && sudo npm install && bower install && find . -type d -exec sudo chmod 755 {} \; && find . -type f -exec sudo chmod 644 {} \; && gulp
Все, открываем проект и можно работать.
P.S.
Такую заготовку, можно сделать и для других фреймворков.
Я внес в заготовку минимальный набор фич, которые сам часто использую и не надеюсь на то, что данный набор удовлетворит всех, но думаю, что он подойдет многим. К тому же, можно сделать форк и добавить в набор то, что нужно вам — плагинов в gulp очень много.