Ok, así que he creado un nuevo ASP.Net 5/MVC 6 proyecto en Visual Studio 2015 Preview. En consonancia con nuestro método actual de hacer las cosas, para el estilo que quiero usar .less archivos. La creación de los archivos es sencillo, pero en la Web Essentials ya no compila.

Así que mi pregunta es ésta: ¿qué es exactamente lo que necesito hacer para obtener mi .css archivos generados al guardar el .less archivos?

Basado en mis aventuras llegar Máquina funcione muy bien, voy a tener que usar Grunt para realizar esta tarea, pero soy nuevo a Gruñir y así no estoy seguro de cómo se haría?

Por favor ayuda!

  • También, estoy trabajando a través de mí mismo, así que si he conseguido hacerlo, voy a actualizar esto con un paso a paso de contestar.
  • Esta es una excelente guía sobre cómo usar Grunt y Bower en VS2015 asp.net/vnext/overview/aspnet-vnext/…
InformationsquelleAutor Maverick | 2015-01-02

3 Comentarios

  1. 42

    Con VS de 2015 en la Web es Esencial dividida en varias extensiones puede descargar
    la Web de la extensión de Compilador de aquí y también información sobre cómo usarlo.

    Ciertamente no es elegante como lo que solía ser, pero si usted está usando proyecto existente y desea utilizar un compilador para MENOS, entonces esto puede hacer el trabajo básico.

    • Este es un orden de magnitud menos complicado que el gruntfile/paquete.json solución y funciona muy bien!
    • Esto ha estado disponible desde la versión RTM de VS2015 (pero no estaba disponible cuando esta pregunta se la hicieron) – pero es sólo recientemente ha comenzado a compilar correctamente .less archivos (que estaba el uso de una incompleta y un poco roto compilador antes). Ahora que entiendo, yo desde luego prefiero usar Grunt o Trago, pero en la Web del Compilador es una sólida opción también :).
    • La respuesta marcada «como la solución» es mucho más complicado que esto. Sólo tienes que descargar el instalador de la extensión, reiniciar visual studio, y listo. Esta debe ser la marcada respuesta.
  2. 40

    Así que aquí está cómo hacerlo (compilar en construir y no elegante compilar y guardar):

    Paso 1

    Abre tu package.json archivo en la raíz de tu proyecto) y añadir estas líneas:

    "grunt-contrib-less": "^1.0.0",
    "less": "^2.1.2"
    

    Obviamente, usted puede cambiar los números de versión (obtendrás útil intellisense), estas son sólo las versiones actuales.

    Paso 2

    Haga clic derecho en el NPM carpeta (bajo Dependencies) y haga clic en Restore Packages. Esto instalará less y grunt-contrib-less.

    Paso 3

    Una vez que los paquetes sean restaurados, vaya a su gruntfile.js archivo (de nuevo, en la raíz del proyecto). Aquí, usted tendrá que añadir la siguiente sección para grunt.initConfig

    less: {
        development: {
            options: {
                paths: ["importfolder"]
            },
            files: {
                "wwwroot/destinationfolder/destinationfilename.css": "sourcefolder/sourcefile.less"
            }
        }
    }
    

    Usted también tendrá que añadir esta línea cerca del final de gruntfile.js:

    grunt.loadNpmTasks("grunt-contrib-less");
    

    Paso 4

    Luego ir a View->Other Windows->Task Runner Explorer en el menú de golpear la actualización de icono/botón, a continuación, haga clic en less bajo Tasks y vaya a Bindings y garrapatas After Build.

    ¡Hurra, ahora menos los archivos de compilación y (I) aprendido acerca de grunt, que parece realmente potente.

    Paso 5: Compilación en guardar

    Aún no tengo este trabajo a mi satisfacción, pero aquí es lo que he conseguido hasta ahora:

    Como en el anterior, agregar otro MECANISMO nacional de prevención paquete grunt-contrib-watch (añadir al paquete.json, a continuación, restaurar los paquetes).

    A continuación, agregue un apartado de la vigilancia en gruntfile.js como en este ejemplo (obviamente esto puede funcionar para otros tipos de archivos también):

    watch: {
        less: {
            files: ["sourcefolder/*.less"],
            tasks: ["less"],
            options: {
                livereload: true
            }
        }
    }
    

    Así que ahora vamos a tener algo como esto en su gruntfile.js:

    ///<binding AfterBuild='typescript' />
    //This file in the main entry point for defining grunt tasks and using grunt plugins.
    //Click here to learn more. http://go.microsoft.com/fwlink/?LinkID=513275&clcid=0x409
    
    module.exports = function (grunt) {
        grunt.initConfig({
            bower: {
                install: {
                    options: {
                        targetDir: "wwwroot/lib",
                        layout: "byComponent",
                        cleanTargetDir: false
                    }
                }
            },
            watch: {
                less: {
                    files: ["less/*.less"],
                    tasks: ["less"],
                    options: {
                        livereload: true
                    }
                }
            },
            less: {
                development: {
                    options: {
                        paths: ["less"]
                    },
                    files: {
                        "wwwroot/css/style.css": "less/style.less"
                    }
                }
            }
        });
    
        //This command registers the default task which will install bower packages into wwwroot/lib
        grunt.registerTask("default", ["bower:install"]);
    
        //The following line loads the grunt plugins.
        //This line needs to be at the end of this this file.
        grunt.loadNpmTasks("grunt-bower-task");
        grunt.loadNpmTasks("grunt-contrib-less");
        grunt.loadNpmTasks("grunt-contrib-watch");
    };
    

    Entonces, uno puede simplemente establecer esta tarea para que se ejecute en el Proyecto Abierto (clic-derecho en watch bajo Tasks en el Task Runner Explorer (es bajo View->Other Windows en el menú de arriba) y listo. Yo esperaría que usted tendría que cerrar y volver a abrir el proyecto/solución para conseguir este a kick in, de lo contrario puede ejecutar manualmente la tarea.

    • Yo no tengo ningún paquete.json o cualquier cosa que puede ser descrito como «en virtud de las dependencias». Hay algunos pasos iniciales que se perdieron en este post?
    • el paquete.archivo json se crea tan pronto como se crea un ASP.Net 5/MVC 6 de la aplicación (como se mencionó en la pregunta). Sin embargo, usted puede agregar uno mismo (el nombre de la plantilla en el Add-New Item... diálogo es NPM configuration file bajo Web/General.
    • Desde entonces he descubierto que esto sólo funciona en nueva VS2015 proyectos. stackoverflow.com/questions/32716983/…
    • ese no es el caso. Actualmente estoy usando una solución hecha en VS2012. Es un MVC5 (obviamente era MVC4 cuando fue hecho originalmente) la app y la he añadido un paquete.archivo json y yo uso trago para compilar mi .menos archivos. Obviamente, si usted desea un MVC6 la aplicación, tendrás que crear un nuevo proyecto.
    • ¿Qué acerca de sus instrucciones con respecto a las Dependencias?
    • Obviamente, estas instrucciones son para un MVC6 de la aplicación. Usted puede conseguir lo mismo se hace en cualquier otra aplicación en VS2015 (como ya he dicho, estoy usando trago en un MVC5 app) – pero este no es el lugar para encontrar esas instrucciones.
    • Una cosa que falta en el paso 1 que me rascándome la cabeza para un buen par de minutos que usted también podría necesitar agregar «grunt»: «~0.4.5» a sus dependencias

  3. 8

    (Nota: ahora hay una nueva pregunta aquí directamente sobre sass. Traté de cambiar la pregunta y etiquetas en esta pregunta para incluir sass, pero alguien no lo permitió.)

    Me gustaría añadir que la respuesta a la misma pregunta para sass (.secs). La respuesta es tan relacionados creo que estos pueden ser combinados como dos respuestas en este mismo post (si usted no está de acuerdo, por favor hágamelo saber; de lo contrario, se podría añadir «o sass» en el título del post?). Como tal, ver Maverick respuesta para algunas desea conocer más detalles, aquí está el resumen de sass:

    (Pre-paso de Vacío Proyectos)
    Si usted comenzó con un proyecto vacío, agregue primero Grunt y Bower:

    Derecho haga clic en solución -> Agregar -> ‘Grunt y Bower a Project’ (, a continuación, espere un minuto para que todo se instale)

    paquete.json:

    "devDependencies": {
        "grunt": "^0.4.5",
        "grunt-bower-task": "^0.4.0",
        "grunt-contrib-watch": "^0.6.1",
        "grunt-contrib-sass": "^0.9.2"
    }
    

    (FYI: grunt-contrib-sass enlace)

    A continuación:

    Dependencias -> haga clic con NPM -> Restaurar los Paquetes.

    gruntfile.js

    1) Agregar o asegúrese de que estas tres líneas se han registrado cerca de la parte inferior (como MECANISMO nacional de prevención de las tareas):

    grunt.loadNpmTasks("grunt-bower-task");
    grunt.loadNpmTasks("grunt-contrib-watch");
    grunt.loadNpmTasks("grunt-contrib-sass");
    

    2) de Nuevo en gruntfile.js, agregar init configuraciones, algo como lo siguiente.

    { Advertencia: no soy experto en estas configuraciones. He encontrado el sass de configuración en un excelente post en el blog hace algún tiempo que no puedo encontrar en este momento con el fin de dar crédito. La clave era encontrar todos archivos en el proyecto dentro de una carpeta determinada (además de los descendientes). El siguiente hace que (aviso "someSourceFolder/**/*.scss", y importante nota relacionada aquí). }

    //... after bower in grunt.initConfig ...
    "default": {
        "files": [
            {
                "expand": true,
                "src": [ "someSourceFolder/**/*.scss" ],
                "dest": "wwwroot/coolbeans", //or "<%= src %>" for output to the same (source) folder
                "ext": ".css"
            }
        ]
    },
    "watch": {
        "sass": {
            "files": [ "someSourceFolder/**/*.scss" ],
            "tasks": [ "sass" ],
            "options": {
                "livereload": true
            }
        }
    }
    

    Ahora siga las instrucciones para la Tarea Corredor Explorer como se da en la otra respuesta. Asegúrese de cerrar y volver a abrir el proyecto. Parece que usted tiene que ejecutar (doble clic) ‘ver’ bajo ‘Tareas’) cada vez que el proyecto se empezó a poner el reloj de la observación, pero luego se trabaja en las siguientes salva.

Dejar respuesta

Please enter your comment!
Please enter your name here