Вы находитесь на странице: 1из 4

�� ����� ������. ���� ���� ����� - ��������� ����������. � �������� yeoman.

io
� �� ���� ����������� ��������� ���-��������� webapp . � ������ ���������� gulp �
������� �������� sass + bootstrap sass + bower � ������� �� ���� ����� �������� +
chai � mocha (������������ ����) + browsersync ������� �������� �� 3001 �����.
�������� �� ����� ��� � ������. ������ �� ����� ������� ������. ��� � ���:

������� nodeJS, gulp bower ���������.


������� yo ��������� (npm i yo -g)
������� ��������� ��������� (npm i generator-yeogurt -g)
������� ������� ����� ������� � ������ ���� ������� (yo yeogurt )
���� ��������������� ������ � ������ ������������. � �� � �� ������� ���������
��������.
�������� ������ (������� gulp serve) � ��������� �������� ������

=======================================

"button__primary--hover.html" ���, ���, ����� ��� ����� �� ��������. ��� ���-


������������ ��������, ��-������.
��-������, �� html ��� ����� ���������� ������� �� �����.
��� ���� ������� ������.
��� https://habrahabr.ru/post/246349/
��� yeoman.io
��� https://github.com/larsonjj/generator-yeogurt (�� ��� ������ npm i generator-
yeogurt -g)

"button__primary--hover.html" ���, ���, ����� ��� ����� �� ��������. ��� ���-


������������ ��������, ��-������.
��-������, �� html ��� ����� ���������� ������� �� �����.
��� ���� ������� ������.
��� https://habrahabr.ru/post/246349/
��� yeoman.io
��� https://github.com/larsonjj/generator-yeogurt (�� ��� ������ npm i generator-
yeogurt -g)

header.jade > .header � ����� ��� �� ��������� scss. � ����� ��� ��� �����. ��� �
����� �����. ��� �� html, ������ � �������������� ������� � ���������� �
�������)))) ����� �������� ������ ��������� jade-������ (������ ��� pug, � �� jade,
�� ���� ���� ��������)
https://pp.vk.me/c837320/v837320368/6ff4/D94gw1P8z...

�� ������, ���� �� �����. ����� � ������� �� ������� � main.scss �������������


(@import). ������� ������� � �� ��������� � ��� ��������� �����. �� ������ ����
����� - �������� gulpfile � ������ �������� ������ � ������� ��� �� ����� �
�������. �� ��� ����� ����(((

� ����� ���� ��������������� � ��� ����� ��� ��������. �������� ����� ���������.
����� � jade. ������ ��� pug (������� �������������). � ��� ����� ������� ������,
����� ������ ����� �� sass. ������������� gulp, ������ ��� �� ��� ���������������,
�������� � �����������. ������ ����� �������� ���� "�� ���� ������ ��������" - ��
�..� - ����. ������� �� �� ��� ������� ����� �������� ������ ����� � ������������,
�� �� �������� ������ � ����� ���� ���������� � ����.
� ���� �� ������ � ������������, ������ �� �� ������ ������ � ������ ��� � �� �
������, ���� ������ � ��� �� ����� modules ����� �� ���������, ���� gulp ���� �� �
styles - ��� ���� � ����� � ��������� ������))).
https://pugjs.org/api/getting-started.html - ��� ���������� ��������. ���� �� ��
������ ��� ��������� ����� �����, ����� ��������� � ���������� - � ����� � � ������
����.

