Теперь у нас сначала очиститься папка 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 и все зависимости проставляться автоматически.
Похожие статьи
Когда дело доходит до вывода результатов на экран, часто случаются неожиданности: информация может отображаться совсем не так, как нам хотелось бы или необходимо. Разработка в популярном фреймворке Angular предусматривает использование так называемых Pipes (“трубы”, англ.), которые выводят данные так, как нужно именно вам.
Сроки реализации проектов могут варьироваться от нескольких дней до нескольких лет. И если в первом случае необходимо быстро включится в работу и решить поставленные задачи, то во втором случае важно не выгореть преждевременно. В новой статье нашего блога вы из первых уст узнаете, каково это быть разработчиком на одном и том же проекте на протяжении длительного времени, и как при этом не потерять интерес к нему.
Вряд ли кто-то поспорит с тем, что сфера IT технологий является сегодня особо “лакомым кусочком” для соискателей разных возрастов, желающих, как говорится, зарабатывать головой, а не тяжелым физическим трудом. И дело даже не всегда в высокой заработной плате, коей славится эта отрасль, а и в таких явных преимуществах, как: комфортные условия рабочего процесса, лояльный график работы, беспрепятственные возможности карьерного роста, молодой образованный коллектив и т. д. Но возможно ли стать частью мира информационных технологий, если до этого ты занимался чем-то диаметрально противоположным, а в арсенале у тебя лишь базовые знания пользователя ПК? Я, как практикующий back-end разработчик, а в прошлом сотрудник правоохранительных органов, могу с уверенностью сказать — да.
Записаться на консультацию
Мы свяжемся с вами в течении 10 минут
