Как подключить bootstrap в gulp?

1

npm install bootstrap

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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

gulp.task('sass', function () {
  return gulp.src('./sass/**/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass({
      includePaths: ['node_modules/bootstrap/scss']
    }).on('error', sass.logError))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./css'))
    .pipe(browserSync.stream());
});

gulp.task('serve', gulp.series('sass', function () {
  browserSync.init({
    server: './'
  });

  gulp.watch('./sass/**/*.scss', gulp.series('sass'));
  gulp.watch('./*.html').on('change', browserSync.reload);
}));

gulp.task('default', gulp.series('serve'));

1

@import 'node_modules/bootstrap/scss/bootstrap';

1

gulp

1

npm install bootstrap

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

var gulp = require('gulp');
var concat = require('gulp-concat');
var css = require('gulp-css');

gulp.task('css', function () {
  return gulp.src([
    'node_modules/bootstrap/dist/css/bootstrap.css'
  ])
    .pipe(concat('app.css'))
    .pipe(gulp.dest('dist/css'));
});

gulp.task('default', gulp.series('css'));

1

gulp css

1

const bootstrap = require('bootstrap');

1
2
3
4

gulp.task('bootstrap', function () {
    return gulp.src('./node_modules/bootstrap/dist/**/*')
        .pipe(gulp.dest('./public/vendor/bootstrap'));
});

1
2

<link rel="stylesheet" href="./public/vendor/bootstrap/css/bootstrap.min.css">
<script src="./public/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>