好多年没有接触前端,发现前端行业发生了巨大的变化,很多新鲜术语,比如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. sqlplus登入和plsql登入的差别

    以下是两种登入方式的截图.用sqlplus登入须要输入主机字: 假设是用本机的SQL*Plus连接本机的数据库.则"主机字符串"能够为空. 假设是从远程连接xp的oracle数据库 ...

  2. Spring事务管理简介

    © 版权声明:本文为博主原创文章,转载请注明出处 1.什么是事务 - 事务是指逻辑上的一组操作,这组操作要么全部成功,要么全部失败 2.事务特性(ACID) - 1.原子性(Atomicity):指事 ...

  3. CSS3:选择器

    CSS选择器的作用是找出某类元素,以便我们使用style元素或者外部样式表对这类元素设置样式. 基本选择器 选择器 含义 演示样例 描写叙述 * 选择全部元素 * { border: thin bla ...

  4. vivado2013.4和modelsim联合仿真

    vivado2013.4和modelsim联合仿真                           Hello,Panda        最近在做Zynq的项目,曾经尝试使用ISE+PlanAhe ...

  5. Memcahed服务异常监控脚本

    #!/bin/sh # filename: mon_mc.sh export MemcahedIp=$1export MemcahedPort=$2export NcCmd="nc $Mem ...

  6. SPI协议介绍

    一.概述 SPI, Serial Perripheral Interface, 串行外围设备接口, 是 Motorola 公司推出的一种同步串行接口技术. SPI 总线在物理上是通过接在外围设备微控制 ...

  7. Trie树学习

    这几天在看Hadoop的排序,用到了有TotalSortPartition,其中用到了一种叫做trie树的数据结构,每次看到这种自己之前没有听过的数据结构就想去看一下原理,然后再网上看几篇博客,有时间 ...

  8. rsync 删除大量小文件

    3 find with delete 复制代码代码如下:  test  time find ./ -type f -delete        find ./ -type f -delete  0.4 ...

  9. html5+css3实现手机下拉和下拉刷新

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  10. 从零开始写一个Exporter

    前言 上一篇文章中已经给大家整体的介绍了开源监控系统Prometheus,其中Exporter作为整个系统的Agent端,通过HTTP接口暴露需要监控的数据.那么如何将用户指标通过Exporter的形 ...