好多年没有接触前端,发现前端行业发生了巨大的变化,很多新鲜术语,比如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. Android网络框架Volley

    Volley是Google I/O 2013推出的网络通信库,在volley推出之前我们一般会选择比较成熟的第三方网络通信库,如: android-async-http retrofit okhttp ...

  2. Excel中判断一个表中的某一列的数据在另一列中是否存在

      A B C D 1 10   3 有 2 6   e 无 3 3   6 有 判断c列的值在A列中是否存在(假定C列为需要判断列,A列为目标列) 在D1中输入以下公式,然后下拉公式即可 =IF(C ...

  3. css 用 display: inline-block; 代替 float

    浮动可以将两个块级元素浮动在同一水平上.但float的缺点也有很多,还需要其他样式弥补. 早年我使用过 display: inline-block; 但苦于兼容性问题一直没敢全面使用. 近几年主要玩移 ...

  4. SpringCloud系列三:将微服务注册到Eureka Server上

    1. 回顾 通过上篇博客的讲解,我们知道硬编码提供者地址的方式有不少问题.要想解决这些问题,服务消费者需要一个强大的服务发现机制,服务消费者使用这种机制获取服务提供者的网络信息.不仅如此,即使服务提供 ...

  5. Struts2学习之拦截器

    © 版权声明:本文为博主原创文章,转载请注明出处 拦截器: - Struts2大多数核心功能都是通过拦截器实现的,每个拦截器完成某项功能 - 拦截器方法在Action执行之前或之后执行 工作原理: - ...

  6. leetcode第一刷_Binary Tree Zigzag Level Order Traversal

    以出现的频率来看.树的层序遍历一定是考察的重点,除非工作人员想找题水数量. zigzag,还是有几道题的,层序的这个非常easy,假设是奇数层.reverse下面就可以.无他.我写的时候预计还不知道这 ...

  7. JavaScript的split()

    JavaScript split() 方法 JavaScript String 对象 定义和用法 split() 方法用于把一个字符串分割成字符串数组. 语法 stringObject.split(s ...

  8. json字符串传值到后台出现乱码的问题的解决方法

    1.原因:前台的编码是ISO-8859-1,后台的编码是UTF-8,所以会冲突 2.解决方法:先用ISO-8859-1解码成字节数组,再转成UTF-8编码格式 String strw = new St ...

  9. Power of Cryptography - poj 2109

      Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 20351   Accepted: 10284 Description C ...

  10. java多线程实现复制大文件

    有些开发的时候我们经常遇到这样一个问题,对大文件的处理.比如:日志文件.那么十几G的大文件.我们应该如何复制呢? 还有就是希望从本地和远程复制文件,文件都很大,10G级的如何办呢? 在这里我告诉你们, ...