Gerenciando ativos em ASPAX vs Grunt

Algumas semanas atrás, publiquei um protocolo sobre ASPAX – um empacotador de ativos Node.js simples que permite gerenciar seus ativos do lado do cliente com base em um único arquivo legível por humanos no formato YML.

Algumas pessoas estavam pedindo uma comparação entre ASPAX e Grunt.js , então …

Aqui está um aspax.ymlarquivo de amostra :

# Main application file
js/app.js|fp|min:
  - lib/bootstrap/js/bootstrap.js
  - lib/moment.js
  - lib/jade/runtime.js
  - scripts/namespaces.coffee|bare
  - templates/now.jade
  - scripts/index.ls|bare

# Main CSS
css/app.css|fp|min:
  - lib/bootstrap/css/bootstrap.css
  - lib/bootstrap/css/bootstrap-theme.css
  - styles/index.styl|nib

# Images
favicon.png:            images/favicon.png

# Font icons
fonts/bs-glyphs.eot|fp: lib/bootstrap/fonts/glyphicons-halflings-regular.eot
fonts/bs-glyphs.svg|fp: lib/bootstrap/fonts/glyphicons-halflings-regular.svg
fonts/bs-glyphs.ttf|fp: lib/bootstrap/fonts/glyphicons-halflings-regular.ttf
fonts/bs-glyphs.woff:   lib/bootstrap/fonts/glyphicons-halflings-regular.woff

… e aqui está um que Gruntfile.jsvocê teria que escrever para obter os mesmos resultados:

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({

    // CoffeeScript files compilation
    coffee: {
      compile: {
        options: { bare: true },
        files: {
          '../tmp/namespaces.js': '../client/scripts/namespaces.coffee'
        }
      }
    },

    // LiveScript files compilation
    livescript: {
      compile: {
        options: { bare: true },
        files: {
          '../tmp/index.js': '../client/scripts/index.ls'
        }
      }
    },

    // Jade client-side templates compilation
    jade: {
      compile: {
        options: {
          compileDebug: false,
          client: true
        },
        files: {
          '../tmp/now.js': '../client/templates/now.jade'
        }
      }
    },

    // Stylus files compilation
    stylus: {
      compile: {
        options: {
          compress: false
        },
        files: {
          '../tmp/index.css': '../client/styles/index.styl'
        }
      }
    },

    // Concatenate CSS and JS files
    concat: {
      js: {
        files: {
          'public/js/app.js': [
            '../client/lib/bootstrap/js/bootstrap.js',
            '../client/lib/moment.js',
            '../client/lib/jade/runtime.js',
            '../tmp/namespaces.js',
            '../tmp/now.js',
            '../tmp/index.js'
          ]
        }
      },
      css: {
        files: {
          '../tmp/app.css': [
            '../client/lib/bootstrap/css/bootstrap.css',
            '../client/lib/bootstrap/css/bootstrap-theme.css',
            '../tmp/index.css'
          ]
        }
      }
    },

    // Copy miscellaneous files and process asset URLs in CSS files
    copy: {
      css: {
        src: '../tmp/app.css',
        dest: 'public/css/app.css',
        options: {
          process: function(content, srcPath) {
            // Should replace asset URLs in CSS file
            console.log('Should process asset URLs in', srcPath);
            return content;
          }
        }
      },
      misc: {
        files: [
          { src: '../client/images/favicon.png',                                    dest: 'public/favicon.png'          },
          { src: '../client/lib/bootstrap/fonts/glyphicons-halflings-regular.eot',  dest: 'public/fonts/bs-glyphs.eot'  },
          { src: '../client/lib/bootstrap/fonts/glyphicons-halflings-regular.svg',  dest: 'public/fonts/bs-glyphs.svg'  },
          { src: '../client/lib/bootstrap/fonts/glyphicons-halflings-regular.ttf',  dest: 'public/fonts/bs-glyphs.ttf'  },
          { src: '../client/lib/bootstrap/fonts/glyphicons-halflings-regular.woff', dest: 'public/fonts/bs-glyphs.woff' }
        ]
      }
    },

    // Watch and trigger compilation, concatenation, ...
    watch: {
      js: {
        files: [
          '../client/lib/bootstrap/js/bootstrap.js',
          '../client/lib/moment.js',
          '../client/lib/jade/runtime.js',
          '../client/scripts/namespaces.coffee',
          '../client/templates/now.jade',
          '../client/scripts/index.ls'
        ],
        tasks: ['coffee', 'jade', 'livescript', 'concat:js']
      },
      css: {
        files: [
            '../client/lib/bootstrap/css/bootstrap.css',
            '../client/lib/bootstrap/css/bootstrap-theme.css',
            '../client/styles/**/*'
        ],
        tasks: ['stylus', 'concat:css']
      },
      misc: {
        files: [
          '../client/images/favicon.png',
          '../client/lib/bootstrap/fonts/glyphicons-halflings-regular.eot',
          '../client/lib/bootstrap/fonts/glyphicons-halflings-regular.svg',
          '../client/lib/bootstrap/fonts/glyphicons-halflings-regular.ttf',
          '../client/lib/bootstrap/fonts/glyphicons-halflings-regular.woff',
        ],
        tasks: ['copy']
      }
    }

  });

  // Load plugins
  grunt.loadNpmTasks('grunt-contrib-coffee');
  grunt.loadNpmTasks('grunt-livescript');
  grunt.loadNpmTasks('grunt-contrib-jade');
  grunt.loadNpmTasks('grunt-contrib-stylus');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-csso');
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-contrib-watch');

  // Tasks
  grunt.registerTask('default', [
    'coffee', 'jade', 'livescript', 'concat:js',
    'stylus', 'concat:css',
    'copy',
    'watch'
  ]);

};

Como você pode ver, tem apenas 23 linhas, incluindo comentários – e bastante fácil de compreender, eu diria – enquanto chegava a mais de 150 linhas, sem sequer tratar de impressão digital e ajuste de URLs em arquivos CSS (fiquei entediado e finalmente desisti , Eu admito :-).aspax.ymlGruntfile.js

Não me interpretem mal, sou um fã do Grunt, acho que é uma excelente ferramenta de uso geral, gosto e uso quando necessário, mas também sou fã de usar a ferramenta certa para o trabalho certo , e, obviamente, escrever um Gruntfile de gerenciamento de ativos pode facilmente se tornar um fardo.

Então, por que não experimentar o ASPAX ? … Ele ainda está em desenvolvimento, é claro, então ainda podemos mudar / refatorar algumas coisas durante as próximas semanas, mas a funcionalidade principal está lá.