• Wednesday , 16 October 2019

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

Code Canyon
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

3d Ocean

Related Posts

24 Comments

  1. Ricardo Sanches
    September 22, 2019 at 15:39

    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

  2. Marcio Willians
    September 22, 2019 at 15:39

    boa aula! Mas na hora que executo o gulp abra o server com erro "Cannot GET /"! Alguma ajuda??

  3. Hugo Neves
    September 22, 2019 at 15:39

    Alguém passou por um problema ao compilar o gulp e não encontrar o gulp-sass? já testei diversas maneiras mas não foi..

  4. Wanderley Gadelha
    September 22, 2019 at 15:39

    cara vc ta de Parabéns conseguiu transformar bootstrap que é algo simples numa coisa inviável

  5. Mikhail Rommulo
    September 22, 2019 at 15:39

    Para quem está com dificuldade com o gulpfile por causa da nova versão do gulp, um abençoado fez o gulpfile com a nova sintaxe https://github.com/KellvynCarvalho/tarefasgulp/blob/master/gulpfile.js

  6. Luiz Yoshiassu
    September 22, 2019 at 15:39

    Ricardo muito bom o video, porem quando tento abrir no cmd escrevendo gulp nao me aparece nada e nao abre nenhuma pagina, sera que poderia me ajudar ?

  7. jrwarg1
    September 22, 2019 at 15:39

    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

  8. TheNecromonder
    September 22, 2019 at 15:39

    Devido algumas mudanças no Gulp 3 para o 4, esse código do gulpfile.js não funcionará para quem estiver na versão 4. Olhando na net, vi quais foram tais mudanças e consegui corrigir esse gulpfile.js que ele passou na aula para essa versão do Gulp 4. Segue para quem precisar no Github: https://github.com/falconramos/bootstrap4-npm-sass-gulp.git

  9. helton yuji yamamoto
    September 22, 2019 at 15:39

    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)

  10. Gilberto França da Silva
    September 22, 2019 at 15:39

    Para erro de Sintaxe hoje: SOLUÇÃO:
    https://github.com/KellvynCarvalho/tarefasgulp.git

  11. Web Design
    September 22, 2019 at 15:39

    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. Suéliton Santos
    September 22, 2019 at 15:39

    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. lLena101
    September 22, 2019 at 15:39

    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?

  14. Elaine Manoelle
    September 22, 2019 at 15:39

    O código do arquivo gulpfile.js não funciona no gulp4 …Dá erro de sintaxe 🙁

  15. roberto dias
    September 22, 2019 at 15:39

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

  16. Diones Souza
    September 22, 2019 at 15:39

    Muito bom. curti muito. 😀

  17. Amanda Benevides
    September 22, 2019 at 15:39

    Pra quem tiver ASSERTION ERROR: Task function must be specified: instalar a versão 3.9.1 (npm install gulp@3.9.1), parece que a versão mais nova da problema pra reconhecer a task default.

  18. Dalton Borges
    September 22, 2019 at 15:39

    Excelente aula! Vou instalar o meu aqui e correr para a próxima aula!
    Valeu, tricolor! Obrigado por compartilhar esse conhecimento e parabéns pelo canal!

  19. Distinto Branding
    September 22, 2019 at 15:39

    Cara… fiz e refiz e para mim não trocou o fundo do background… sei lá que raios não deu certo.

  20. TEC Company It
    September 22, 2019 at 15:39

    styles.scss não compila. Esse curso é muito confuso, em um curso voce não pode ser uma metralhadora de informações, voce deve ser uma metralhadora de explicações, faz e explica pra que cada coisa serve.

  21. Leandro Leal
    September 22, 2019 at 15:39

    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. Leandro Leal
    September 22, 2019 at 15:39

    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)

  23. Kelly Ferracine
    September 22, 2019 at 15:39

    Bom dia, mesmo eu usando o wampserver preciso de instalar esses programinhas no meu pc??

  24. Ricardo Portela da Silva
    September 22, 2019 at 15:39

    Otimo video camarada!. Lembrando para quem chegar aqui, a instalacao do gulp será na versão 4.0, (no video instala a versão 3.9) logo o gulpfile.js deve ser atualizado com a versão do github do Ricardo Sanchez.https://github.com/rvsanches/BS4-WP/blob/master/layout/gulpfile.js

Leave A Comment

You must be logged in to post a comment.