前端构建工具-gulp – 馒头君的博客

以下为windows 环境下前端构建工具-gulp的环境搭建和使用，linux环境大同小异

第一步：安装Node

首先，最基本也最重要的是搭建node环境。访问http://nodejs.org 然后点击大大的绿色的install按钮，下载完成后直接运行程序，就一切准备就绪。npm会随着安装包一起安装，稍后会用到它。

由于node官网需要翻墙，连接不稳定，部分同事可能无法下载，现提供windows 64位4.2.6的安装包node-v4.2.6-x64.msi

为了确保Node已经正确安装，我们执行几个简单的命令。

node -v

回车（Enter），如果正确安装的话，你会看到所安装的Node的版本号，接下来看看npm。

npm -v

这同样能得到npm的版本号。

如果这两行命令没有得到返回，可能node就没有安装正确，尝试重启下命令行工具，如果还不行的话，只能回到第一步进行重装。

第二步：安装ruby，配置compass编译环境

由于我们网站的css采用的动态样式语言sass编写，gulp中会配置将sass编译成css的任务,而sass是用ruby语言编写，所以需要安装配置ruby环境

（1） ruby安装包，或者去ruby官网下载最新安装包http://rubyinstaller.org/

注：在安装过程中注意勾选此选项，将ruby添加到环境变量中

操作完成后，同样在命令行中ruby -v 和 gem -v 查看版本号确保ruby和gem被正确安装了

centos安装：

yum install ruby

yum install rubygems

（2）在命令行下执行 gem install sass 和 gem install compass

注：compass是依赖于sass的，因此必须在完成sass的安装后才能安装compass

由于gem是架设在国外服务器上，同样有翻墙的问题，在执行gem install XXX的过程中可能会有执行不成功的情况，解决方法就是将gem 的源切换成国内淘宝的源

切换步骤为：

$ gem sources --add https://ruby.taobao.org/ --remove https://rubygems.org/
$ gem sources -l

*** CURRENT SOURCES ***
https://ruby.taobao.org
# 请确保只有 ruby.taobao.org

到此ruby的配置就算完成，接着进行下一步

在命令行下执行

npm install -g gulp

安装完成后，同样执行gulp -v命令查看gulp版本号确保gulp被正确安装

注：使用npm安装包也是需要翻墙，连接不稳定，如果失败了可用以下解决方法：

npm config set registry https://registry.npm.taobao.org

npm info underscore （如果上面配置正确这个命令会有字符串response）

第4步：安装gulp任务依赖 node_modules

cd定位到项目目录 /Applications/XAMPP/htdocs/static/my-project (目前是static/jpwebapp_v1 和static/pad_v1两个项目目录下)

(即 gulpfile.js和package.json所在的目录，相关依赖声明和任务配置已包含在这两个文件中，无需关注，感兴趣的可以去gulp官网http://gulpjs.com/查看API)

执行

npm install

相关依赖就会被安装到node_modules文件夹下，注意将该文件夹添加到git忽略文件中，不要提交到仓库中

第5步：执行编译任务

在gulpfile.js 中配置了多种任务，可根据需要自由使用各种任务组合

gulp:执行js、css的编译后并持续监听css和js 源文件的变化，执行完成后不会退出（推荐使用）

gulp js:执行js的编译，执行一次后就终止

gulp css:执行css的编译，执行一次后就终止

gulp watch: 持续监听css和js 源文件的变化，执行完成后不会退出