symfony靜態文件解決方案（未完待續)

時間 2019-12-14

原文原文鏈接

目前，在symfony中與靜態資源有關的目錄有三個：/app /src /webjavascript

app
    -- Resources
        -- assets
            -- css
            -- js
            --scss
src
    -- AppBundle
    -- CodeExplorerBundle
        -- Resources
            -- config
            -- views
            -- js
            -- css
web
    -- css
    -- fonts
    -- jsphp

其中/web是document_root，全部對外訪問的直接資源必須存放於此目錄。css

/src是存放各種Bundle（束)，各個束下面有controller、service、data、Events、Test…，至關於一個獨立的app，固然，根據symfony鬆耦合理念，束下面也有靜態資源目錄/Resources，存放js/css/images…，因爲外部沒法直接訪問各個Bundle下面的靜態資源，所以，symfony的解決方案是經過：html

app/console assets:install web –symlinkjava

命令創建由各bundle靜態資源到web目錄的軟鏈接（unix），在windows下是經過copy一份到/web，執行命令之後，/web變成：node

web
    -- bundles
    -- css
    -- fonts
    -- jsjquery

其中，bundles是存放/src及/vendor下各個bundle下的Resource/public資源的靜態文件。webpack

-- bundles
        -- framework
            -- css
            -- images
        -- sensiodistribution
            -- webconfigurator
                -- css
                -- imagesgit

最有爭議的是/app目錄，根據最佳實踐，一些能夠經過合併、優化的靜態資源，好比css/js/images建議存放在/app/Resources/assets下面。有關這個討論能夠查看這裏。其中焦點在於，/app的資源不能經過assets:install創建軟連接或拷貝存放於/web，那麼爲何還建議公共資源存放於此？官方回答是這樣：github

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

這裏的資源不一樣於其它兩個目錄（/src /web），能夠直接使用。這裏存放的是源資源，即尚未編譯的文件，如js/css/images/less/sass等，它們能夠經過必定的工具調整尺寸、體積、合併的操做轉換到/web/下面。

好比symfony提供了assetic進行asset管理，能夠壓縮、合併、打包靜態資源，demo有一段：

{# 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 %}

#}

它是對/app/Resources/assets下面的幾個公共js進行合併打包，並輸出一個文件：app.js。

若是不使用symfony提供的工具，也可使用常見的node.js工具，好比gulp/webpack，它同樣能夠提供常見的靜態資源處理。

以gulp爲例，咱們將待加工資源存放於/app/Resources下面：

-- Resources
        -- assets
            -- css
            -- js
            --scss
        -- node_modules
            -- .bin
            -- acorn
            -- ...

其中node_modules是node.js的包管理工具npm安裝的各種js包，如今咱們把assets、node_modules指定的資源轉移到/web下面，創建gulpfile.js指令文件（須要一些簡單的node.js知識）：

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(function(path){
            if (path.basename.indexOf('index') === 0)
                path.basename = 'cookie';
        }))
        .pipe(gulp.dest(destFolder + 'public/'));
});

創建完畢執行：

gulp public

執行完畢，這些指定的公共js文件即轉移到了/web下面：

web
    -- bundles
        -- framework
            -- css
            -- images
        -- sensiodistribution
            -- webconfigurator
                -- css
                -- images
    -- css
    -- fonts
    -- js
        -- public
            -- bootstrap-3.3.4.min.js
            -- cookie.js
            -- …