Symfony static file solution (not finished)

Currently, there are three directories in Symfony that are related to static resources:/app/src/web

App
-Resources
--Assets
--CSS
--JS
--scss
Src
--Appbundle
--Codeexplorerbundle
-Resources
--Config
--Views
--JS
--CSS
Web
--CSS
--Fonts
--JS

Where/web is document_root, the direct resources for all external access must be stored in this directory.

/SRC is the storage of various bundles (bundles), each bundle under the controller, service, data, Events, Test ..., equivalent to a separate app, of course, according to Symfony loose coupling concept, the bundle below also has a static resource directory/ Resources, storage js/css/images ..., because the external cannot directly access the static resources under each bundle, the solution for Symfony is through:

App/console Assets:install Web–symlink

The command establishes a soft connection (Unix) from each bundle static resource to the Web directory, which, under Windows, is copied to/web, and after the command is executed,/web becomes:

Web
--Bundles
--CSS
--Fonts
--JS

Among them, bundles is a static file that stores Resource/public resources under each bundle under/SRC and/vendor.

--Bundles
--Framework
--CSS
--Images
--Sensiodistribution
--Webconfigurator
--CSS
--Images

The most controversial is the/app directory, according to best practices, some of the static resources that can be combined and optimized, such as css/js/images recommendations, are stored under/app/resources/assets. This discussion can be viewed here. The focus is that/app resources cannot be stored in/web through Assets:install, so why is it recommended that public resources be stored here? The official answer is this:

Keep in mind, web/is a public directory, and that anything stored, here'll be publicly
Accessible. For this reason, you should put your compiled the web assets here, and not their
source files (e.g. SASS files).
Http://symfony.com/doc/current/best_practices/web-assets.html

The resources here are different from the other two directories (/src/web) and can be used directly. Here are the source resources, i.e., files that have not yet been compiled, such as Js/css/images/less/sass, and so on, they can be adjusted by a certain tool size, volume, combined operation to/web/below.

For example, Symfony provides assetic for asset management, can compress, merge, and package static resources, demo has a section:

{# Uncomment the following lines to combine and minimize JavaScript assets with assetic
{% javascripts filter= "? Jsqueeze" output= "Js/app.js"
"%kernel.root_dir%/resources/assets/js/jquery-2.1.4.js"
"%kernel.root_dir%/resources/assets/js/moment.min.js"
"%kernel.root_dir%/resources/assets/js/bootstrap-3.3.4.js"
"%kernel.root_dir%/resources/assets/js/highlight.pack.js"
"%kernel.root_dir%/resources/assets/js/bootstrap-datetimepicker.min.js"
"%kernel.root_dir%/resources/assets/js/main.js"%}
<script src= "{{asset_url}}" ></script>
{% endjavascripts%}

#}

It is a combination of several common JS/app/resources/assets below, and output a file: App.js.

If you do not use the tools provided by Symfony, you can also use common node. JS tools, such as Gulp/webpack, which provide common static resource handling.

Take Gulp as an example, we will store the resources to be processed under/app/resources:

-Resources
--Assets
--CSS
--JS
--scss
--Node_modules
--. bin
--Acorn
-- ...

Where Node_modules is the various JS packages that the node. JS Package Management tool NPM installs, now we transfer assets, node_modules designated resources to/web, Build the gulpfile.js Directive file (requires some simple node. js knowledge):

var buildfolder = './',
Destfolder = './. /.. /web/js/',
Gulp = require (' Gulp '),
FS = require (' FS '),
Rename = require (' Gulp-rename '),
Concat = require ("Gulp-concat"),
Header = require ("Gulp-header"),
MINIFYCSS = require ("Gulp-minify-css"),
Uglify = require ("gulp-uglify");

Gulp.task (' Public ', function () {
GULP.SRC ([Buildfolder + ' assets/js/*.min.js ',
Buildfolder + ' node_modules/cookie/index.js ',
Buildfolder + ' node_modules/seajs/dist/sea.js ')
. pipe (Rename (path) {
if (path.basename.indexOf (' index ') = = = 0)
Path.basename = ' Cookie ';
}))
. Pipe (Gulp.dest (destfolder + ' public/'));
});

Setup Complete execution:

Gulp Public

After execution, these specified public JS files are transferred to the following/web:

Web
--Bundles
--Framework
--CSS
--Images
--Sensiodistribution
--Webconfigurator
--CSS
--Images
--CSS
--Fonts
--JS
--Public
--Bootstrap-3.3.4.min.js
--Cookie.js
-- ...

So, we can refer to these resources under/web. Of course gulp can also do some operations, such as compression, merging, etc., processing speed than the PHP command slightly faster.

Symfony static file solution (not finished)