Настройка Gulp (4.0.2) для Bootstrap, SASS и BrowserSync

На днях я наткнулся на проект, в котором мне нужно было создать быстрый прототип HTML / CSS, чтобы показать внешний вид и определенные анимации на прототипе.

Я не знал, что настройка заняла больше времени, чем я думал.

Я хочу пройти несколько шагов по настройке gulp, некоторые вещи, на которые вы должны обратить внимание, и надеюсь, что это поможет вам быстро его настроить.

По сути, вы хотите иметь возможность делать что-то подобное. Внесите изменения в свой файл SCSS, и gulp автоматически проследит за этими изменениями и отобразит их в браузере.

Вы можете клонировать коды из

Https://github.com/amylily1011/gulp4-sass-bootstrap

До начала.

В этой статье я бы предположил, что у вас установлен nodeJS. Если у вас нет, вы можете посетить nodeJS.

Что нам понадобится для настройки:

Загрузите Bootstrap с помощью npm (это потому, что вы хотите иметь возможность изменять их стили по умолчанию).

$ npm install bootstrap

2. Установите SaSS. Существуют разные способы установки SaSS, и в этой статье мы будем использовать npm для установки SaSS.

$ npm install sass -g 
# we will want to install this globally

3. Установите Gulp CLI. Это упростит вашу жизнь, если у вас будет интерфейс командной строки Gulp.

$ npm install gulp-cli -g

4. Установите Gulp, gulp-sass и browser-sync.

$ npm install gulp gulp-sass browser-sync --save-dev

5. Настройка пакета. Эта команда задаст вам кучу вопросов, пока вы можете просто пропустить их все.

$ npm init

Файловая структура

Теперь, когда настройка готова, давайте посмотрим на файловую структуру.

Вам нужно будет создать папки css, js и scss. В папке scss создайте «styles.scss». Также создайте файлы index.html и gulpfile.js.

|-src
  |-assets
  |-css 
  |-js
  |-scss
    |-styles.scss
  |-index.html
|-gulpfile.js
|-packages.json #this file will be generated with npm init

В ./index.html добавим таблицу стилей в тег ‹head› ‹/head›. Нам пока не нужно создавать эту таблицу стилей, потому что, когда мы настраиваем gulp, он сгенерирует для нас этот файл.

<link rel="stylesheet" href="css/styles.css">

Моя текущая среда для этой статьи:

node: v11.13.0
npm: 6.10.1
gulp CLI: 2.2.0
gulp: 4.0.2
sass: 1.19.0

Настроить gulpfile.js

Здесь начинается самое интересное!

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

Теперь давайте проверим, успешно ли скомпилирован наш scss-файл.

./gulpfile.js

const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require('browser-sync').create();
//compile scss into css
function style() {
    return gulp.src('src/scss/**/*.scss')
    .pipe(sass().on('error',sass.logError))
    .pipe(gulp.dest('src/css'))
    .pipe(browserSync.stream());
}

В функции стиля вы хотите:

Знай, где мой «scss». Таким образом, мы получим все файлы с расширением .scss в каталоге src / scss.
Передайте файл через компилятор sass и сообщите мне, есть ли ошибка.
Сохраните скомпилированный файл css (который находится в src / css)
Потоковая передача изменений во все браузеры

В Gulp 4.0.x вам нужно будет экспортировать его после объявления функции.

exports.style = style;

Ваш gulpfile.js будет выглядеть так.

const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require('browser-sync').create();
//compile scss into css
function style() {
    return gulp.src('src/scss/**/*.scss')
    .pipe(sass().on('error',sass.logError))
    .pipe(gulp.dest('src/css'))
    .pipe(browserSync.stream());
}
exports.style = style;

Давайте проверим, работает ли это!

В вашем терминале запустите:

$ gulp style

Успешный вывод выглядит так.

Ваш терминал покажет, что стиль скомпилирован.

Когда это будет сделано, вы проверите свою папку css, и будет заполнен новый файл с именем «styles.css».

Если это не сработает, вы можете проверить свои файлы src () и dest ().

return gulp.src('./scss/**/*.scss')

В некоторых случаях, в зависимости от вашей файловой структуры, вам может потребоваться перейти в правильное расположение выходного файла.

.pipe(gulp.dest('./css'))

Используйте BrowserSync для обновления изменений

Отсюда мы создадим функцию watch (), чтобы отслеживать изменения, внесенные в наш файл .scss, автоматически компилировать их и отображать в браузере.

function watch() {
    browserSync.init({
        server: {
           baseDir: "./src",
           index: "/index.html"
        }
    });
    gulp.watch('src/scss/**/*.scss', style)
    gulp.watch('./*.html').on('change',browserSync.reload);
    gulp.watch('./js/**/*.js').on('change', browserSync.reload);
}
exports.watch = watch;

Здесь вы хотите указать браузеру, какой файл запускать. Во многих случаях достаточно просто «baseDir:», но чтобы сделать его более надежным, добавьте файл index.html в «index:», чтобы он обращался в нужное место. Также не забудьте экспортировать функцию.

Ваш окончательный файл gulpfile.js должен выглядеть следующим образом.

Теперь давайте запустим это в Терминале:

$ gulp watch

Если вы успешно запустите gulp watch, он покажет вам информацию о запущенном порту.

Браузер с

Http: // localhost: 3000 /

появится в новом окне.

Как использовать Bootstrap в файле .scss?

Мы можем проверить, вызывается ли boostrap, просто импортировав из модуля nod.

Наш файл scss / styles.scss:

@import "node_modules/bootstrap/scss/bootstrap";

В документе сначала необходимо объявить цвета, чтобы переопределить другие компоненты.

Итак, давайте изменим основной цвет нашей темы на розовый, чтобы переопределить все компоненты с параметром -primary, например кнопки, чтобы основной цвет был розовым.

Чтобы проверить, компилируется ли наш файл .scss, давайте изменим цвет фона на красный и посмотрим, что произойдет.

$theme-colors: (
     "primary": #FF69B4
);
@import "node_modules/bootstrap/scss/bootstrap";
body {
    color: white;
    background: rgb(92,18,18);
    height: 400vh;
}

Как только вы сохранили этот файл. Убедитесь, что вы добавили кнопку в HTML-файл.

./index.html

Теперь, когда мы сохранили все файлы, gulp автоматически обновит наши изменения, скомпилирует файл sass и покажет его в нашем браузере по адресу http: // localhost: 3000 /.

Вуаля!

Если ваш результат выглядит так, ваша настройка gulp завершена.

Я надеюсь, что это будет полезно для всех, кто впервые попробует gulp, и, возможно, у него возникнут небольшие затруднения при правильной настройке.

Удачного моделирования вашего прототипа!