前端工作流（Grunt）滿足php後端（Symfony2-Twig）

我是前端人，我使用Grunt（cssmin，少編譯，uglify，livereload，圖像縮小，手錶，皮棉...）和我開始與一個使用Symfony（小枝模板，用於大多數我用Grunt完成的任務的資產）的後端人員合作...前端工作流（Grunt）滿足php後端（Symfony2-Twig）

我們使用了一種Model-View-ViewModel模式（我不是後臺專家對不起）。

問題是爲我們倆找到合適的工作流程。
我想留在Grunt，因爲現在我認爲它是最好的前端。

我通常的工作流程是在localhost：9000上啓動Grunt webserver並使用livereload進行編碼，而不需要編譯。
當我完成後，我可以使用「Grunt構建」來執行「製作」任務（縮小，醜化，圖像壓縮...）

問題出現在Php和Twig模板中，我無法使用咕嚕和啓動一個PHP的網絡服務器，我無法使用twig.js呈現模板，因爲它不是我們在生產中使用的模板。
另外我們還要處理Symfony2框架的服務器端。

對於livereloading部分，我使用的是獨立插件，但是監視文件並重新加載頁面，但是例如少編譯不工作，因爲Lessphp不完全兼容Twitter Bootstrap（我正在使用的框架前端）

你有什麼建議嗎？我可以在案件中添加詳細信息。

我寧願儘可能多地留在Grunt，但如果他執行所有相同的任務或其他解決方案，我可以考慮使用Assetics。

這是我的實際Gruntfile.js時，我只在前端的工作：

var LIVERELOAD_PORT = 35729; 
var lrSnippet = require('connect-livereload')({ 
    port: LIVERELOAD_PORT 
}); 
var mountFolder = function(connect, dir) { 
    return connect.static(require('path').resolve(dir)); 
}; 

module.exports = function(grunt) {  
    pkg: grunt.file.readJSON('package.json'), 

       src: 'src', 
     app: 'app', 
     assets: '<%= project.app %>/assets', 
     css: [ 
      '<%= project.src %>/less/bootstrap.less' 
     ], 
     js: [ 
      '<%= project.src %>/js/*.js' 
     ] 
    }, 

    connect: { 
     options: { 
      port: 9000, 
      hostname: '*' 
     }, 
     livereload: { 
      options: { 
       middleware: function(connect) { 
        return [lrSnippet, mountFolder(connect, 'app')]; 
       } 
      } 
     } 
    }, 

    concat: { 
     dev: { 
      files: { 
       '<%= project.assets %>/js/scripts.min.js': '<%= project.js %>' 
      } 
     }, 
     options: { 
      stripBanners: true, 
      nonull: true, 
      banner: '<%= tag.banner %>' 
     } 
    }, 

    uglify: { 
     options: { 
      banner: "<%= tag.banner %>" 
     }, 
     dist: { 
      files: { 
       '<%= project.assets %>/js/scripts.min.js': '<%= project.js %>' 
      } 
     } 
    }, 

    less: { 
     dev: { 
      files: { 
       '<%= project.assets %>/css/style.min.css': '<%= project.css %>' 
      } 
     }, 
     dist: { 
      options: { 
       cleancss: true 
      }, 
      files: { 
       '<%= project.assets %>/css/style.min.css': '<%= project.css %>' 
      } 
     } 
    }, 

    imagemin: { // Task 
     dynamic: { // Another target 
      files: [{ 
       expand: true, // Enable dynamic expansion 
       cwd: '<%= project.src %>/img', // Src matches are relative to this path 
       src: ['**/*.{png,jpg,gif}'], // Actual patterns to match 
       dest: '<%= project.assets %>/img' // Destination path prefix 
      }] 
     } 
    }, 

    open: { 
     server: { 
      path: 'http://localhost:<%= connect.options.port %>' 
     } 
    }, 

    watch: { 
     concat: { 
      files: '<%= project.src %>/js/{,*/}*.js', 
      tasks: ['concat:dev', 'jshint'] 
     }, 
     less: { 
      files: '<%= project.src %>/less/{,*/}*.less', 
      tasks: ['less:dev'] 
     }, 
     livereload: { 
      options: { 
       livereload: LIVERELOAD_PORT 
      }, 
      files: [ 
       '<%= project.app %>/{,*/}*.html', 
       '<%= project.assets %>/css/*.css', 
       '<%= project.assets %>/js/{,*/}*.js', 
       '<%= project.assets %>/{,*/}*.{png,jpg,jpeg,gif,webp,svg}' 
      ] 
     } 
    } 
}; 

grunt.registerTask('default', [ 
    'less:dev', 
    'concat:dev', 
    'connect:livereload', 
    'open', 
    'watch' 
]); 

grunt.registerTask('build', [ 
    'less:dist', 
    'uglify', 
    'imagemin' 
]);

來源

2013-11-02 mtt

你能否詳細說明lessphp與bootstrap不兼容？ – nifr

https://github.com/leafo/lessphp/issues/432 很多問題仍然沒有解決，有時它與一些構建有效，有時它不會，所以它絕對不可靠。 Bootstrap的創建者也表示，他們正式支持cleancss編譯器。 – mtt

http://getbootstrap.com/getting-started/#download-cdn 「編譯Bootstrap的LESS文件如果您使用Bootstrap的未編譯源代碼，則需要編譯LESS文件以生成可用的CSS文件。爲了將LESS文件編譯爲CSS，我們只正式支持Recess，這是基於less.js的Twitter的CSS hinter。「 – mtt

解決：
使用流浪唯一重要的事情有關重裝被設置監視任務的樹枝模板。
這裏是gruntfile.js編輯我做：

 
var LIVERELOAD_PORT = 35728;

然後從你的客戶對你Vagrantfile向前設置爲您的主機與正確的：

 
livereload: { 
       options: { 
        livereload: LIVERELOAD_PORT 
       }, 
       files: [ 
        ... 
        '<%= project.views %>/{,*/}*.html.twig', 
        '... 
       ] 
      }

然後客戶機上設置不同的端口（35729）

 
config.vm.network :forwarded_port, guest: 35728, host: 35729

一切工作就像一個魅力。

來源

2013-11-05 12:26:47 mtt

前端工作流（Grunt）滿足php後端（Symfony2-Twig）

回答

相關問題