===================================
1) ��, �������. �� gulp � �� ����� ��� � �������� ��� ��������� �������. �� ����
webpack, ������� ����������� ������������ �� ����� - ��� �������, � �� ��������
����� � ���� � ���� ������� ������. � �������� �� �������� ��������.
2) �� ��� ����� �� 1� �����=)
3) �� ��� �������� � ��� � ������� �� ����������� ����� - ��� reset.css ���
normalize.css. �� ������� ����������� � �������� BEM.
4) jQuery - ����� ���� ��������� ������������� ���������� ��� ��������� �������,
������� ���������� ������� ������������� � �����. � ���� � ��� ����� ����������
���� �������. � �� ������ ����� ������ ��������� � ����� � ������� ������� js. � ��
��� ��� ���� ��� � ������ �� ��� ����� ����� ��� � ����� �����, ���������
���������� � ������ ������� ���� ����� ������ �������� �� ������ ��������. jQuery
�������� ��� �������. � ��� � ����� �������� ������, ����� �� �� �����-����� �����
��������. � javascript native ����� �� ��� ������ � ���������. ��� ��� �������
������, ����� � ������ ��� �������� �� ��� - � �� ���� ������ � �� �������� =)
5) �� ���� ������������������ � ����� �������. � ������ �� ����. ���� ������ ���� -
������ �� �������� intermediate. ����� ��� ����� ������� ����� ����� ������� -
������ ������ ����� ��������� �� ���� ��������� ���������. � �� �����������
���������� ������������ ��� �����-�� ������� ���� ������. �� ����� ���� ��������
����� �����. ���� sass - less, stylus ���������� ���������. ������� ���-�� �� vue -
react ������� �� 1 ������ ������������. �� � ��� �� ����� ��������� ������������,
��������� �� ���������� ����.
6) ����������, ���� �������� ��� ��������. ��� ������� �� ���, � ����� ��� ������
���������. �������� ���� ui-kit �� vue � ������ ��� ������� ������ ����. ��������
���� ������ ���������� � �������� � ������ ��� ������� ������� - ��� ��������
�����������

=============================
�.�.:
1. Gulp �� ����������� ��� ��������� ���������� �����������, ������ � ��������?
2. ���������� �� ��� - ������ ����� ������������� ���� ���������? � �����������
������� �� �� �����������? ��-�����__��-��������_�����������_��������?
������, yeogurt-�� �� ��� ����������? ��� gulp-a ������� ���-�� �� ���, ���� �
��������, � ��� ��� ���� �����?
Pug �� HTML �����������?

��� � ���� ����:


1. html/css ���� - ����� ��������. ������, ���� �� �������� �������������� ��������
�� ������ ��� ������.
1.1. �������� ���, ����� �� �� ������, �����������.
1.2. �������� SASS, ����� �� �����������.
1.3. Pug (jade) - �� �����?
1.4. ����������� Gulp ��� ���� ��������� ���� �����
1.5. ����������� ������ �� �������� ������������ � ���������, �.�. ����
������ ��� � ����� ��� ����������� GULP-� ��� ������?
2. ������ ��������, ��������, ���������� � ������ jQuery, ���� �� ��������.
3. ��� bootstrap, ����� �������� ������� � �����, ��� �� ������ �� �����-��? �� � �
���������� ��������� �� ������������ �����.
4. ��� Wordpress, ��� ����� ����-�� ������� ��������� �����, ���� ���� ����������
����������?
5. ������� PHP �������, �� ��� ����? �� ������ �����?

============================

������
������ 11:55

1) gulp � �������� ������ �� ������� ����� �� ������ svg-��������. webpack �� �����


