Silex skeleton + Gulp + LiveReload

Вступление
Доброго времени суток всем! Наверное, все слышали о замечательном фреймворке 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 <[e-mail]>"
  ],
  "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 [e-mail]: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 очень много.