好多年没有接触前端,发现前端行业发生了巨大的变化,很多新鲜术语,比如node、git、grunt、less、sass、预编译、自动化、模块化等等,看得让人晕头转向,不要担心,我会把这之前之后学习成果都记录下来,方便想要入门的同学交流学习!本人水平有限,错误在所难免,希望各位看客指正。

如题,接下就是6个准备步骤,走完这6个步骤,你会不会手痒呢。。。反正我很兴奋,前端工程化了!

1、安装ruby

为什么要安装Ruby:mac的包管理工具homebrew、前端自动化工具yeoman依赖与ruby;

怎么安装:mac系统一般自带,如果没有ruby,具体操作详见——http://www.cnblogs.com/daguo/p/4097263.html

2、安装git

为什么安装git:方便本地与远程服务器之间的交互;

怎么配置git:详见——http://www.cnblogs.com/ccdev/archive/2012/09/12/2682098.html

关键是ssh-key的配置,建立本地与远程之间的联系,详见——http://blog.csdn.net/tsangyang/article/details/8654408

3、配置nodejs

直接去官网——https://nodejs.org/en/ 下载一个安装就可以了,自带安装npm;

4、配置前端自动化工具yeoman、bower、grunt

具体配置详见——http://www.tuicool.com/articles/3EnMnq

5、配置本地服务

配置本地服务器,详细配置见——https://github.com/enson/enson.github.com/issues/1

主要是配置:/etc/apache2/httpd.conf、extra/httpd-vhosts.conf (指定本地站点位置)、hosts(指定本地可访问的域名)这三个文件;

6、开始项目实践

1)项目一般托管在coding或是github上,先登录;选择要clone的项目,通过ssh-key复制项目的地址;

打开terminal,输入git clone “xxx地址”,把线上项目下载到本地,路径要与先前设置好的本地服务器站点位置相一致;

2)通过前端自动化工具新建自己的项目;

通过上述步骤,我们就踏上了高大上的前端之路啦!

mac下搭建前端自动化工程的更多相关文章

  1. Mac下搭建hexo

    Mac下搭建hexo 并部署到gitcafe 1.安装brewhome ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homeb ...

  2. MAC下搭建及使用XAMPP的详细教程

    Windows和Linux都可以搭建本地伺服器(LAMP和IIS),Mac當然也可以,下面教你怎麼使用XAMPP在Mac下搭建一個功能齊全的本地伺服器 所需條件 1.Mac系統(廢話) 2.最好有可用 ...

  3. Mac下搭建php开发环境教程

    方案一:原生安装 这篇文章主要介绍了Mac下搭建php开发环境教程,Mac OS X 内置了Apache 和 PHP,这样使用起来非常方便.本文以Mac OS X 10.6.3为例,需要的朋友可以参考 ...

  4. mac 下搭建 Android 开发环境

    因工作需要,要在mac 下搭建 Android 开发环境.谷歌.度娘了好久,没有找个一个完整又系统的方法,很是苦恼.最终,皇天不负有心人,找到了下面这篇文档,结合亲身体验,特此记录.也为有这方面需求的 ...

  5. mac下搭建cordova开发环境

    Apache Cordova 原名叫PhoneGap.是一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台.PhoneGap最初由Nitobi开发,2011年 ...

  6. Mac下搭建lamp

    Mac下搭建lamp Mac 自带了Apache,并默认支持PHP环境,只需要配置Apache和PHP即可使用.需要单独安装mysql服务端. Apache 基础配置 Apache支持PHP配置 Ap ...

  7. Mac 下搭建 Apache 服务器

    Apache作为最流行的Web服务器端软件之一,它的优点与地位不言而喻.下面介绍下在Mac下搭建Apache服务器的步骤: (1)“前往” –>”个人” (2)在你的个人目录下新建一个文件夹,改 ...

  8. 在mac下搭建java开发环境

    刚刚从windows系统转到使用mac系统.感觉不是特别熟悉,须要一定的适应时间. 以下简介一下mac下搭建主要的java开发环境. 1.安装jdk 安装jdk1.7后,发现不须要进行环境变量配置,直 ...

  9. 在mac下搭建Apacheserver

    Apache作为最流行的Webserver端软件之中的一个.它的长处与地位不言而喻.以下介绍下在mac下搭建Apacheserver的步骤: (1)"前往" –>" ...

随机推荐

  1. layer 不居中的坑爹问题

    使用了该代码弹出一个图片.但居然不居中 var layer_index = layer.open({ type: 1, title: false, closeBtn: 0, area: '516px' ...

  2. 专用于高并发的map类-----Map的并发处理(ConcurrentHashMap)

    oncurrentModificationException 在这种迭代方式中,当iterator被创建后集合再发生改变就不再是抛出ConcurrentModificationException, 取 ...

  3. 前台freemark获取后台的值

    1.后台代码: ModelAndView mv = new ModelAndView("log/logList.ftl"); String info="abc" ...

  4. ssh不检查server变化

    嵌入式linux开发时经常需要远程登录到板上,但由于开发过程还经常会重新下载内核和文件系统,导致登录时总提示host变了,blablabla,解决方案是在.ssh/config对应的Host项下面加上 ...

  5. Mybatis-There is no getter for property named 'id' in 'class java.lang.String'

    <mapper namespace="cn.telchina.standard.mapper.SysOrgnMapper"> <!-- <![CDATA[s ...

  6. 一个简单的数据增量更新策略(Android / MongoDB / Django)

    我在做个人APP - CayKANJI - 的时候遇到一个问题: 如何增量式地把日语汉字数据地从server更新到APP端,即每次用户运行更新操作时,仅仅获取版本号高于本地缓存的内容. 数据格式 为了 ...

  7. 【Mysql】Navicat For Mysql快捷键

    ctrl+q 打开查询窗口ctrl+/ 注释sql语句ctrl+shift +/ 解除注释ctrl+r 运行查询窗口的sql语句ctrl+shift+r 只运行选中的sql语句F6 打开一个mysql ...

  8. 零基础学python-2.7 列表与元组

    事实上,能够把列表和元组看成普通的数组.可是这个数组能够存储不同的数据类型(对象) 列表和元组的差别   列表 元组 使用的符号 [] () 元素数量 可变 不可变 改动元素 不能够 能够 假设大家有 ...

  9. Mina代码跟踪(1)

    1  NioSocketAcceptor类关系图 1.1 NioSocketAcceptor acceptor = new NioSocketAcceptor(5); NioSocketAccepto ...

  10. Win7下IIS的安装与配置

    win7下IIS的安装和配置 图文教程,需要的朋友可以参考下 一.首先是安装IIS.打开控制面板,找到“程序与功能”,点进去 二.点击左侧“打开或关闭Windows功能” 三.找到“Internet ...