Comment compiler Twitter Bootstrap 3.0 à l'aide Asp.net MVC 5 et Web Essentials 2013

J'ai mis en place Visual Studio 2013 RC et Web Essentials 2013. Je suis en train de créer un Nuage d'Azur et un Service de Rôle Web à l'aide ASP.Net MVC 5. Installé Twitter Bootstrap Moins de sources 3.0 et je voulais bundle tous moins fichiers à l'aide de Web Essentials 2013.

Je n'ai pas obtenir de l'aide ou de la documentation sur la façon d'aller sur le regroupement de bootstrap.moins au moment de l'exécution ou de les compiler dans un bootstrap.css au moment de la conception.

Une idée de comment cela peut être fait? Est-il un moyen plus simple que BundleTransformer.Moins.

  • Est-il une raison vous ne souhaitez pas utiliser BundleTransformer.Moins? Peut pas faire plus simple que cela.
  • J'ai essayé BundleTransformer en suivant toutes les étapes mentionnées dans la documentation, mais l'application renvoie une erreur (500 erreur interne du serveur). J'ai essayé beaucoup de débogage, mais ne pouvait pas identifier le problème.
  • Je pense que BundleTransformer serait le meilleur choix à ce stade. Quelle que soit s'appuie sur dotless il ne va pas fonctionner avec la nouvelle version de MOINS, ce qui signifie que Bootstrap 3.0.0 et surtout de tout autre cadre qui s'appuient sur les plus récentes de MOINS ne sera pas compilé.
  • Voir aussi: personnalisation avancée de Twitter Bootstrap bibliothèque dans Visual Studio: tarkus.me/post/70489442659
InformationsquelleAutor Santosh | 2013-09-27
  1. 34

    MISE À JOUR (29-SEP-2015):

    Laisser essentiels Web et d'utiliser MOINS d'Compilateur avec son Propre CSS du Plugin.

    1. Télécharger et installer Node.js (32-bit) pour Windows.
    2. Ouvrir node.js l'invite de commande.
    3. Installer MOINS à l'aide de la commande: npm install-g moins
    4. Installer moins-plugin-clean-css à l'aide de la commande: npm install-g moins-plugin-clean-css
    5. Aller à Propriétés de Projet > Construire des Événements et copiez-collez commande ci-dessous pour Pré-événement de construction de la ligne de commande boîte:

      lessc "$(ProjectDir)Contenu\bootstrap\bootstrap.moins" "$(ProjectDir)Contenu\bootstrap.css" --clean-css="--s1-avancé"
    6. La construction du projet et de regarder pour bootstrap.css à l'emplacement spécifié. (Si pas déjà fait, vous devrez peut-être activer “Afficher Tous les Fichiers” paramètres " dans l'Explorateur de solutions.)
    7. Inclure le fichier d'amorçage.fichier css dans votre projet. Afficher les propriétés du fichier et définissez son “Action de Construire” au “Contenu”. Mise à jour BundleConfig d'inclure ce fichier compilé dans votre StyleBundle.
    8. Sélectionner tout .moins de fichiers à partir de \Content\bootstrap dossier. Afficher les propriétés du fichier et définissez son “Action de Construire” à “None”.

    MISE À JOUR (24-SEP-2014):

    Depuis Twitter Bootstrap a changé à partir de la RÉCRÉATION à Grunt, je vous recommande les nouveaux utilisateurs à la recherche de cette solution à envisager:
    MOINS Compilateur ou Grunt.

    Veuillez noter que aucun des solutions mentionnées ici Web Essentials 2013.

    Enfin, j'ai décidé d'utiliser la RÉCRÉATION recommandé par Twitter. Si vous souhaitez utiliser les pré-construit bootstrap 3 de moins en css à l'aide de Visual Studio 2013 (RC /RTM), vous pouvez suivre les étapes indiquées ci-dessous:

    1. Télécharger et installer Node.js (32-bit) pour Windows.
    2. Installer la RÉCRÉATION package npm dans le monde – Ouvert node.js invite de commande et exécutez la commande:

      npm install évidement g
    3. Utiliser Bibliothèque NuGet Package Manager et installez le Bootstrap Moins de sources 3.0.0 paquet Asp.Net MVC 5 Web /Azure Web projet de Rôle.
    4. Aller à Propriétés de Projet > Construire des Événements et copiez-collez commande ci-dessous pour Pré-événement de construction de la ligne de commande: boîte:

      la récréation "$(ProjectDir)Contenu\bootstrap\bootstrap.moins" --compress > "$(ProjectDir)Contenu\bootstrap-compilé.css"
    5. La construction du projet et de regarder pour bootstrap-compilé.css à l'emplacement spécifié. (Si pas déjà fait, vous devrez peut-être activer “Afficher Tous les Fichiers” paramètres " dans l'Explorateur de solutions.)
    6. Inclure le bootstrap-compilé.fichier css dans votre projet. Afficher les propriétés du fichier et définissez son “Action de Construire” au “Contenu”. Mise à jour BundleConfig d'inclure ce fichier compilé dans votre StyleBundle.
    7. Sélectionner tout .moins de fichiers à partir de \Content\bootstrap dossier. Afficher les propriétés du fichier et définissez son “Action de Construire” à “None”.
    • Merci - brillant. Un petit point à ajouter, vous souhaiterez peut-être désactiver "Générer le fichier CSS sur "enregistrer" et "Minify CSS généré les fichiers lors de la sauvegarde" dans Outils/Options/Web Essentials/Moins.
    • La Version 3.1 de Bootstrap a changé à partir de la Récréation à grunt-contrib-moins. Comme Visual Studio WebEssentials utilise grognement de Moins, j'ai passé à l'aide que.
    • Vous pourriez avoir besoin à droite le "g" à la main au lieu de faire face à partir d'ici. C'est > npm install la récréation "-g"
    • Web Essentials ne pas utiliser Grunt. (il appelle lessc directement)
    • En suivant les étapes ci-dessus produit une erreur pour moi. Je devais également ajouter le chemin d'accès à la récréation dans ma variable d'environnement PATH. Après cela, il fonctionne très bien! Merci. set path=%path%;%APPDATA%\npm;%PROGRAMFILES(X86)%\nodejs
    InformationsquelleAutor Santosh
  2. 8

    Est possible d'utiliser les " lessc commande avec même approche
    exemple: 

       lessc "$(ProjectDir)Content\bootstrap\bootstrap.less"  "$(ProjectDir)Content\bootstrap-compiled.css"
    • Pour les gens à venir sur, cela semble être la meilleure approche pratique à l'avenir.
    InformationsquelleAutor Effectlab Criação de Sistemas