��������� � ���� ��������. �� gulp ����� ��������� ������� ��������� ������� �����.
�������� ���� ����� � ���� ������ ������ �� ���������, �������� ��� ���� viewBox
����� � �� ��� ���-��. ��� ������ � ��� ��������� ���� ����� �� �������, �������
����� �� svg �������� � ���������� ����������� gulp ����� ����� � �����
2) 1 ���� - 1 ����. ������������ ��� ���������� � ������������ �� ������ ���� ����
��� ���� � �������� ���������. ������������ Vue � ������� ��� ��������� �������� �
������� ������ ���� �������� ����� � ������ �������� ������������ vue-�����������
3) �� ������ ������������ ������� � �� ����� ���� � ������� ������� �� ����. Gulp -
��� ������ �� ��������� ����, � ���, ������� �������� ������ �������
4) pug - �����. �� ���. �� ������ �� �� ���������� ����� ����� ������ �� ����
�������. pug ��������� �� ������ �������������� �������������� �������. ������ ��
��� ����������� ���� ������ ���. �� vue � ������� ��� ������� ���� ����� �����, ��
������ ��� ��������� � vue ��������� ������ ���� �������� ���������� - �� �� ������
������ � ������ ������� � ��� ������� ���
5) �� ������ ��������� - ��������� �� ���� ���� ���� ��� ����. ������ �����������
�� ����� �����������. �� �������� �������� � ��������. ������� �� �������� �
������� � �������� ��������� ������� � �� ��� ��� � ��� ���-�� � ������ ����
�������� ��� ������� - ������� �� �������. � ������������� ��������� ���������
�����, ��� ��� ��� ����� 8 ��� ��� ������������ �� ����� �������� ���������
�������� �� �������. �������� ����� �������� ������ �� ����. �������� ����� ����
�������� �����������. BlazeUI ��� ����� ������� �������, ��������� �� BEM �
����������, ������� �� ������� ������ � �������, � ������� � ����� ������ ��
�������� ��� ���������, ��� � ������� tailwindCSS, ������� � ������ �������� �����
��� ��� ������ � ������ ��������. �� �������� ���� css �� ������������, ������ ��
��� ������������, ������� ��� ������� ����� ��������� apply, ������ ���������� ��
������ ��������� ��������� ���������, ������ ������� ��� ��������� ������� �
������. ������ ���������� - �� tailwind �������� �������� ���� ��������� ��
������������ - ���� ���� �����. �� ��������� ������ ������������ ��� ����� ������
�� ������ �������. ����������� � ���� - ����� ������. �������� �� ����� postCSS.
6) PHP - ��� �� �����. ���� ���� ����� �������� backend ��� ����� �� ����� - ��
���� ����� ������ - ��������� ����� ��������� � ������� ��� ������ �������
������������. ���� ���� ������� ������� (�������, ��������-����� ��� ������
����������������� ����) - MODX Revolution ������ ������. ����� ���� ��� ����� CMS
������ �������� ����� ����������������� ������ ������� �����. MODX �������� ���
������ ������� �� php ���������������� ���� ������� backend ��������. �� ��������
�� ��������. ��� php ������, ������� �������� � ���� ������� �� �������������������
����������, ������� �������� ������ � ���� ������.
7) �������! git - ������������ �������� ������ ������� ��� ����� ������� �����. �
��� ������� �� ������� ���� �����-�� ����� �������� ����� ����. ������� ���� ����
����� �����. pull / merge - ������ ������ ���� � ����� �� ���������� ��� ������
��������� ����. branch - �������� �������� ����� ����. commit - �����������
��������� � ����, push - �������� ���� � �����������. git ����� �����, � ���
����������� ������ - � ����� ������� ������ ���� ���� ��� ����� ����� ������
�������������������� ��� ��� ��� ��� �� ������� �����

������� ���� ��� ��� ������ �� ������ ����� ������)

=========================

��� ������������� � ���� �����, ��� ����� ���� ����� ������ ������ ������, ��������
����� �����, ��������, ������������� ���-�� ���� "agragregra/optimizedhtml-start-
template", �� �������������� ��� ���.
��� �� ��� ����� ������ ��������� � ���?

=============================================================

��, ��� �� ��������� ����. � �� ��� ��� ���������� ������������ ��� ��� � ������� �
���� �����������. ���� yeogurt � ��� ���� ��������� ��� ������ �� ����. � ���������
������ � ������������ � ���������, ������� ��������� ������������ �������� ������
(import '/common/**/*.scss' ������ ���������� �������) ���������� postCSS �����
�����, ������� browserify �� webpack � ����� ��� �� �� ��� ���� ����������� ��
��������� ������

��� �� � ����� �� ������� ������� ��������������, ����� ���������� vue-cli �


create-react-app. � ��� ���� �� ������ �������� ���� ����������� ��� ���
����������� �����������. � ��� ��� �� �������� ���� �����. ��� ����� �����

Вам также может понравиться