javascript - bootstrap - tooltip jquery

¿Usando gulp para compilar archivos bootstrap.less en el archivo bootstrap.css principal?

Question

Realmente me gusta gulpjs, fue mi administrador de tareas de elección, pero me gustaría saber algo sobre los gerentes de tareas hace unos meses y me puse de moda, principalmente por el soporte. Para gulpjs es difícil encontrar información sobre cosas específicas.

Mi pregunta es cómo configuro mi gulpfile.js para poder editar los archivos bootstrap.less específicamente las variables.less . Instalé " gulp-less " y lo implementé como a continuación.

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''));
});

Aparece el siguiente error después de ejecutar gulp less .

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

No creo que mi código de tarea sass esté configurado correctamente, soy un principiante, pero probé varias combinaciones, y sí, utilicé el ejemplo de la documentación "sin tragos ", el código que utilicé fue el más claro y conciso cortar el código de lo que quiero lograr.

Editar: estoy encontrando algunas buenas palabras clave para esto en google. Encontré algunas publicaciones recientes sobre esto, aquí hay una estructura de arranque de Gulp con menos mantenimiento , no parece que haya una buena respuesta que deba leerse.

Adicional: Olvidé al usar el código de los documentos, me sale un error con alerts.less

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

Error

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

Incluso cuando elimino esa línea, sigue encontrando nuevos errores.

Editar: Los documentos sí dicen lo siguiente, pero eso no tiene sentido para mí, está diciendo que se supone que hay un error, si eso es confuso, intentaré seguir la guía que proporcionan.

Manejo de errores

De forma predeterminada, una tarea de trago fallará y todas las secuencias se detendrán cuando ocurra un error. Para cambiar este comportamiento, consulte la documentación de manejo de errores aquí

Answer 1

Lo hice funcionar, no sabía el origen. Lo que faltaba era ser bootstrap.less , ese era principalmente el problema.

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));
});

Answer 2

Tuve los mismos problemas al intentar compilar el CSS de Bootstrap. Mi solución simplificada terminó pareciéndose a:

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

y mi archivo styles.less incluía la importación a bootstrap.less . Me di cuenta de que si se incluían menos archivos bootstrap en la gulp.src() acceso gulp.src() , se producirían errores.

Mi styles.less :

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

Answer 3

Gulp less plugin simplemente convierte menos a css. En Bootstrap, index less file es Bootstrap.less, que a su vez importa todos los demás archivos relacionados con bootstrap. Entonces todo lo que necesitas es obtener el Bootstrap.less. Si quiere su propio conjunto de variables, solo cree otro archivo menos (my-custom-bs.less) e importe su variable menos archivo después de Bootstrap.less like (suponiendo que todos los archivos bootstrap less se encuentran en una carpeta llamada bootstrap):

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

Luego, en su tarea de trago, solo ingrese este archivo:

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

Answer 4

Mi solución a este problema es crear mi propia copia de bootstrap.less fuera de la carpeta de proveedores y cambiar todas las rutas de importación:

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

A continuación, puedo comentar algunas partes de bootstrap que no necesito incluir: hay mucho allí y normalmente no se necesita todo.

Entonces puedo optar por reemplazar individuo, si tengo la intención de modificarlos:

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

De esta forma no hay necesidad de modificar la carpeta de proveedores y puedo quitar o volver a agregar componentes a voluntad, cambiar las fuentes predeterminadas, los colores predeterminados, etc.

Otro consejo para aquellos que prefieren sass / scss. Es posible combinar bootstrap de menos origen si convierte a css y luego lo incluye usando este plugin compass:

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

Answer 5

No desea especificar el conjunto de menos archivos como fuente. Solo bootstrap.less, que importa los otros.

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

Answer 6

El siguiente archivo gulpfile debería funcionar con la última versión de bootstrap y 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'']);

También puede compilar cada módulo / componente de arranque individualmente, simplemente analizando cada archivo menos individualmente. O puede importar cada módulo individual de la misma forma que lo hace el bootstrap.css.

por ejemplo, alertas

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

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

Utilicé este enfoque para una versión compatible con el módulo css de bootstrap bootstrap-css, donde cada módulo de arranque se puede importar individualmente en componentes.