Вступление
Доброго времени суток всем! Наверное, все слышали о замечательном фреймворке 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 в моей сборке выглядит так:
'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.
{
"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 его плагинов.
{
"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.
{
"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 очень много.
Комментарии (14)
MaxZN
06.10.2015 16:21-2Да, по хорошему должно ставится не из под рута и без ругани на права — иногда так и происходит, а иногда нет. Следом идет sudo chmod -R 777. которая, приводит в норму ситуацию с правами на папки. У моего знакомого регулярно ругается на права при установке не из под рута, вот и решил, что у кого-то может быть также, поэтому sudo composer install.
thunderspb
06.10.2015 17:07+2>> У моего знакомого регулярно ругается на права при установке
так может с правами лучше разобраться? не думаю, что там rocket science
>> приводит в норму ситуацию с правами на папки.
… и делает все файл исполняемыми… с полным доступом кому угодно…
Зачем плохому учить? Потом так в продакшен и будут выкладывать… и как результат: welcome to botnet?MaxZN
07.10.2015 09:35>>… и делает все файл исполняемыми… с полным доступом кому угодно…
Какие есть причины заморачиваться с правами на своей машине, куда кроме вас ни у кого доступа нет? И при всем уважении, на продакшене с правами отдельная песьня.
>>Зачем плохому учить? — где я учу плохому?)
Fesor
07.10.2015 10:15+1Грубо говоря ваше «иногда не работает потому sudo + chmod 777». Вообще chmod 777 это уже не сильно то хорошо.
MaxZN
07.10.2015 12:16почему? можете привести примеры. Какие есть причины заморачиваться с правами на своей машине, куда кроме вас ни у кого доступа нет?
kovalevsky
13.10.2015 10:06+1Вы можете делать у себя на машине все, что Вам вздумается. Вы в статье, которую прочитает немало людей, пишете так, как будто влепить 777 на все на свете — норма
thunderspb
07.10.2015 15:24+1на продакшене большей частью другие только пользователь: группа, сами права rwx не меняются в большинстве случаев.
MaxZN
12.10.2015 14:12-1Меняются на 775, но не об этом речь. Настройка прав на сервере это отдельная песня, поэтому не вижу особого смысла заморачиваться локально. В большинстве случаев, если мы говорим о продакшене, запускается $ git config core.filemode false чтобы git не отслеживал права, ну а дальше доверяем разруливать права тому, кто и должен этим заниматься по должности — админу. Он на это учился и сервер это его компетенция.
Дайте угадаю, Вы админ?)thunderspb
13.10.2015 13:17в продакшене на 775? Ну ок.
В моих личных маленьких продакшенах я и программист и админ, если уж на то пошло… Но и даже в дев окружении выставляю сразу правильные права, чтобы потом не париться и тот самый продакшен не ломать при деплое.MaxZN
14.10.2015 13:32Вы описываете свой рабочий процесс, но и мой ни чем не хуже, если вы говорите $ git config core.filemode false на продакшене, то ничего вы уже не поломаете git не будет отслеживать права. Плюс ко всему, мой подход не будет мешать админу тюнить права. Ваш метод работает для вас, так как проекты не большие и вы там «сам себе барин», но он не сработает, если в команде админ, которому вы будете накатывать свои права каждый раз при пулле), тем самым огорчая его до невозможности. А если вы не один, а целая команда, то это будет уже групповое огорчение админа.
В любом случае благодарю за ценные комментарии и свою точку зрения. Посчитал нужным подредактировать статью добавив команды:
find. -type d -exec sudo chmod 755 {} \; && find. -type f -exec sudo chmod 644 {} \;
Пусть будет так.
Fesor
composer create-project бы лучше запилили.