web-dev-qa-db-fra.com

Vous utilisez gulp pour compiler des fichiers bootstrap.less dans le fichier bootstrap.css principal?

J'aime vraiment gulpjs, c'était mon gestionnaire de tâches de choix, mais j'aurais aimé connaître les gestionnaires de tâches il y a quelques mois et être entré dans gruntjs, principalement pour le support. Pour gulpjs, il est difficile de trouver des informations sur des choses spécifiques.

Ma question est de savoir comment configurer mon gulpfile.js pour que je puisse apporter des modifications aux fichiers bootstrap.less, en particulier le variables.less. J'ai installé " gulp-less ", et l'ai implémenté comme ci-dessous.

var less = require('gulp-less'),
    path = require('path');

gulp.task('less', function () {
  gulp.src('./source/less/variables.less')
    .pipe(less())
    .pipe(gulp.dest('./source/css/bootstrap.css'));
});

J'obtiens l'erreur ci-dessous après avoir exécuté gulp less.

events.js:72 throw er; // Unhandled 'error' event ^
Error: EEXIST, mkdir 'C:\wamp\www\myproj\source\css\bootstrap.css'

Je ne pense pas que mon code de tâche sass soit correctement configuré, je suis un noobie gulp mais j'ai essayé plusieurs combinaisons, et oui j'ai utilisé l'exemple de la documentation " gulp-less ", le code J'ai utilisé était le code clair le plus concis sur ce que je veux accomplir.

Edit: Je trouve de bons mots clés pour cela sur google J'ai trouvé quelques articles récents à ce sujet, en voici un Démarrer Gulp avec Gulp -less maintenir la structure des dossiers ne semble pas être une bonne réponse à lire.

Supplémentaire: J'ai oublié lors de l'utilisation du code de la documentation, j'obtiens une erreur avec alerts.less

gulp.task('less', function () {
  gulp.src('./source/less/*.less')
    .pipe(less({
      paths: [ path.join(__dirname, 'less', 'includes') ]
    }))
    .pipe(gulp.dest('./source/css'));
});

Erreur

stream.js:94
throw er; // Unhandled stream error in pipe.
^
[gulp] Error in plugin 'gulp-less': variable @alert-padding is undefined in file C:\wamp\www\myproj\source\less\alerts.less line no. 10

Même lorsque je supprime cette ligne, elle ne cesse de trouver de nouvelles erreurs.

Edit: Les docs disent, ce qui suit mais cela n'a pas de sens pour moi, est-ce qu'il dit qu'il est censé y avoir une erreur, si tel est le cas déroutant, je vais essayer de suivre le guide qu'ils fournissent.

Gestion des erreurs

Par défaut, une tâche gulp échouera et tous les flux s'arrêteront lorsqu'une erreur se produira. Pour modifier ce comportement, consultez la documentation de gestion des erreurs ici

javascriptgulpgulp-less
43
Michael Joseph Aubry

J'ai eu les mêmes problèmes en essayant de compiler le CSS Bootstrap. Ma solution simplifiée a fini par ressembler à:

// Compiles LESS > CSS 
gulp.task('build-less', function(){
    return gulp.src('styles.less')
        .pipe(less())
        .pipe(gulp.dest('./source/css'));
});

et mon fichier styles.less incluait l'importation dans le bootstrap.less. J'ai remarqué que si les fichiers bootstrap moins étaient inclus dans le chemin gulp.src() ce serait des erreurs.

Mon styles.less:

@import "../lib/bootstrap/less/bootstrap.less";
@body-bg:     red; // test background color
44
Tucker

gulp less plugin convertit simplement le less en css. Dans Bootstrap, le fichier sans index est le Bootstrap.less qui à son tour importe tous les autres fichiers bootstrap liés moins. Donc tout ce dont vous avez besoin est de trouver le Bootstrap.less. Si vous voulez votre propre ensemble de variables, créez simplement un autre fichier moins (my-custom-bs.less) et importez votre fichier moins variable après Bootstrap.less comme (en supposant que tous les fichiers bootstrap less) se trouvent dans un dossier appelé bootstrap):

@import "bootstrap/less/bootstrap.less";
@import "my-custom-bs-variables.less";

Ensuite, dans votre tâche de gulp, sourcez uniquement ce fichier:

gulp.task('build-less', function(){
return gulp.src('my-custom-bs.less')
    .pipe(less())
    .pipe(gulp.dest('./source/css'));
});
6
abhisekpaul

Je l'ai fait fonctionner, je ne savais pas que le sourceLess devait être bootstrap.less, c'était principalement le problème.

var sourceLess = './source/less';
var targetCss = './source/css';

// Compile Our Less
gulp.task('less', function() {
    return gulp.src([sourceLess + '/bootstrap.less'])
        .pipe(less())
        .pipe(gulp.dest(targetCss));
});
6
Michael Joseph Aubry

Ma solution à ce problème consiste à créer ma propre copie de bootstrap.less en dehors du dossier des fournisseurs et à modifier tous les chemins d'importation:

@import "../vendor/bootstrap/less/variables.less";

Je peux ensuite commenter des parties de bootstrap que je n'ai pas besoin d'inclure - il y en a beaucoup et vous n'avez généralement pas besoin de tout cela.

Ensuite, je peux choisir de remplacer les inclusions individuelles si je prévois de les modifier:

@import "./custom-bootstrap/variables.less";
// etc...

De cette façon, il n'est pas nécessaire de modifier le dossier des fournisseurs et je peux supprimer ou rajouter des composants à volonté, changer les polices par défaut, les couleurs par défaut, etc.

Un autre conseil pour ceux qui préfèrent le sass/scss. Il est possible de combiner bootstrap à partir de moins de source si vous convertissez en CSS et l'incluez ensuite en utilisant ce plugin de boussole:

https://github.com/chriseppstein/sass-css-importer

1
Henry

Vous ne voulez pas spécifier l'ensemble de moins de fichiers comme source. Seulement bootstrap.less, qui importe les autres.

gulp.task('less', function () {
    return gulp.src('./less/bootstrap.less')
        .pipe(less({
            paths: [ path.join(__dirname, 'less', 'includes') ]
        }))
        .pipe(gulp.dest('./ui/css'));
});
1
Robert Christian

Les éléments suivants gulpfile devraient fonctionner avec la dernière version de bootstrap et gulp.

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var less = require('gulp-less');
var autoprefixer = require('autoprefixer');

gulp.task('css', function () {
    var processors = [
        autoprefixer
    ];
    return gulp.src('./node_modules/bootstrap/less/bootstrap.less')
        .pipe(less())
        .pipe(postcss(processors))
        .pipe(gulp.dest('./public/css'));
});

gulp.task('default', ['css']);

Vous pouvez également compiler chaque bootstrap module/composant individuellement, simplement en analysant individuellement chaque fichier de moins. Ou vous pouvez importer chaque module individuel de la même manière que bootstrap.css.

par exemple. alertes 

@import "../node_modules/bootstrap/less/variables.less";
@import "../node_modules/bootstrap/less/mixins.less";

@import "../node_modules/bootstrap/less/alerts.less";

J'ai utilisé cette approche pour une version compatible avec le module css de bootstrap bootstrap-css où chaque module bootstrap peut être importé individuellement dans les composants) .

0
svnm