前端工作流 (Grunt) 遇到 php 后端 (Symfony2-Twig)

Question

我是前端人员，我使用 Grunt（cssmin、less compiler、uglify、livereload、image minify、watch、lint...），我开始与使用 Symfony 的后端人员（twig我使用 Grunt 完成的大部分任务的模板、资产...）

我们正在使用一种 Model-View-ViewModel 模式（抱歉，我不是后端专家）。

问题是为我们双方找到合适的工作流程。
我想留在 Grunt，因为我认为它现在最适合前端。

我通常的工作流程是在 localhost:9000 启动 Grunt 网络服务器并使用 livereload 进行编码，从而减少编译。
完成后，我可以使用“Grunt build”来执行“生产”任务（缩小、丑化、图像压缩...）

问题来自于 Php 和 Twig 模板，我不能使用 grunt 并为 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'
]);

Answer 1

已解决：
使用 Vagrant 重新加载唯一重要的事情是在树枝模板上设置监视任务。
这是我所做的gruntfile.js 编辑：

重载：{ 选项： { livereload: LIVERELOAD_PORT }, 文件：[ ... '/{,*/}*.html.twig', '... ] }

然后在来宾机器上设置一个不同的端口：

var LIVERELOAD_PORT = 35728;

然后在您的 Vagrantfile 上设置一个转发，从您的客人到您的主机，并使用 livereload chrome 扩展正在侦听的正确端口 (35729)

config.vm.network：forwarded_port，访客：35728，主机：35729

一切都像魅力一样运作。