Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Command line for the beginner - Using the command line in developing for the web

623 views

Published on

This session will introduce the incredible potential of using the command line in developing for the web.

Interested WordPress designers and developers will gain the knowledge of using SSH to connect to servers, Git for version control, WP-CLI for interfacing with WordPress, Aliases and Bash scripts for common tasks, and automation/task runners like Grunt and Gulp.

Attendees will come away from the session with their interest piqued, with the desire to learn more about using the command line in their workflow.

Published in: Internet

Command line for the beginner - Using the command line in developing for the web

  1. 1. COMMAND LINE FOR THE BEGINNER USING THE COMMAND LINE IN DEVELOPING FOR THE WEB Created by Jim Birch jimbir.ch/cmd @thejimbirch Xeno Media, Inc.
  2. 2. DEVELOPERS BE ALL LIKE... Source
  3. 3. WHAT IS THE COMMAND LINE? A command-line interface ... is a means of interacting with a computer program where the user (or client) issues commands to the program in the form of successive lines of text (command lines). - Wikipedia
  4. 4. OFTEN REFERRED TO AS CLI C - Command L - Line I - Interface
  5. 5. WHERE IS THIS COMMAND LINE? Linux - Built in Mac - Terminal built in or additional apps like available. Windows - , or the brand new iTerm Cygwin Bash on Ubuntu on Windows Chromebook - Apps that provide limited functionality
  6. 6. WHAT DOES THE TERMINAL LOOK LIKE?
  7. 7. CUSTOMIZE MOST TERMINAL APPS
  8. 8. THE COMMANDS
  9. 9. ANATOMY OF A COMMAND $ command -flag argument/operand command - The action we want to happen flag (optional) - Options for the command operand (optional) - What is acted upon Most of the time you find commands written, they will be prefaced with a $
  10. 10. COMMON COMMANDS cd - Change Directory $ cd /path/to/folder $ cd ../../../to move up the tree. cp - Copy $ cp wp-config-sample.php wp-config.php grep - globally search a regular expression and print $ grep term filetosearchin.txt ls - List $ ls -la(l = long format, a = all files, even hidden) mkdir - Make Directory $ mkdir directoryname
  11. 11. COMMON COMMANDS mv - Move $ mv wp-config.php ../ pwd - Print Working Directory $ pwd rm - Remove $ rm -rf whatyouwantremoved (r = recursive, f = force) sudo - Superuser Do $ sudo anycommand (Use sudo if you need administrative access to run the command.) touch - Touch $ touch newfilename.txt
  12. 12. COMMON COMMANDS If you enter a screen that has a page of information, like a help screen: Use your arrow keys to navigate up and down. Type qto exit.
  13. 13. FLAGS For most cases I have found, flags that are full words use two dashes, flags that are acronyms use one dash. --all -a
  14. 14. ESCAPING If you ever need to cancel a command: Hold the Control key and C
  15. 15. ARCHIVING AND UNARCHIVING Archive and compress; extract files and folders quickly and easily right from the command line.
  16. 16. ZIP AND UNZIP To compress a folder using zip: zip -r zip-file-name.zip path/to/folder zip -r zip-file-name.zip file1 file2 file3 To extract: unzip zip-file-name.zip
  17. 17. TAR AND UNTAR To compress a folder using tar: tar -zcvf tar-file-name.tar.gz path/to/folder To extract: tar -zxvf tar-file-name.tar.gz
  18. 18. NANO AND VI EDITORS nano and vi are text editors available in terminal so you can edit files without needing any other programs.
  19. 19. NANO nano file.txt to open a file Control + (letter) for commands Control + G for help
  20. 20. VI (OR VIM - "VI IMPROVED") vi file.txt to open a file :help for commands :i to insert :w to save :q to exit
  21. 21. YOU HAVE SURVIVED THE BEGINNER LEVEL! Source SKIP TO END
  22. 22. CONNECTING TO SERVERS BY SSH Connect to other servers, like your staging and production environments and run commands as you would on your local command line.
  23. 23. CREATING SSH KEYS Check for existing keys $ ls -al ~/.ssh Create a new key ssh-keygen -t rsa -C "yourname@domain.com" -t = Key Type, -C = Comment Enter file in which to save the key (/Users/Jim/.ssh/id_rsa): /Users/Jim/.ssh/clientname
  24. 24. PUTTING YOUR KEY ON THE SERVER UI Interfaces like CPanel and Plesk Apache - Add your key to /%USER%/.etc/authorized_keys nginx - Install openssh and add your key to /%USER%/.ssh/authorized_keys
  25. 25. CONNECTING TO SERVER ssh username@domain.name Enter your password SET UP AN SSH ALIAS nano ~/.ssh/config Host hostname User usernameatserver HostName (IP Address or domain.name) Port 22 IdentityFile ~/.ssh/id_rsa Then, connect with ssh hostname
  26. 26. TO DISCONNECT FROM A SERVER: Type exit
  27. 27. MYSQL Manage MySQL databases from the command line, including importing and exporting.
  28. 28. CONNECTING TO MYSQL mysql -u username -p You will be prompted for password. * Note: You want to avoid using the password inline, as it would be available in logs
  29. 29. IMPORTING A DATABASE mysql -u username -p < database.sql
  30. 30. EXPORTING A DATABASE mysqldump -u username -p > database.sql
  31. 31. ONCE YOU HAVE CONNECTED TO MYSQL, YOU CAN RUN ANY SQL COMMAND CREATE TABLE newtablename (id INT NOT NULL PRIMARY KEY AUTO_INCREMENT, name_of_table VARCHAR(30), sub_title VARCHAR(20), yes_or_no CHAR(1), date_of_thing DATE);
  32. 32. WP-CLI WP-CLI is a set of command-line tools for managing WordPress installations. You can update plugins, set up multisite installs and much more, without using a web browser. - wp-cli.org
  33. 33. COMMON WP-CLI COMMANDS http://wp-cli.org/commands/ wp media regenerate Regenerates all thumbnails wp post list List all the posts of a site wp user delete 123 --reassign=567 Delete a user, and assign their posts to another. wp plugin install hello-dolly Installs Hello Dolly Plugin
  34. 34. COMMON WP-CLI COMMANDS wp help Lists all commands and help wp core update Updates Wordpress core wp theme list Lists all themes in the site wp package http://wp-cli.org/commands/package/
  35. 35. DRUSH Drush is a command line shell and Unix scripting interface for Drupal. - drush.org
  36. 36. ALIASES In computing, alias is a command in various command line interpreters (shells) ... which enables a replacement of a word by another string. - Wikipedia
  37. 37. ANATOMY OF AN ALIAS name="command" name - The name of the alias command - The action we want to happen
  38. 38. WHERE TO PUT ALIASES MAC OS Temporary - alias name="command" Permanent - nano ~/.bash_profile
  39. 39. WHERE TO PUT ALIASES UBUNTU Temporary - alias name="command" Permanent - nano ~/.bash_aliases
  40. 40. WHERE TO PUT ALIASES WINDOWS Temporary - DOSKEY name="command" Permanent - A lot more complicated!
  41. 41. COMMON USE CASES FOR ALIASES Navigate to common folders alias htdocs="cd /var/www/public_html" alias backdropcms="cd /Users/Jim/jim.local/backdropcms.org" Run Common Tasks alias restart='sudo apachectl restart'
  42. 42. COMMON USE CASES FOR ALIASES Open Common Files alias bashprofile='sudo nano /Users/Jim/.bash_profile' alias sshconfig='nano ~/.ssh/config' Open Applications alias github='open -a Firefox https://github.com/thejimbirch? tab=repositories'
  43. 43. COMMON USE CASES FOR ALIASES Complex Example Accepts a url, opens chrome in 5 different sized browsers 1 2 3 4 5 6 7 8 9 10 hosted with ❤ by # My Chrome developer profile is in the `Profile 1` directory, make sure to update with yours. # Best on an ultra wide monitor. function rwdurl() { open -n -g -a "Google Chrome" --args --new-window --profile-directory=Profile 1 --app="data:text/html,<html><body><script>win open -n -g -a "Google Chrome" --args --new-window --profile-directory=Profile 1 --app="data:text/html,<html><body><script>win open -n -g -a "Google Chrome" --args --new-window --profile-directory=Profile 1 --app="data:text/html,<html><body><script>win open -n -g -a "Google Chrome" --args --new-window --profile-directory=Profile 1 --app="data:text/html,<html><body><script>win open -n -g -a "Google Chrome" --args --new-window --profile-directory=Profile 1 --app="data:text/html,<html><body><script>win } view rawrwdurl GitHub
  44. 44. SEE ALSO ln -s /path/to/file /path/to/symlink Example: htdocs > /var/www/public_html Symbolic link (Symlinks)
  45. 45. SEE ALSO Bash Scripts 1 2 3 4 5 6 7 8 hosted with ❤ by fullpath=`pwd` if [[ $fullpath =~ /Users/Jim/Sites/.* ]]; then IFS='/' array=($fullpath) open "http://${array[4]}.xenostaging.com" else echo You are not in a webroot. fi view rawssite bash script GitHub
  46. 46. SEE ALSO BASH-IT Bash-it is a collection of community Bash commands and scripts. (And a shameless ripoff of oh-my-zsh :smiley:) Includes autocompletion, themes, aliases, custom functions, a few stolen pieces from Steve Losh, and more. https://github.com/Bash-it/bash-it
  47. 47. SECURE COPY PROTOCOL (SCP) Secure copy or SCP is a means of securely transferring computer files between a local host and a remote host or between two remote hosts. It is based on the Secure Shell (SSH) protocol. - Wikipedia
  48. 48. COPY FILE FROM LOCAL TO SERVER scp example.txt username@server:myfile.txt COPY ALL FILES IN REMOTE SITE TO LOCAL (FOLDER YOU ARE IN) scp serveralias:/var/www/public_html/wp-uploads/* . COPY FILES FROM ONE SERVER TO ANOTHER scp serveralias:/var/www/public_html/wp- content/files/file1.zip secondserveralias:/var/www/public_html/wp- content/files/file1.zip
  49. 49. YOU HAVE SURPASSED THE INTERMEDIATE LEVEL WITH EASE! Source SKIP TO END
  50. 50. GIT FOR VERSION CONTROL Git is a widely used source code management system for so ware development. It is a distributed revision control system with an emphasis on speed, data integrity, and support for distributed, non- linear workflows. - Wikipedia
  51. 51. GIT IN PLAIN ENGLISH Git gives us a canonical/main source of the code of the project. Multiple versions can be checked out, and merged back in. History of commits/different versions can be saved. Easily sync multiple servers, Development, Staging, Productions.
  52. 52. REALLY GREAT GIT TUTORIAL https://git-scm.com/docs/gittutorial
  53. 53. COMMON GIT COMMANDS git clone repo.url Clones a repository to your computer git fetch Gets updated code from repository git merge origin/master Merges code from repository, master branch git pull Fetch and merge in one step! git checkout -b branchname Makes a new branch
  54. 54. COMMON GIT COMMANDS git diff filename Shows the changes you have made to the file git add -A Adds all files to "staging area" git commit Moves from "staging area" to a commit git push origin master Pushes local master branch to origin master git log Lists history of commits
  55. 55. AUTOMATION/TASK RUNNERS LIKE GRUNT AND GULP
  56. 56. FUTURE DEVELOPMENT WILL BE POWERED BY JAVASCRIPT Node.js® is a JavaScript runtime built that runs NPM (Node Package Manager), the largest ecosystem of open source libraries in the world I use Node.js® to install NPM to install Grunt which installs...
  57. 57. TOOLS FOR OUR JAVASCRIPT FILES: jshint - Detect errors and potential problems in your JavaScript code. jscs - Linter/formatter for programmatically enforcing your style guide. uglify - Minify files with UglifyJS concat - Concatenate (merge) files into one.
  58. 58. TOOLS FOR OUR CSS FILES: grunt-contrib-less, grunt-sass - Compile LESS/SASS files to CSS csslint - Checks syntax checking and applys a set of rules that look for problematic patterns or signs of inefficiency. cssmin - Minimizes CSS files csscomb - Formats and sorts style sheets to make them organized and consistent.
  59. 59. SO MANY USES: imagemin - Minify images seamlessly. copy - automate the copying of files or directories. Thousands more... [ ] [ ]Grunt Plugins Gulp Plugins
  60. 60. WATCH! Once these tasks have been assembled in a Gruntfile.js file, you can run the following command to implement these tasks on any changes: grunt watch Any JS/CSS/LESS/SASS files changed will be checked and organized! Images put in the folder I am watching will be minified. Any errors will be reported immediately!
  61. 61. DEPENDENCY/PACKAGE MANAGERS LIKE COMPOSER Composer helps you declare, manage and install dependencies of PHP projects, ensuring you have the right stack everywhere. - Composer on Github
  62. 62. AN OVERARCHING MAINTAINER OF YOUR WEBSITE AND IT'S NEEDS A composer.json file defines all of the things your website needs. These are called dependencies. This would include Wordpress itself, plugins, and themes. It could also include outside libraries like jQuery, Bootstrap, Foundation, and more.
  63. 63. AN OVERARCHING MAINTAINER OF YOUR WEBSITE AND IT'S NEEDS A composer.json file defines all of the things your website needs. These are called dependencies. This would include Wordpress/Drupal core, plugins/modules, and themes. It could also include outside libraries like jQuery, Bootstrap, Foundation, Masonry, and more.
  64. 64. REBUILD THIS PROJECT IN A MOMENT'S NOTICE If all dependencies are defined in a composer.json file, composer installcould be run to install the site anywhere. All you would need to do then is setup the database and move the files.
  65. 65. SUMMARY BEGINNER Command Line Basics Commands and Flags Archiving and Unarchiving Command Line Editors
  66. 66. SUMMARY INTERMEDIATE Connecting to Servers with SSH MySQL WP-CLI / Drush Aliases Secure Copy Protocol - SCP
  67. 67. SUMMARY ADVANCED Git for Version Control Automation/task runners like Grunt and Gulp Dependency/Package Managers like Composer
  68. 68. NOW YOU CAN BE ALL LIKE... Source
  69. 69. THE END CONTINUING THE CONVERSATION: Created by Jim Birch jimbir.ch/cmd @thejimbirch Xeno Media, Inc.

×