serve в соответствии с 4 версией:gulp.task('serve', function(){
browserSync.init({
server: './src',
notify: false,
host: '185.27.134.11'
});
gulp.watch('src/sass/**/*.sass', gulp.series('sass'));
gulp.watch('src/*.html', gulp.series('название таска, который обрабатывает html'));
})parallel task-и в потоке выполняются вместе.series тут сперва выполнится первый task, потом второй и т.д.
npm i webpack-dev-server"scripts": {
"commandName": "webpack-dev-server",
}commandName название твоей команды.devServer: {
port: 8888, // определяет порт
overlay: { // показывает ошибки или предупреждения при разработке
warnings: boolean,
errors: boolean
},
open: true, // открывает окно браузера
}function first(callbak){
----здесь пишем код функции----
---- здесь можно записать код "функции обратного вызова"
и она сработает тогда, когда выполнится функция first()----
}var browserSync = require('browser-sync').create()
var bsConfig = {
server: {
baseDir: 'app'
},
notify: false,
open: false
};
gulp.task('watch', function(){
browserSync.init(bsConfig);
gulp.watch("app/pug/*.pug", gulp.parallel("pug"));
})Watcher предлагаю использовать таким способом)
Gulp.Gulp 4 и установить прошлую версию Gulp 3.9.1npm uninstall -g gulp && npm i -g gulp@3.9.1 и код Ваш заработает.Gulp 4 и перейдите по этой ссылке и прочитайте инструкцию.Gulp 4:gulp.task('watch', function(){
browserSync.init({
сюда конфиг вашего сервера
});
gulp.watch("Путь к файлам Html", gulp.series('html')); // <--- В кавычках название таска
gulp.watch("Путь к файлам CSS", gulp.series('prefix'));
})parallel и series. То есть в первом случае Ваши task-и в потоке выполняются вместе. А в другом случае, сперва выполнится первый task, потом второй, третий и до конца.
marginposition: relativetop: значение в px | em | % | rem | pt и т.д.;
left, right и bottom так жеposition: absolutetop: значение в px | em | % | rem | pt и т.д.;
left, right и bottom так же320px..central-menu свойство margin-top: 320pxparent > child{
property : value
}parent child{
property : value
}parent::nth-child(child's number){
property : value
}ul.list
li.list__item
li.list__item
li.list__item
li.list__itemli, используя правило ввыше:.list::nth-child(1){
padding: 0 0 0 20px
}css media queries. Если вы не умеете верстать сайты, а просить это у умеющих не позволяет бюджет, либо для такой "мелочи" и не хочется тратить вообще либо какую-то копеечку, можно поискать в ынтернети инфу о медиа запросах (media queries). В вашем случае, нужно этой же картинке или блоку, содержащему эту картинку при мелких размерах экрана (мобильных) написать свойства css:.block_img{
display: none
}@media only screen and (max-width: 768px){
.block_img{
display: none
}
}server засунуть, наоборот, в watcher:var config = {
server: {
baseDir: "src/"
}
}Watcher будет выглядеть так:gulp.task('watch', function(){
browserSync.init(config);
gulp.watch("src/less/*.less", gulp.series("less"));
--> x
})gulp.series или gulp.parallel. Их разница в порядке выполнения тасков. Я рекомендую использовать gulp.series для подобных тасков.
watcher:gulp.task('watch', function(){
gulp.watch('файлы html', gulp.series('html'));
gulp.watch('файлы css', gulp.series('css'));
gulp.watch('файлы js', gulp.series('js'));
gulp.watch('файлы img', gulp.series('img'));
})'файлы [html, css, js&img]' пишите путь до файлов.builder примерно такой:gulp.task('build',
gulp.series(
сюда можно таск очитки dist папки засунуть, т.е. его название, типа 'clean',
gulp.parallel(
'html',
'styles',
'js',
'img'
)));gulp.series, при этом не забыть удалить все скобки, связанные с этим методом.
gulp 4gulp.task('watch', function(){
gulp.watch("src/*.html", gulp.series("html"));
gulp.watch("src/js/*.js", gulp.series("scripts"));
gulp.watch("src/sass/*.sass", gulp.series("sass"));
gulp.watch("src/images/*.+(jpg|jpeg|png|gif)", gulp.series("imgs"));
})parallel и series. То есть в первом случае Ваши task-и в потоке выполняются вместе. А в другом случае, сперва выполнится первый task, потом второй, третий и до конца.
gulp.task('removedist', function (done) {
del.sync('dist');
done();
});gulp, то task для вашей сборки должен выглядеть так:gulp.task('build',
gulp.series(
'removedist',
gulp.parallel(
'imagemin',
'styles',
'scripts'
)));gulp.task('watch', function(){
browserSync.init(config);
gulp.watch(path.watch.html, gulp.series('html:build'));
gulp.watch(path.watch.scss, gulp.series('scss:build'));
gulp.watch(path.watch.css, gulp.series('css:build'));
gulp.watch(path.watch.js, gulp.series('js:build'));
gulp.watch(path.watch.images, gulp.series('images:build'));
gulp.watch(path.watch.fonts, gulp.series('fonts:build'));
})parallel и series. То есть в первом случае Вашиtask-и в потоке выполняются вместе. А в другом случае, сперва выполнится первый task, потом второй, третий и до конца.build можно сделать так:gulp.task('build',
gulp.series(
'clean:build',
gulp.parallel(
'html:build',
'css:build',
'js:build',
'images:build',
'fonts:build'
)));dist, а потом собирается продакшн.
item-web в третьем элементе напишите item-security в стилях:.item-web::before {
content: "";
background: url(/img/Icon-Laptop.png) no-repeat 15px;
display: block;
margin: auto;
width: 70px;
height: 70px;
border: 4px solid #f2d048;
border-radius: 50px;
opacity: .8; }
.item-security::before { < ----- CЮДА
content: "";
background: url(/img/Icon-Locked.png) no-repeat 15px;
display: block;
margin: auto;
width: 70px;
height: 70px;
border: 4px solid #f2d048;
border-radius: 50px;
opacity: .8; }