D4mations.com

Curso relâmpago de Bootstrap 4.0.0 – Aula 01 – Como instalar Bootstrap 4 via NPM

[ad_1]
https://i.ytimg.com/vi/5BED0R0G3ow/hqdefault.jpg



O curso de Bootstrap 4 que vale a pena compartilhar com seus amigos!
São apenas 3 aulas rápidas e muito dinâmicas para te ensinar tudo que você precisa saber para começar a criar layouts incríveis com Bootstrap.
Nesta primeira aula você vai aprender como instalar o Bootstrap 4 em seu computador via NPM, com Gulp, Browser Sync e Gulp-Sass.

—

Ajude a manter o canal e ainda receba conteúdos exclusivos, assine via PicPay
https://picpay.me/rvsanches

Aprenda a criar seu primeiro tema de WordPress com Bootstrap 4
Veja todos os vídeos: https://www.youtube.com/playlist?list=PLBbHLUbqqCrT1gBZtTminYijo8DVpPynE

⚙ Instalação o Bootstrap 4 (com Sass e Gulp)
⚗ Transformação do layout em um tema de WordPress
✏ Criação das funcionalidades do tema
🕶 Utilização de plugins úteis
📡 Publicação do site

Original source

d4mer

,
, , , , , , , , , , , , , , ,

