Андрей Dobrin

Question

Веб-разработка
+2 ещё

Простой

Что нужно знать, чтобы запустить свой блог?

2 подписчика
более трёх лет назад
501 просмотр

3

ответа

Answer 1 · 2020-03-02 04:06:53

С этой штукой Ты сможешь разрабатывать приложения с высокой скоростью и комфортом.
Webpack Dev Server позволяет тебе запускать локальный сервер (на твоем ПК) и следить за изменениями всех, необходимых для разработки файлов, автоматически. То есть, тебе не придется перезапускать проект, чтобы обновить изменения.

в консоль пишешь:
npm i webpack-dev-server

в package.json в поле scripts добавляешь вот такие вот команды:

"scripts": {
    "commandName": "webpack-dev-server",
  }

Где commandName название твоей команды.

Простой конфиг:

devServer: {
        port: 8888, // определяет порт 
        overlay: { // показывает ошибки или предупреждения при разработке
            warnings: boolean,
            errors: boolean
        },
        open: true, // открывает окно браузера
    }

и еще куча многих опций, типа http/https/https2/hot/host/filename и т.д.

Answer 2 · 2020-01-26 10:59:25

Все очень просто:
Вы правильно сказали, что это функция, передающаяся как аргумент в другую функцию:
пример с js

function  first(callbak){
----здесь пишем код функции----
---- здесь можно записать код "функции обратного вызова" 
и она сработает тогда, когда выполнится функция first()----
}

Простым языком - есть одна функция и у нее в параметре другая. Сперва выполнится сама функция, а потом та, которая является аргументом этой функции.

Answer 3 · 2019-04-28 20:21:19

Таакс, смотря, что именно вы хотите:

Пододвинуть картинку в блоке, используя свойство margin
Позиционировать картинку относительно элемента, используя свойство:
position: relative
позже можете писать свойства:
```
top: значение в px | em | % | rem | pt и т.д.;
left, right и bottom так же
```
Позиционировать картинку независимо элемента, используя свойство:
position: absolute
позже, так же, можете писать свойства:
```
top: значение в px | em | % | rem | pt и т.д.;
left, right и bottom так же
```

Почитайте так же (тут вкратце):
Позиционирование

Answer 4 · 2019-04-22 18:39:36

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, а потом собирается продакшн.
Попробуйте использовать и отпишитесь и отметьте, если поняли суть)

Answer 5 · 2019-04-24 18:27:35

gulp.task('removedist', function (done) { del.sync('dist'); done(); });

Нужно знать, что фунция завершилась. Если не помогло, то напишите, что вышло после моего кода.
Если получили 4 версию gulp, то task для вашей сборки должен выглядеть так:

gulp.task('build', 
	gulp.series(
		'removedist',
		gulp.parallel(
			'imagemin', 
        'styles', 
        'scripts'
)));

Отметье, если помогло. Если появятся вопросы, отпишитесь. Если появится проблема, так же. Вы должны скопировать этот код и, может быть, доработать его под Вашу сборку.