Como instalar Bootstrap 4 via NPM

O conteúdo do artigo abaixo é o tema da primeira aula do curso online e grátis: Curso relâmpago de Bootstrap 4.0.0.

Sobre o curso

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.

Como instalar Bootstrap 4 via NPM

Antes da instalação do Bootstrap nós instalamos algumas ferramentas e você pode ter dúvidas sobre suas funcionalidades, por isso veja abaixo para que serve cada uma delas:

• Gulp é um realizador de tarefas javascript.
• O Browser-sync atualiza automaticamente o navegador em caso de alterações no arquivo.
• Gulp-sass permite a compilação do Sass com o projeto.

Uma das partes fundamentais deste vídeo é a criação do arquivo gulpfile.js e se você quiser pode copiar o código abaixo para usar em seus projetos:

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

Para mais dicas como esta inscreva-se em meu canal no YouTube.