时间戳

首页 > 技术文章 > 配置gulp构建工具(坤爷)

配置gulp构建工具(坤爷)

best-html5-js 2015-04-19 10:53 原文

配置gulp构建工具

gulp是前端构建工具，相关项目可参考本文档配置gulp。
代码部分是需要在命令行里执行的命令，如果提示权限相关问题（多为mac os），尝试以管理员重新执行命令，即命令前加上（注意后面有空格）：sudo

1. 下载并安装nodejs(已安装过忽略本步骤)

2. 全局安装gulp(已安装过忽略本步骤)

npm install gulp -g
3. 安装node依赖

cd到项目根目录执行：

npm install
执行后将产生node_modules文件夹存放node的依赖模块
windows安装过程一开始控制台无信息输出，需要耐心等待（大概5-10分钟），最终安装成功会有信息输出。
若出现错误提示，多为网络问题，重新执行上面命令即可

4. 使用gulp协助开发

cd到项目根目录执行下面命令启动默认构建任务：

gulp
任务启动后，程序会实时监听文件改动并自动刷新浏览器，同时控制台会输出类似下面的信息：

[09:18:48] Server started http://localhost:3101
[09:18:48] LiveReload started on port 35729
此时打开浏览器，输入对应网址(本例为：http://localhost:3101 )，即可预览站点效果。

5. 使用gulp构建生产环境发布包

cd到项目根目录执行下面命令：

gulp release
执行完成后文件将输出到 /release 下，可用于发布到生产环境。

 

GULP training book

 

6.  GULP 插件

a) 图片压缩 

gulp教程之gulp-imagemin

Introduction to Gulp.js 12: Optimize CSS, JavaScript, Images and HTML

b) 压缩嵌在html里面的JS，CSS    

gulp-minify-inline

 

https://npm.taobao.org/      

 

 

快速搭建 Node.js 开发环境以及加速 npm

 

在公交车上刷微博，还是有很多同学在咨询:

 

  • 如何快速搭建 node 开发环境
  • npm 超慢
  • github 无法打开的问题

 

于是我觉得应该写一篇文章解答所有这些起步问题，让新同学也能顺顺利利入门。

 

快速搭建 Node.js 开发环境

 

如果你想长期做 node 开发, 或者想快速更新 node 版本, 或者想快速切换 node 版本, 那么在非 Windows(如 osx, linux) 环境下, 请使用 nvm 来安装你的 node 开发环境, 保持系统的干净.

 

如果你使用 Windows 做开发, 那么你可以使用 nvmw 来替代 nvm

 

osx, linux 环境

 

如果你是 windows 环境开发, 请跳过这里, 直接查看下一章.

 

git clone nvm

 

直接从 github clone nvm 到本地, 这里假设大家都使用 ~/git 目录存放 git 项目:

 

$ cd ~/git
$ git clone https://github.com/creationix/nvm.git

 

配置终端启动时自动执行 source ~/git/nvm/nvm.sh, 在 ~/.bashrc, ~/.bash_profile, ~/.profile, 或者 ~/.zshrc 文件添加以下命令:

 

source ~/git/nvm/nvm.sh

 

重新打开你的终端, 输入 nvm

 

$ nvm

Node Version Manager

Usage:
    nvm help                    Show this message
    nvm --version               Print out the latest released version of nvm
    nvm install [-s] <version>  Download and install a <version>, [-s] from source
    nvm uninstall <version>     Uninstall a version
    nvm use <version>           Modify PATH to use <version>
    nvm run <version> [<args>]  Run <version> with <args> as arguments
    nvm current                 Display currently activated version
    nvm ls                      List installed versions
    nvm ls <version>            List versions matching a given description
    nvm ls-remote               List remote versions available for install
    nvm deactivate              Undo effects of NVM on current shell
    nvm alias [<pattern>]       Show all aliases beginning with <pattern>
    nvm alias <name> <version>  Set an alias named <name> pointing to <version>
    nvm unalias <name>          Deletes the alias named <name>
    nvm copy-packages <version> Install global NPM packages contained in <version> to current version

Example:
    nvm install v0.10.24        Install a specific version number
    nvm use 0.10                Use the latest available 0.10.x release
    nvm run 0.10.24 myApp.js    Run myApp.js using node v0.10.24
    nvm alias default 0.10.24   Set default node version on a shell

Note:
    to remove, delete or uninstall nvm - just remove ~/.nvm, ~/.npm and ~/.bower folders

 

通过 nvm 安装任意版本的 node

 

nvm 默认是从 http://nodejs.org/dist/ 下载的, 国外服务器, 必然很慢, 好在 nvm 以及支持从镜像服务器下载包, 于是我们可以方便地从七牛的 node dist 镜像下载:

 

$ NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/dist nvm install 0.11.11

 

于是你就会看到一段非常快速进度条:

 

######################################################################## 100.0%
Now using node v0.11.11

 

如果你不想每次都输入环境变量 NVM_NODEJS_ORG_MIRROR, 那么我建议你加入到 .bashrc 文件中:

 

# nvm
export NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/dist
source ~/git/nvm/nvm.sh

 

然后你可以继续非常方便地安装各个版本的 node 了, 你可以查看一下你当前已经安装的版本:

 

