Теперь у нас сначала очиститься папка build и только потом запустятся асинхроные потоки.
npm install node-sass gulp-sass --save-dev
Подключение:
const sass = require('gulp-sass');
Используем:
gulp.task(css, function() {
return gulp.src('src/scss/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(concat('lib.css'))
.pipe(autoprefix({
browsers: ['> 0.1%'],
cascade: false
}))
.pipe(gulp.dest('build/css/'));
});
Кроме препроцессора соберем весь css в один файл с помощью concat(). Кроме того я использовал gulp-autoprefixer() для автоматической подстановки префиксов.
Следующим действием добавим таски обработки для картинок и шрифтов. Сразу же отредактируем таск build. В данной статье для экономии времени я не буду использовать модули минификации изображений типа gulp-imagemin.
gulp.task('img', function() {
return gulp.src('src/img/**/*.*')
.pipe(gulp.dest('build/img/'));
});
gulp.task('fonts', function() {
return gulp.src('src/fonts/**/*.*')
.pipe(gulp.dest('build/fonts/'));
});
gulp.task('build',
gulp.series(
'clearBuild',
gulp.parallel('html', 'scripts', 'scriptsDev', ‘css’, 'fonts', 'img' )
)
);
Почти готово
На данном этапе у нас есть неплохое ядро, уже пригодное для работы. Но мы будем еще больше упрощать себе жизнь, чтобы, например, после каждого изменения в css/js/html нам было не нужно лазить в консоль и перезапускать таск, создадим вотчер — наблюдатель, который сам будет следить за файлами и при каждом изменении будет перезапускать таск.
gulp.task('watch', function() {
gulp.watch('src/scss/*.scss', gulp.series('css'));
gulp.watch('src/js/plugins/*.js', gulp.series('scripts'));
gulp.watch('src/*.html', gulp.series('html'));
});
Watch() принимает два параметра: первый — источник за которым будет наблюдать вотчер; второй — в старом Gulp 3-й версии имя вызываемого таска, но в Gulp 4-й версии тут нужна функция, так что воспользуемся gulp.series с именем таска.
Настроим дефолтный таск, который будет вызываться при команде gulp в консоле:
gulp.task('default', gulp.series('build', 'watch'));
После запуска дефолтного таска консоль перешла в режим ожидания:
Теперь при изменениях файлов, они автоматически будут обновляться и в build версии
Но и еще больше упростит жизнь browser-sync! Он развернет виртуальный узел для работы в браузере и заставит браузер реагировать на нужные нам изменения. Также есть синхронизация работы разных браузеров. Если у вас открыт проект в двух разных браузерах, вы сможете заметить, что при скроле или клике в одном из них ивенты передаются на другой. Это сторонняя библиотека, поэтому внимательно смотрим документацию для Gulp 4. Три шага:
Установка:
npm install browser-sync gulp --save-dev
Подключение:
const browserSync = require('browser-sync').create();
Для инициализации нам потребуется конфиг:
const config = {
server: {
baseDir: "./build"
},
tunnel: false,
host: 'localhost',
port: 3333
};
Инициализировать будем в вотчере, так как это самая удобная и логичная точка.
А также заставим обновляться браузер при изменении html разметки:
gulp.task('watch', function() {
browserSync.init(config);
gulp.watch('src/scss/*.scss', gulp.series('css'));
gulp.watch('src/js/plugins/*.js', gulp.series('scripts'));
gulp.watch('src/*.html', gulp.series('html')).on('change', browserSync.reload);
});
И обновлять поток для стилей и скриптов:
Запускаем новую сборку!
Давайте наконец запустим нашу сборку с помощью команды gulp:
Теперь у нас развернут локальный сервер и открылся браузер на вкладке с адресом http://localhost:3333. Можно работать!
На этом пока все. В заключение скажу, что еще есть много хороших модулей. Если эта статья наберет тысячу лайков, то следующую я посвящу отдельно разным модулям. Вы же можете расширять свою сборку нужными вам и все они будут добавляться в devDependencies в файле package.json.
Далее для развертывания проекта вам достаточно будет написать команду npm install и все зависимости проставляться автоматически.
Похожие статьи
Вряд ли кто-то поспорит с тем, что сфера IT технологий является сегодня особо “лакомым кусочком” для соискателей разных возрастов, желающих, как говорится, зарабатывать головой, а не тяжелым физическим трудом. И дело даже не всегда в высокой заработной плате, коей славится эта отрасль, а и в таких явных преимуществах, как: комфортные условия рабочего процесса, лояльный график работы, беспрепятственные возможности карьерного роста, молодой образованный коллектив и т. д. Но возможно ли стать частью мира информационных технологий, если до этого ты занимался чем-то диаметрально противоположным, а в арсенале у тебя лишь базовые знания пользователя ПК? Я, как практикующий back-end разработчик, а в прошлом сотрудник правоохранительных органов, могу с уверенностью сказать — да.
Пять примеров того, что категорически не нужно делать при создании интернет-магазинов от опытного разработчика.
Если Вы работаете над проектом, где есть “1С: Предприятия”, то рано или поздно столкнетесь с заданием интегрировать эту программу с сайтом (или с CRM). Такое “содружество” хотят практически все клиенты, потому как оно превозносит бизнес на уровень выше. И поскольку желание клиента — закон, Вам придется эту задачу делать. А давайте я расскажу, как можно наладить этот процесс в реальном времени.
Записаться на консультацию
Мы свяжемся с вами в течении 10 минут
