Silex skeleton + Gulp + LiveReload

Introduction
Good day to all! Probably everyone has heard about the wonderful framework Silex , and some, including me, have already managed to catch the fancy of it. The main zest microfreemvorkov in their simplicity. I downloaded, set up and you can work. And it would be quite good to have some kind of workpiece that would be launched “one-two-time”, with a couple of teams, in order to get rid of repetitive actions, thereby saving your time. Plus, it would be quite good to have Gulp and Bower from NodeJS on board. Thought - done. Who is interested to see what I did, welcome under the cat…

How? You are not familiar with Gulp and Bower? Then we go to you!
Gulp is a task manager. It is needed to automate actions that have to be performed during project development, such as minifying js or launching preprocessors for css or CoffeeScript, and this is only a small part of its many skills. Truly for gulp there is a huge number of plugins . A more detailed description of Gulp can be found in this article .

Bower is a package manager for web libraries. With it, you can easily install Bootstrap, js libraries like jQuery, js frameworks like AngularJS, and so on. By analogy with the package manager PHP composer in Bower, there is a bower.json configuration file. More details on how to install it and what it is can be found in this article .
')
What is the use of Gulp and Bower in a project on Silex?
In Silex and in general in PHP, things like Gulp are not in principle . For this reason, the benefits should be obvious. Using Gulp removes the obligation to manually run various compilers, speeds up the development process, and a lot more.

Further, a description of the settings and installation, but for now)


Settings Files
The gulpfile.js file in my build looks like this:

As you can see, everything is quite simple and the file is easy to rewrite to fit your needs, if something is not needed or what is missing.
'gulp-livereload' - needed for development in live mode. You can see how the live development mode looks like and what it is in the video from Sorax . In my workpiece, I use NodeJs, not hack, as in his video, but in general, everything works about as well and gives an understanding of why it is needed.
'gulp-sass' - needed to compile scss on the fly.
'gulp-concat' - as the name implies, is needed to merge files into one.

File bower.json - needed to install packages like Bootstrap.

The package.json file is needed to install gulp of its plugins.

File composer.json - needed to install packages in PHP.

My workpiece
In the end, I got this blank Silex + Gulp + LiveReload

As planned, everything is put through a console by a pair of commands. You need two extensions for LiveReload and FirePHP4Chrome chrome .
NodeJs are needed, if we don’t have one, set.

 $ sudo apt-get install nodejs 

Also need Bower, if not, then we put it.

 $ sudo npm install bower -g 

Create a folder, configure the server, go to the folder and execute the commands:

Time

 $ 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 

Two

 $ composer install && sudo npm install && bower install && find . -type d -exec sudo chmod 755 {} \; && find . -type f -exec sudo chmod 644 {} \; && gulp 

Everything, we open the project and it is possible to work.

PS
Such a blank can be made for other frameworks.

I added a minimal set of features to the workpiece that I myself often use and I do not hope that this set will satisfy everyone, but I think that it will suit many. In addition, you can fork and add to the set what you need - there are a lot of plug-ins in gulp.