2

私はフロントエンド担当で、Grunt (cssmin、少ないコンパイル、uglify、livereload、image minify、watch、lint...) を使用しており、Symfony (小枝のテンプレート化、assetsics) を使用するバックエンドの担当者と仕事を始めました。私が Grunt で行うタスクのほとんどは...)

私たちは一種の Model-View-ViewModel パターンを使用しています (私はバックエンドの専門家ではありません)。

問題は、私たち二人にとって適切なワークフローを見つけることです。
今のところフロントエンドに最適だと思うので、Grunt を使い続けたいと思います。

私の通常のワークフローは、localhost:9000 で Grunt Web サーバーを起動し、livereload でコーディングすることです。
完了したら、「Grunt ビルド」を使用して「プロダクション」タスク (縮小、醜化、画像圧縮など) を実行できます。

問題は Php と Twig のテンプレートにあり、Grunt を使用して Php の Web サーバーを起動することはできず、twig.js を使用してテンプレートをレンダリングすることはできません。
また、サーバー側で Symfony2 フレームワークを処理する必要があります。

livereloading 部分では、スタンドアロン プラグインを使用していますが、ファイルを監視してページをリロードしますが、たとえば、Lessphp は Twitter Bootstrap (フロントエンドで使用しているフレームワーク) と完全に互換性がないため、less コンパイルは機能しません。

何か提案はありますか？場合によっては詳細を追加できます。

できる限り Grunt と一緒にいたいのですが、彼が同じタスクまたは他のソリューションをすべて行う場合は、Assetics を使用することを考えることができます。

これは、フロントエンドのみで作業している場合の実際の G​​runtfile.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'
]);
4

1 に答える 1