Notes for front-end engineers: Development Environment setup (recommended for sublime text essential plug-ins)

To make yourself more like a front-end engineer, I decided to arm myself from the development environment. This article describes the installation steps of some powerful tools developed by engineers in the previous section, including:

1. Install node. js

2. Installation of grunt and common plug-ins

3. Installation of sublime text and necessary plug-ins

1. Install node. js

Node. JS is a bunch of front-end engineers, so it is not your own need to use node. JS, but a bunch of tools that depend on it.

The installation procedure for Windows is simple:

1. Go to http://nodejs.org/to download the latest installation package and install it.

2. Run in cmd. Check whether node and NPM can run successfully. If not, check the path settings.

Ii. Installation of GRUNT

Grunt is a widely used building tool. Anyone who writes Java knows maven. This is the Maven in the Javascript field. There are various plug-ins that are very useful.

1. Run NPM install-G grunt-CLI in cmd.

2. Try running grunt in cmd. An error may be reported because there is no configuration file.

A normal process for building a project is usually to create a package under the Code root directory. JSON and gruntfile. then run NPM install and then run grunt to build the project.

The following describes some common front-end grunt plug-ins:

Grunt-cli. This is the command line.

Grunt-contrib-clean: This is used for cleaning before build

Grunt-contrib-Concat: This is used to splice files.

Grunt-contrib-copy is used to copy objects.

Grunt-contrib-cssmin, which is used to compress CSS

Grunt-contrib-uglify this is used to compress JS

Grunt-contrib-htmlmin: Used to compress html

I can see that my open-source project tiny-alert basically shows the simplest configuration. Https://coding.net/u/shootyou/p/Tiny-Alert/git

Iii. Installation of sublime text and necessary plug-ins

Before using sublime, I thought it was fun to pull a few things. I knew it only when I used it. This stuff is not really intended for force installation, if you are familiar with it, you can at least double the efficiency of front-end engineers. It is faster to crack the code.

1. Install sublime Text 3: http://www.sublimetext.com/3

2. crack or something and make up your own brains

3. install package Control

 
Import urllib. request, OS; pF = 'package control. sublime-package '; IPP = sublime. installed_packages_path (); urllib. request. install_opener (urllib. request. build_opener (urllib. request. proxyhandler (); open (OS. path. join (iPP, PF), 'wb '). write (urllib. request. urlopen ('HTTP: // sublime.wbond.net/'+ PF. replace ('', '% 20 ')). read ())
 

Open sublime Text 3, press Ctrl + ', or choose View> show console to open the command window, paste the above Code, and press Enter.

Then we started to live happily. CTRL + Shift + P aroused that this stuff is omnipotent. You just need to enter everything you want. Enter install, select install package, and enter the name of the plug-in below to search.

Required plug-ins:

Autofilename: Automatically complete the file name

Emmet: artifact ah, spend 10 minutes Learning grammar, let you increase the encoding speed by 10 times: http://blog.wpjam.com/m/emmet-grammar/

Go-to-CSS-Declaration: Jump to the CSS Definition

Jsformat: Format JS Code

Tag: It seems that HTML tags can be supplemented and formatted.

Themr: Topic Selection

Autoprefixer: automatically adds browser-compatible prefixes

Codeformatter: Code formatting

Converttoutf8: solves Chinese Encoding Problems

Sublimelinter: the code prompts highlighted

Terminal: Call the terminal Console