Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Terminal
Webdesign

Командная Строка для Веб-дизайнера: Основы

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called The Command Line for Web Design.
The Command Line for Web Design: Introduction
How to Install NPM and Bower

Russian (Pусский) translation by Anton Lisovsky (you can also view the original English article)

Для того, чтобы начать использовать все замечательные инструменты командной строки, вам нужно всего несколько вещей. Большинство стандартных введений о командной строке, сфокусированы на создании папок, перемещении файлов, навигации по системе и так далее. Я заметила, что работая над веб-дизайн проектами я редко использую подобные типы команд.

Когда я начала изучение командной строки, я также наткнулась на огромное количество туториалов, которые просят вас “Напишите бла-бла-бла в вашем терминале” или “Запустите команду бла-бла-бла.” Чаще всего, человек не знакомый с командной строкой скажет, “Подождите секунду, что такое терминал, где его найти, как его открыть и использовать?”

В этом туториале мы сделаем так, чтобы у вас не возникало подобных проблем. Мы начнём с самый азов. Вы научитесь всему необходимому для работы с терминалом или командной строкой, включая то, как его открыть, как запустить команды, как повторять команды, как добраться до папки с вашим проектом, для запуска команд, и как справляться с большинством сообщений об ошибках, когда вы их увидите.

Серия этих статей предоставит подробные инструкции для Mac и Windows, приношу свои извинения ребятам, использующим Linux. Однако я предполагаю, те кто пользуется Linux уже хорошо знакомы с командной строкой. Также являясь “‘nix системой” большинство команд будут идентичны для Linux, так что вы можете повторять их и продолжить чтение данных статей.

Пара Слов о Приложениях с Графическим Интерфейсом (GUI)

Я знаю что вы думаете, и да, вы можете использовать GUI приложения для большинства из этих процессов; часто я сама это делаю. Тем не менее, если вы захотите сделать что-то, что вам нельзя сделать используя GUI, тут то у вас и начнутся проблемы.

Знакомство с серией данных статей предоставит вам всю необходимую информацию о том, как создавать и взаимодействовать с вашим проектом с помощью командной строки.

Что Такое Командная Строка?

Говоря простыми словами, командная строка позволяет вам выполнять задачи без использования графического интерфейса, тем самым у вас будет больше контроля над теми или иными процессам и вы будете лучше понимать, как они в действительности работают.

Чтобы дать вам некое представление, как только появились первые компьютеры, взаимодействовать с ними можно было лишь через интерфейс командной строки (command line interfaces CLI). В конце концов появились, хорошо нам знакомые, графические интерфейсы (GUI), с которыми мы привыкли работать, нажимая на элементы интерфейса мышкой.

Мир веб-дизайна эволюционировал в другом направлении. Для начала, практически все инструменты веб-дизайнера обладают графическим интерфейсом. Только, относительно недавно, стали появляться инструменты командной строки для решения задач веб-дизайна и изучение их действительно того стоит.

Перед тем, как мы начнём, вам нужно понять, что для использования командной строки, нам нужна специальная программа куда мы будем вводить команды.

Есть несколько возможных опций, программ, которые вы можете использовать для этого, однако для целей данных туториалов мы будем использовать программу, которая идёт по умолчанию с Mac и Windows операционными системами. На Mac программа для работы с командной строкой называется “Терминал (Terminal)” на Windows “Командная Строка Command Prompt”.

Как Открыть Терминал / Командную Строку

Вообще-то найти и запустить терминал / командную строку не так просто, если до этого вы никогда их не использовали. Вот как сделать это на Mac и Windows.

На Mac

На Mac'е, самый простой способ открыть терминал, перейти в панель запуска (Lunchpad) и найти там Terminal.

Терминал на Mac выглядит следующим образом:

Как только вы запустите терминал, добавьте его в нижнюю панель для быстрого запуска.  Поверьте мне, он вам там понадобиться.

На Windows

На Windows интерпретатор командной строки работает через Командную Строку (Command Prompt).

На Windows 8: из меню запуска перейдите в приложения (Apps), затем под Системой (Windows System) выберите Командную Строку (Command Prompt).

В качестве альтернативы нажмите одновременно кнопки Windows и R, для открытия окна запуска. В поле с названием Открыть напишите cmd, нажмите OK для запуска командной строки.

Командная Строка на Windows выглядит следующим образом:

Обратите Внимание: В дальнейшем вместо того, чтобы говорить “терминал / командная строка”, я буду просто использовать слово терминал, конечно если речь не будет идти об инструкциях специфичных для Windows.

