前端工程师标配

随着计算机新技术的高速发展,现在的前端工程师要求越来越高,作为前端开发的自己感觉现在快对不住前端工程师这个称呼了,所谓工欲善其事,必先利其器,为了让自己更像一枚前端工程师,最近决定从开发环境开始武装自己。本文将介绍前段工程师开发的一些利器的安装步骤,主要包括了:

  1. Node.js的安装
  2. Grunt的安装及常用插件
  3. Sublime Text的安装及必备插件用了6年的adobe dreamweaver现在决定将他抛弃

一、nodeJs安装

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

Windows下安装步骤很简单:

  1. 去到http://nodejs.org/下载最新的安装包,安装。
  2. 在CMD下运行,node -v和npm -v看看能否运行成功,如果正确返回版本号说明安装成功。
  3. 有个非常好用的东西值得全局安装anywhere,可以在任何目录启动一个web服务,手机调试页面必备。

二、Grunt的安装

  1. Grunt是目前用的比较多的构建工具,里面有各种插件非常实用,他能帮助我们做一些自动化的事情。
  2. 在CMD下运行:npm install -g grunt-cli 这个安装之前必须先安装好nodeJs;
  3. 试下能不能在CMD下运行:grunt,可能会报错,没关系因为没有配置文件。
  4. 正常的一个项目构建的流程通常是先在代码根目录下面,创建了package.json和Gruntfile.js,之后先运行npm install下载依赖的插件,然后再运行grunt就可以完成项目的构建了。

下面推荐一些grunt常用的一些插件

  1. grunt-contrib-watch:监听文件变化
  2. grunt-contrib-clean :build前的清理工作
  3. grunt-contrib-concat :拼接文件
  4. grunt-contrib-copy :拷贝文件
  5. grunt-contrib-cssmin :压缩css
  6. grunt-contrib-uglify :压缩js
  7. grunt-contrib-htmlmin :压缩html
  8. grunt-contrib-sass:cass编译
  9. grunt-contrib-jshint:js代码检查
  10. grunt-contrib-imagemin:图片压缩

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

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

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

破解汉化什么的可以查看http://www.xiumu.org/note/sublime-text-3.shtml,我就是用的这个靠谱

安装package control可以实现在线安装插件可以查看https://packagecontrol.io/installation网站

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

推荐一些sublime的一些常用插件

  1. AutoFileName:自动提示路径插件
  2. Emmet:提高HTML & CSS3编写速度(Zen Coding)
  3. JsFormat:js代码格式化
  4. Tag:html代码格式化
  5. sublimeCodeIntel:代码提示
  6. IMESupport:解决输入法不跟随问题

sublime的常用快捷键

  1. Ctrl+Shift+K :删除行
  2. Ctrl+Shift+↑:向上移动行
  3. Ctrl+Shift+↓:向下移动行
  4. Ctrl+/:注释
  5. Ctrl+,:选中当前标签
  6. Ctrl+Shift+P:打开命令面板

One Response to “ 前端工程师标配 ”

  1. xuanlaixuanqu.com说道:

    标配mac~imac~

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>