Теперь у нас сначала очиститься папка 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 и все зависимости проставляться автоматически.
Похожие статьи
Наша компания стремится к постоянному улучшению производимого программного продукта. Одним из позитивных факторов является приведение кода к определенным стандартам. Тогда значительно улучшается качество кода, его простота и понимание другими разработчиками, а не только автором. Поэтому БЭМ — именно то, что нужно и нам, и клиентам.
Краткий гайд о том, как сделать красивую анимацию с помощью компактного SVG формата.
Многие разработчики наверняка сталкивались с проблемами производительности сайтов на 1С-Битрикс. Конечно, на это влияет множество факторов, в том числе и конфигурация сервера, на котором находится сайт. Однако многие трудности возможно устранить, если правильно оптимизировать сам сайт! Именно об этом пойдет речь в данной статье.
Записаться на консультацию
Мы свяжемся с вами в течении 10 минут
