gruntjs - toma - uno o varios proyectos de la solucion no se cargaron correctamente visual studio

Cómo compilar archivos.less al guardar en Visual Studio 2015(vista previa)

Question

Ok, entonces creé un nuevo proyecto ASP.Net 5 / MVC 6 en Visual Studio 2015 Preview. De acuerdo con nuestro método actual de hacer las cosas, para diseñar quiero usar archivos .less . Crear los archivos es sencillo, pero Web Essentials ya no los compila.

Así que mi pregunta es la siguiente: ¿qué necesito hacer exactamente para generar mis archivos .less cuando .less archivos .less ?

Basado en mis aventuras para que Typescript funcione bien, tendré que usar Grunt para llevar a cabo esta tarea, pero soy totalmente nuevo para Grunt y por eso no estoy seguro de cómo lo haría.

¡Por favor ayuda!

Answer 1

(Nota: ahora se hace una nueva pregunta directamente sobre sass. Intenté modificar la pregunta y las etiquetas en esta pregunta para incluir sass, pero alguien no lo permitió).

Me gustaría agregar la respuesta a la misma pregunta para sass (.scss) . La respuesta está tan relacionada que creo que estas pueden combinarse mejor como dos respuestas en esta misma publicación ( si no está de acuerdo, háganmelo saber; de lo contrario, podríamos agregar "o sass" en el título de la publicación ). Como tal, ver la respuesta de Maverick para detalles más completos, aquí está el resumen para sass:

(Paso previo para proyectos vacíos) Si comenzó con un proyecto vacío, primero agregue Grunt y Bower:

Haga clic derecho en la solución -> Agregar -> ''Grunt y Bower to Project'' (espere un minuto para que se instale)

package.json:

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

(Para su información: enlace gruunt-contrib-sass )

Entonces:

Dependencias -> haga clic derecho en NPM -> Restaurar paquetes.

gruntfile.js

1) Agregue o asegúrese de que estas tres líneas estén registradas cerca de la parte inferior (como tareas de NPM):

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

2) De nuevo en gruntfile.js, agregue configuraciones de init, algo como lo siguiente.

{Advertencia: no soy experto en tales configuraciones. Encontré la configuración sass en una excelente publicación de blog hace algún tiempo que no puedo ubicar en este momento para dar crédito. La clave era que quería encontrar todos los archivos en el proyecto dentro de una determinada carpeta (más descendientes). Lo siguiente hace eso (observe "someSourceFolder/**/*.scss" , y vea la nota importante 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 Task Runner Explorer como se indica en la otra respuesta. Asegúrate de cerrar y volver a abrir el proyecto. Parece que tiene que ejecutar (hacer doble clic) ''mirar'' (en ''Tareas'') cada vez que se inicia el proyecto para que el reloj esté viendo, pero luego funciona en las siguientes grabaciones.

Answer 2

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

Paso 1

Abra su archivo package.json (está en la raíz de su proyecto) y agregue estas líneas:

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

Obviamente puedes cambiar los números de versión (obtendrás útiles intellisense), estas son solo las versiones actuales.

Paso 2

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

Paso 3

Una vez que esos paquetes se restauran, vaya a su archivo gruntfile.js (nuevamente, en la raíz del proyecto). Aquí, deberá agregar la siguiente sección a grunt.initConfig

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

También necesitará agregar esta línea cerca del final de gruntfile.js :

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

Etapa 4

Luego, vaya a View->Other Windows->Task Runner Explorer en el menú, haga clic en el ícono / ícono de actualización, luego haga clic con el botón derecho en less en Tasks vaya a Bindings y marque After Build .

Hooray, ahora se compilarán menos archivos y (yo) aprendimos sobre gruñidos, lo que parece realmente poderoso.

Paso 5: compilación en guardar

Todavía no he conseguido que esto funcione a mi satisfacción, pero esto es lo que tengo hasta ahora:

Como se indica arriba, agregue otro paquete de NPM grunt-contrib-watch (agregue a package.json, luego restaure los paquetes).

A continuación, agregue una sección de reloj en gruntfile.js, así (obviamente, esto también puede funcionar para otros tipos de archivos):

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

Entonces ahora tendrás algo como esto en tu 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");
};

Uno puede simplemente configurar esta tarea para ejecutar en Project Open (haga clic derecho en watch bajo Tasks en el Task Runner Explorer (está en View->Other Windows en el menú superior) y ya está listo. Esperaría que tiene que cerrar y volver a abrir el proyecto / solución para que esto funcione, de lo contrario, puede ejecutar la tarea manualmente.

Answer 3

Con VS 2015, Web Essential se divide en múltiples extensiones , puede descargar la extensión de Web Compiler desde here y también tiene detalles sobre cómo usarla.

Ciertamente, no es tan elegante como solía ser, pero si está utilizando un proyecto existente y quiere usar un compilador para LESS, entonces puede hacer el trabajo básico.