24 responses to “Curso relâmpago de Bootstrap 4.0.0 – Aula 01 – Como instalar Bootstrap 4 via NPM”

  7. Após vários problemas com os caminhos e erros, consegui com essas alterações:
    gulpfiles.js:

    var gulp = require('gulp');

    var browserSync = require('browser-sync').create();

    var sass = require('gulp-sass');

    // Compilar Sass

    gulp.task('sass', gulp.series( function() {

    return gulp.src(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'])

    .pipe(sass())

    .pipe(gulp.dest("src/css"))

    .pipe(browserSync.stream());

    }));

    // Mover JS para src/js

    gulp.task('js', gulp.series( function() {

    return gulp.src(['node_modules/bootstrap/dist/js/bootstrap.min.js', 'node_modules/jquery/dist/jquery.min.js', 'node_modules/popper.js/dist/umd/popper.min.js'])

    .pipe(gulp.dest("src/js"))

    .pipe(browserSync.stream());

    }));

    // Servidor para olhar os HTML/SCSS

    gulp.task('serve', gulp.series( ['sass'], function() {

    browserSync.init({

    server: {

    baseDir: "./"

    }

    });

    gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'], gulp.parallel( ['sass'] ));

    gulp.watch("src/*.html").on('change', browserSync.reload);

    }));

    gulp.task('default', gulp.series( ['js', 'serve']));

    Espero que isso poupe horas de procura, como me custou….hheheehe

  9. Algo não deu certo prof…rs!

    AssertionError [ERR_ASSERTION]: Task function must be specified

    at Gulp.set [as _setTask] (C:UsersHeltonDesktopsitescursonode_modulesundertakerlibset-task.js:10:3)

    at Gulp.task (C:UsersHeltonDesktopsitescursonode_modulesundertakerlibtask.js:13:8)

    at Object.<anonymous> (C:UsersHeltonDesktopsitescursogulpfile.js:27:6)

    at Module._compile (module.js:653:30)

    at Object.Module._extensions..js (module.js:664:10)

    at Module.load (module.js:566:32)

    at tryModuleLoad (module.js:506:12)

    at Function.Module._load (module.js:498:3)

    at Module.require (module.js:597:17)

    at require (internal/module.js:11:18)

  11. Mano tenho uma dúvida, no sistema windows como instala isso, na raiz? C: ou pode ser no Documentos a pasta? já fiz varias coisas usando XAMPP, não sei se é o caso de ja fazer via localhost, como instalo cada pacote separadamente… obrigado!

  12. Não é querendo desmerecer o trabalho de ninguém, mas pra ajudar a melhorar. Eu entrei no vídeo pra aprender bootstrap e não node js, na primeira aula não falou praticamente nada de bootstrap, não explicou pra que serve cada coisa do código node, e no fim seu código não funcionou. Uma dica é fazer aulas menores com temas específicos e explicar de uma forma a ser entendida por quem nunca usou a ferramenta.

  13. Eu fiz passo a passo, pausando o vídeo e seguindo, mas no final quando vou executar o gulp, aparece mensagem de erro

    assert.js:362

    throw err;

    ^

    AssertionError [ERR_ASSERTION]: Task function must be specified

    at Gulp.set [as _setTask] (C:UsersHelenameu-sitelenanode_modulesundertakerlibset-task.js:10:3)

    at Gulp.task (C:UsersHelenameu-sitelenanode_modulesundertakerlibtask.js:13:8)

    at Object.<anonymous> (C:UsersHelenameu-sitelenagulpfile.js:21:6)

    at Module._compile (internal/modules/cjs/loader.js:774:30)

    at Object.Module._extensions..js (internal/modules/cjs/loader.js:785:10)

    at Module.load (internal/modules/cjs/loader.js:641:32)

    at Function.Module._load (internal/modules/cjs/loader.js:556:12)

    at Module.require (internal/modules/cjs/loader.js:681:19)

    at require (internal/modules/cjs/helpers.js:16:16)

    at execute (C:UsersHelenaAppDataRoamingnpmnode_modulesgulp-clilibversioned^4.0.0index.js:36:18) {

    generatedMessage: false,

    code: 'ERR_ASSERTION',

    actual: false,

    expected: true,

    operator: '=='

    }

    alguem me ajuda?

  15. Já tentei de vaaaarias maneiras rodar o browser-sync com o gulp4 mas não deu segui exemplo de uma das tentativas:

    var gulp = require('gulp');
    var browsersync = require('browser-sync').create();
    var sass = require('gulp-sass');

    //Compilar o Sass
    gulp.task('sass', gulp.series(function() {
    return gulp.src(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'])
    .pipe(sass())
    .pipe(gulp.dest("src/css"))
    .pipe(browsersync.stream());

    }));

    //mover js para src.js
    gulp.task('js', gulp.series(function() {
    return gulp.src(['node_modules/bootstrap/dist/js/bootstrap.min.js', 'node_modules/jquery/dist/jquery.min.js', 'node_modules/popper.js/dist/umd/popper.min.js'])
    .pipe(gulp.dest("src/js"))
    .pipe(browsersync.stream());

    }));

    //servidor para olhar os Html /scss
    gulp.task('server', gulp.parallel(['sass']), gulp.series(function() {
    browsersync.init({
    server: {
    baseDir: "./src"
    }

    });

    gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'], gulp.parallel(['sass']));
    gulp.watch("src/*.html").on('change', browsersync.reload);

    }));

    gulp.task('default', gulp.series(['js', 'server']));

  21. Não sei o que fiz de errado:

    var gulp = require('gulp');
    var browserSync = require('browser-sync').create();
    var sass = require('gulp-sass');

    //Compilar o Sass

    gulp.task('sass', function(){
    return gulp.src(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'])
    .pipe(sass())
    .pipe(gulp.dest("src/css"))
    .pipe(browserSync.stream());
    });

    //Mover js para src/js

    gulp.task('js', function(){

    return gulp.src(['node_modules/bootstrap/dist/js/bootstrap.min.js', 'node_modules/jquery/dist/jquery.min.js', 'node_modules/popper.js/dist/umd/popper.min.js'])
    .pipe(gulp.dest("src/js"))
    .pipe(browserSync.stream());

    });

    //servidor para olhar os HTML/SCSS
    gulp.task('serve',['sass'], function(){
    browserSync.init({
    server:"./src"
    });

    gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'], ['sass']);
    gulp.watch("src/*.html").on('change', browserSync.reload);
    });

    gulp.task('default',['js', 'serve']);

  22. cara a instalação do bootstrap deu certo mais deu erro quando digitei o codigo de configuração dos arquivos:

    D:LEANDROBootstrap>gulp
    assert.js:350
    throw err;
    ^

    AssertionError [ERR_ASSERTION]: Task function must be specified
    at Gulp.set [as _setTask] (D:LEANDROBootstrapnode_modulesundertakerlibset-task.js:10:3)
    at Gulp.task (D:LEANDROBootstrapnode_modulesundertakerlibtask.js:13:8)
    at Object.<anonymous> (D:LEANDROBootstrapgulpfile.js:27:6)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)

Leave a Reply