Запуск и Повторение Команд

Для запуска команды, дождитесь когда вы увидите приглашение командной строки. На Mac приглашение командной строки заканчивается знаком $, на Windows заканчивается знаком >:

Приглашение Командной Строки в Mac Терминале
Приглашение Командной Строки на Windows

Когда вы увидите приглашение командной строки, вы можете написать команду и запустить её нажав enter:

Одна полезная вещь, которую стоит знать, если вы захотите повторить команду, которую вводили ранее, воспользуйтесь кнопкой вверх (стрелка вверх) и/или кнопкой вниз (стрелка вниз), тем самым вы сможете перемещаться по списку команд, использованных вами ранее.

Тут вы найдёте список часто используемых команд, которые скорее всего вы захотите запустить больше чем один раз, гораздо быстрее будет просто перемещаться стрелками по списку и нажать enter, когда найдёте нужную команду.

Открываем Терминал в Определённой Папке

Для большинства веб-дизайн задач, использующих командную строку, вам нужно будет открыть терминал в папке с вашим проектом.

Терминал показывает имя папки, в которой вы находитесь:

Перемещаться по директориям вашего компьютера можно, посредством команды cd, “change directory”. Но скорее всего вы считаете, что гораздо проще нажать правой кнопкой мыши на папку с вашим проектом и открыть терминал в данной директории, директории вашего проекта.

Лично я всегда так делаю, даже когда использование “cd” будет гораздо быстрее, так как мозг дизайнера привык работать таким образом. Вот как это можно сделать на каждой из операционных систем.

На Mac

Я использую приложение под названием XtraFinder (бесплатное, и обладает набором действительно полезных возможностей), которое позволяет добавить опцию открыть новый терминал здесь (New Terminal Here) в контекстном меню вашего поисковика.

На Windows

Зажмите Shift и нажмите правую кнопку мыши в папке с вашим проектом. В контекстном меню вы должны увидеть опцию - открыть командную строку здесь (Open command window here).

На Windows я всегда открываю командную строку таким способом, так как мне кажется это более быстрым.

EACCES У Вас Нет Прав? Sudo.

На Mac вы часто можете столкнуться с ошибками, в которых будет сообщение так или иначе связанное с EACCESS.

Также при возникновении этой ошибки вы можете увидеть следующие слова “Пожалуйста запустите эту команду с правами root/Administrator (Please try running this command again as root/Administrator).”

Если вы столкнулись с такой проблемой, это значит, что вы пытаетесь запустить команду, для которой у вас нет подходящих прав доступа. Система тем самым делает невозможным вызов команд способных оказать значительные изменение на вашем компьютере, без авторизации.

Самый простой способ авторизироваться в данном случает - добавить sudo перед вашей командой, sudo сокращение от “substitute user do”.

Затем вам нужно будет ввести свой пароль, прежде чем продолжать.

Когда вы добавляете sudo к вашей команде, вы действуете от имени “суперпользователя (super user)”, а не как обычный пользователь. С этими правами доступа ваша команда запустится и будет работать как надо.

Альтернативы sudo

Также существуют и другие способы помимо sudo для запуска команды требующей привилегий супер пользователя, можно изменить настройки прав доступа на вашем компьютере. Однако я не буду объяснять это в данном туториале, так как это за границей базовых вещей, которые мы обсуждаем.

Вам вполне будет достаточно sudo для выполнения инструкций из данной серии статей. Когда вы будете себя чувствовать комфортно при работе с командной строкой, вы можете заняться поисками других опций.

Вот ссылка, как исправить проблему прав доступа для npm, данная тема будет актуальна в последующих туториалах.

Как sudo Будет Обозначаться в Серии Данных Статей

Каждый раз, когда нужно будет использовать sudo для вызова команды, я буду писать команду следующим образом:

Это не значит что вы буквально должны писать [sudo] с квадратными скобками, но возможно вам потребуется указать sudo перед командой.

или

Если вы не уверены, всегда можно запустить команду без sudo, затем попробовать снова, но уже с sudo, в том случае если вы увидите ошибки EACCES.

В Следующем Туториале

В следующем туториале мы разберём техники, которые вы можете добавить к вашему процессу разработки, там будет полезная информация о использовании сторонних библиотек.

Вы научитесь, как начать работать с популярными системами для управления библиотеками, как использовать их для поиска, установки и обновления библиотек в ваших проектах.

Увидимся в следующем туториале!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.