Silex skeleton + Gulp + LiveReload

image

Вступление
Доброго времени суток всем! Наверное, все слышали о замечательном фреймворке 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 снимает с вас обязанность вручную запускать различные компиляторы, позволяет ускорить процесс разработки и еще очень очень много чего.

Далее, описание настроек и установки, а пока)
image

Файлы настроек
Файл 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 очень много.

Similar posts

AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 14

    0
    composer create-project бы лучше запилили.
      0
      разве npm вместе с нодой не ставится? зачем его руками устанавливать?
        0
        Поправил. В ранних версиях нужно было руками, по инерции написал.
        0
        а зачем от рута sudo composer install?
          –2
          Да, по хорошему должно ставится не из под рута и без ругани на права — иногда так и происходит, а иногда нет. Следом идет sudo chmod -R 777. которая, приводит в норму ситуацию с правами на папки. У моего знакомого регулярно ругается на права при установке не из под рута, вот и решил, что у кого-то может быть также, поэтому sudo composer install.
            +2
            >> У моего знакомого регулярно ругается на права при установке
            так может с правами лучше разобраться? не думаю, что там rocket science
            >> приводит в норму ситуацию с правами на папки.
            … и делает все файл исполняемыми… с полным доступом кому угодно…

            Зачем плохому учить? Потом так в продакшен и будут выкладывать… и как результат: welcome to botnet?
              0
              >>… и делает все файл исполняемыми… с полным доступом кому угодно…
              Какие есть причины заморачиваться с правами на своей машине, куда кроме вас ни у кого доступа нет? И при всем уважении, на продакшене с правами отдельная песьня.
              >>Зачем плохому учить? — где я учу плохому?)
                +1
                Грубо говоря ваше «иногда не работает потому sudo + chmod 777». Вообще chmod 777 это уже не сильно то хорошо.
                  0
                  почему? можете привести примеры. Какие есть причины заморачиваться с правами на своей машине, куда кроме вас ни у кого доступа нет?
                    +1
                    Вы можете делать у себя на машине все, что Вам вздумается. Вы в статье, которую прочитает немало людей, пишете так, как будто влепить 777 на все на свете — норма
                  +1
                  на продакшене большей частью другие только пользователь: группа, сами права rwx не меняются в большинстве случаев.
                    –1
                    Меняются на 775, но не об этом речь. Настройка прав на сервере это отдельная песня, поэтому не вижу особого смысла заморачиваться локально. В большинстве случаев, если мы говорим о продакшене, запускается $ git config core.filemode false чтобы git не отслеживал права, ну а дальше доверяем разруливать права тому, кто и должен этим заниматься по должности — админу. Он на это учился и сервер это его компетенция.
                    Дайте угадаю, Вы админ?)
                      0
                      в продакшене на 775? Ну ок.
                      В моих личных маленьких продакшенах я и программист и админ, если уж на то пошло… Но и даже в дев окружении выставляю сразу правильные права, чтобы потом не париться и тот самый продакшен не ломать при деплое.
                        0
                        Вы описываете свой рабочий процесс, но и мой ни чем не хуже, если вы говорите $ git config core.filemode false на продакшене, то ничего вы уже не поломаете git не будет отслеживать права. Плюс ко всему, мой подход не будет мешать админу тюнить права. Ваш метод работает для вас, так как проекты не большие и вы там «сам себе барин», но он не сработает, если в команде админ, которому вы будете накатывать свои права каждый раз при пулле), тем самым огорчая его до невозможности. А если вы не один, а целая команда, то это будет уже групповое огорчение админа.
                        В любом случае благодарю за ценные комментарии и свою точку зрения. Посчитал нужным подредактировать статью добавив команды:
                        find. -type d -exec sudo chmod 755 {} \; && find. -type f -exec sudo chmod 644 {} \;
                        Пусть будет так.

            Only users with full accounts can post comments. Log in, please.