2012-04-18 15 views
9

Para proyectos de pasatiempos, estoy trabajando en este momento, incluidos los idiomas que luego se transponen, como Coffeescript a Javascript, MENOS a CSS, etc. He estado organizando y manteniendo el código a través de scripts de shell.¿Sistema de compilación que integra coffeescript, LESS (etc) desarrollo web?

Esto es perfectamente factible, pero a veces creo que un sistema de construcción dedicado sería más adecuado. Las tareas típicas implicarían transpilar los archivos, eliminar versiones no minificadas, obtener bibliotecas externas más nuevas, etc. ...

¿Hay algún sistema de compilación que combine todas estas funciones?

EDIT:

Muchas gracias por las respuestas. Suerte puede tener, encontré esta herramienta hoy y decidí probarla: http://brunch.io/ Aún así, he aceptado la respuesta más cerca de lo que tenía en mente.

Antes Almuerzo, yo también estaba considerando SCons ya que es bastante simple para proyectos web y pude aprovechar el conocimiento con otros proyectos (en C, Python, Java, etc)

+0

Editado por lo que no está pidiendo recomendaciones, sino una solución: sistema de compilación que integra administración de recursos web (es decir, LESS, CoffeeScript, etc.) –

Respuesta

6

La práctica más común para el proyecto CoffeeScript es usar el propio cake de CoffeeScript. Coloca un Cakefile en la raíz de su repositorio y crea tareas que realizan sus pasos de compilación. Puede llamar a less.js y a café para cumplir directamente con sus tareas.

Utilizo un par de herramientas: browserify y uglifyJS en las tareas de mi Cakefile para crear un paquete completo para el navegador. Es un fairly complicated Cakefile pero busque la tarea de creación para tener una idea de cómo puede usar estas herramientas juntas.

Tenga en cuenta que ese ejemplo no incluye css en el paquete final, que es solo javascript. Here is an example of a Cakefile I've written that embeds javascript right into the html. Usted podría hacer lo mismo con CSS. Lo bueno de Cakefile es que mantiene los activos separados durante el desarrollo y luego los envuelve juntos solo cuando estás listo para implementar. Dicho esto, si puede salirse con la suya manteniéndolos separados, es preferible tanto para el almacenamiento en caché como para el desarrollo. La única razón por la que los envuelvo en este ejemplo es porque el paquete final debe ejecutarse en otro entorno sin acceso a sitios cruzados.

1

Si está desarrollando proyectos para un marco web como Rails, entonces debe configurar el marco web para compilar CoffeeScript y LESS a medida que se sirven.

Si está desarrollando sitios "estáticos" con ninguna dorsal, a continuación, me gustaría sugerir ya sea:

  1. utilizar una herramienta como LiveReload (sólo para Mac), o
  2. uso de un generador de sitio estático como Middleman
+0

"debe configurar el marco web para compilar CoffeeScript y LESS a medida que se sirven " ... en desarrollo – umassthrower

2

yo personalmente he estado usando una combinación de RubyGems para esta tarea, principalmente:

  • Guardia
  • Piñones
  • de guardia piñones

Guardia es una joya que hará escuchar los cambios de archivos y luego se puede hacer 'algo' a aquellos archivos modificados.

Piñones se utiliza en Ruby on Rails para su cartera de activos. En términos simples, traduce/convierte CoffeeScript, LESS, SASS, JS Templates, casi cualquier cosa que necesite conversión y tiene un RubyGem para la conversión.

La gema guard-piñones es el pegamento entre los dos, se 'invocará' Piñones para construir mis archivos cada vez que cambio uno de los archivos de origen.

Si está familiarizado con Ruby, RubyGems y Bundler, puede echar un vistazo a Project Template que creé usando estos tres RubyGems. Definitivamente no es perfecto, pero funciona para mí en este momento y podría ayudarte a comenzar.

https://github.com/spadin/frontend-project-template

1

Uso Mindscape Workbench con Visual Studio 2010, es fantástico.

Desde el sitio:

  1. super fácil de usar

    Instalar la extensión y ya está. No es necesario configurar eventos de compilación posteriores o generadores de resultados. Guarde los archivos y generarán los archivos CSS o JS asociados según sea necesario. ¡Fácil!

  2. resaltado de sintaxis

    Al extender Visual Studio, el entorno de trabajo web le dará Sass, Menos y resaltado de sintaxis coffeescript. Una excelente forma de ayudarlo a aprender la sintaxis y comprender mejor el código que está escribiendo.

  3. Intellisense

    Visual Studio ofrece fantástica IntelliSense para los desarrolladores y hemos trabajado duro para llevar a la intelisense Sass y menos archivos cuando se está editando.

  4. De uso libre

    Usted es agradable utilizar este software de forma gratuita y, si lo desea, puede pasar a la edición Pro para una pequeña $ 39!

  5. Use sólo las partes que usted quiera

    Usted no tiene que utilizar los tres idiomas soportados. Si solo quieres Coffee Script, o solo quieres usar Less, entonces por supuesto simplemente usa esas partes. Todo está en una sola instalación, pero no hay confianza en sus aplicaciones.

+0

Acabo de instalarlo, y a menos que me falta algo, no es compatible con el código de producción. Y debe incluir cada archivo de café en el HTML. –

5

Otra opción que debe considerar es CoffeeToaster:
http://github.com/serpentem/coffee-toaster

Viene con un sistema de envasado que cuando está activado utilizará la jerarquía de su carpeta como espacios de nombres declaraciones a sus clases si quieres así, entonces se puede se extiende clases desde múltiples archivos, hacer importaciones y el hijo, como como:

#<< another/package/myclass 
class SomeClass extends another.package.MyClass 

La configuración de construcción es extremadamente minimalista y simple, hecho para ser obvio:

# => SRC FOLDER 
toast 'src_folder' 
    # => VENDORS (optional) 
    # vendors: ['vendors/x.js', 'vendors/y.js', ... ] 

    # => OPTIONS (optional, default values listed) 
    # bare: false 
    # packaging: true 
    # expose: '' 
    # minify: false 

    # => HTTPFOLDER (optional), RELEASE/DEBUG (required) 
    httpfolder: 'js' 
    release: 'www/js/app.js' 
    debug: 'www/js/app-debug.js' 

También hay una opción de depuración que compila los archivos individualmente para facilitar los procesos de depuración y otras funciones útiles.

Eche un vistazo, quizás le guste.

+0

Proyecto muy interesante. Definitivamente le echaré un vistazo. Gracias. –

Cuestiones relacionadas