$ nvm ls
         nvm
     v0.8.26
    v0.10.26
    v0.11.11
->  v0.11.12

 

windows 环境

 

git clone nvmw

 

直接从 github clone nvmw 到本地, 这里假设大家都使用 d:\git 目录存放 git 项目:

 

$ d:
$ cd git
$ git clone https://github.com/hakobera/nvmw.git

 

设置 d:\git\nvmw 目录到你的 PATH 环境变量中:

 

set "PATH=d:\git\nvmw;%PATH%"

 

重新打开你的终端, 输入 nvmw

 

$ nvmw

Usage:
  nvmw help                    Show this message
  nvmw install [version]       Download and install a [version]
  nvmw uninstall [version]     Uninstall a [version]
  nvmw use [version]           Modify PATH to use [version]
  nvmw ls                      List installed versions

Example:
  nvmw install v0.6.0          Install a specific version number
  nvmw use v0.6.0              Use the specific version

 

通过 nvmw 安装任意版本的 node

 

nvmw 默认是从 http://nodejs.org/dist/ 下载的, 国外服务器, 必然很慢, 好在 nvmw 以及支持从镜像服务器下载包, 于是我们可以方便地从七牛的 node dist 镜像下载:

 

$ set "NVMW_NODEJS_ORG_MIRROR=https://npm.taobao.org/dist"
$ nvmw install 0.11.11

 

于是你就会看到一段非常快速进度条:

 

######################################################################## 100.0%
Now using node v0.11.11

 

如果你不想每次都输入环境变量 NVMW_NODEJS_ORG_MIRROR, 那么我建议你在全局环境变量中增加它.

 

然后你可以继续非常方便地安装各个版本的 node 了, 你可以查看一下你当前已经安装的版本:

 

$ nvmw ls

v0.10.26
v0.11.12
Current: v0.11.12

 

到此, 无论是 windows 环境, 还是 osx, linux 环境, 都能快速安装多个版本的 node 了.

 

使用 cnpm 加速 npm

 

同理 nvm , npm 默认是从国外的源获取和下载包信息, 不慢才奇怪. 可以通过简单的 ---registry 参数, 使用国内的镜像 https://registry.npm.taobao.org :

 

$ npm --registry=https://registry.npm.taobao.org install koa

 

于是屏幕又哗啦哗啦地一大片输出:

 

$ npm --registry=https://registry.npm.taobao.org install koa
npm http GET https://registry.npm.taobao.org/koa
npm http 200 https://registry.npm.taobao.org/koa
...
npm http 200 https://registry.npm.taobao.org/negotiator
npm http 200 https://registry.npm.taobao.org/keygrip
koa[@0](/user/0).5.2 node_modules/koa
├── koa-compose[@2](/user/2).2.0
├── statuses[@1](/user/1).0.2
├── finished[@1](/user/1).1.1
├── escape-html[@1](/user/1).0.1
├── only[@0](/user/0).0.2
├── debug[@0](/user/0).8.0
├── fresh[@0](/user/0).2.2
├── type-is[@1](/user/1).0.1
├── delegates[@0](/user/0).0.3
├── mime[@1](/user/1).2.11
├── co[@3](/user/3).0.5
├── accepts[@1](/user/1).0.1 (negotiator[@0](/user/0).4.2)
└── cookies[@0](/user/0).4.0 (keygrip[@1](/user/1).0.0)

 

但是毕竟镜像跟官方的 npm 源还是会有一个同步时间差异, 目前 cnpm 的默认同步时间间隔是 15 分钟. 如果你是模块发布者, 或者你想马上同步一个模块, 那么推荐你安装 cnpm cli:

 

$ npm --registry=https://registry.npm.taobao.org install cnpm -g

 

通过 cnpm 命令行, 你可以快速同步任意模块:

 

$ cnpm sync koa connect mocha

 

呃, 我就是不想安装 cnpm cli 怎么办? 哈哈, 早就想到你会这么懒了, 于是我们还有一个 web 页面:

 

例如我想马上同步 koa, 直接打开浏览器: https://npm.taobao.org/sync/koa

 

或者你是命令行控, 通过 open 命令打开:

 

$ open https://npm.taobao.org/sync/koa

 

如果你安装的模块依赖了 C++ 模块, 需要编译, 肯定会通过 node-gyp 来编译, node-gyp 在第一次编译的时候, 需要依赖 node 源代码, 于是又会去 node dist 下载, 于是大家又会吐槽, 怎么 npm 安装这么慢…

 

好吧, 于是又要提到 --disturl 参数, 通过七牛的镜像来下载:

 

$ npm --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist install microtime

 

再次要提到 cnpm cli, 它已经默认将 --registry 和 --disturl 都配置好了, 谁用谁知道 . 写到这里, 就更快疑惑那些不想安装 cnpm cli 又吐槽 npm 慢的同学是基于什么考虑不在本地安装一个 cnpm 呢?

 

github 好慢

 

好了, 看到这里大家应该对 node 和 npm 已经没有速度慢的问题了.

 

github 慢, 或者说是它的资源 host 被堵而已, 大家可以通过简单的 hosts 映射解决:

 

185.31.16.184 github.global.ssl.fastly.net

 

 

 

推荐阅读