前端工程师养成记:开发环境搭建(Sublime Text必备插件推荐)

为了让自己更像一个前端工程师,决定从开发环境开始武装自己。本文将介绍前段工程师开发的一些利器的安装步骤,主要包括了:

1.Node.js的安装

2.Grunt的安装及常用插件

3.Sublime Text的安装及必备插件


一.Node.js的安装

Node.js就是一堆前端工程师捧红的,所以装上这个嘛,主要不是自己需要使用Node.js而是一堆工具对他的依赖。

Windows下安装步骤很简单:

1.去到http://nodejs.org/下载最新的安装包,安装。

2.在CMD下运行,node和npm看看能否运行成功,如果不行就检查下PATH的设置。

3.有个非常好用的东西值得全局安装anywhere,可以在任何目录启动一个web服务,手机调试页面必备。

二.Grunt的安装

Grunt是目前用的比较多的构建工具,写Java的都知道Maven,这玩意儿就是Javascript界的Maven。里面有各种插件非常实用。

1.在CMD下运行:npm install -g grunt-cli

2.试下能不能在CMD下运行:grunt,可能会报错,没关系因为没有配置文件。

正常的一个项目构建的流程通常是先在代码根目录下面,创建了package.json和Gruntfile.js,之后先运行npm install然后再运行grunt就可以完成项目的构建了。


下面介绍一些前端常用的Grunt插件:

grunt-cli 这个就是命令行

grunt-contrib-clean 这个用于build前的清理工作

grunt-contrib-concat 这个用于拼接文件

grunt-contrib-copy 这个用于拷贝文件

grunt-contrib-cssmin 这个用于压缩css

grunt-contrib-uglify 这个用于压缩js

grunt-contrib-htmlmin 这个用于压缩html

可以看下我的开源项目Tiny-Alert基本上展示了一个最简单的配置。https://coding.net/u/shootyou/p/Tiny-Alert/git


三.Sublime Text的安装及必备插件

没用Sublime之前以为这黑不拉几的玩意儿有啥好玩的,自己用了才知道,这玩意儿真不是用来装逼的,用熟了至少提高前端工程师一倍的效率,敲代码那叫一个快。


1.安装Sublime Text 3: http://www.sublimetext.com/3

2.破解什么的自行补脑

3.安装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())

打开sublime text 3,按ctrl+`或者菜单View > Show Console打开命令窗口,粘贴以上代码并回车即可。

然后就开始幸福生活了,Ctrl+Shift+P唤起,这个玩意儿是万能的,你想要啥都在这输入下就行了。输入:Install,选择Install Package,然后输入下面插件的名字搜索就行了。


必备插件:

AutoFileName:自动补全文件名

Emmet:神器啊,花10分钟学学语法,让你提升10倍编码速度:http://blog.wpjam.com/m/emmet-grammar/

Go-To-Css-Declaration:跳转到css的定义处

JsFormat:格式化js代码

Tag:貌似是可以补全和格式化html标签

Themr:主题选择

Autoprefixer:自动添加浏览器兼容前缀

CodeFormatter:代码格式化

ConvertToUTF8:解决中文编码问题

SublimeLinter:代码提示高亮

Terminal:唤起终端控制台


你可能感兴趣的:(前端攻城师)