Gulp项目工程构建说明

发表于 更新于

前言

记录前端开发步骤，此文档为同事所写。

概况

目的
  1. 方便开发人员快速的搭建前端开发环境；
  2. 对nodejs、gulp有一个初步的认识；
  3. 了解服务器端nodejs、gulp的安装；
  4. 了解服务器端Jenkins工程发布。
Nodejs简介

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。Node.js 的包管理器 npm（node package manager），是全球最大的开源库生态系统。
详情请见nodejs中文网

Gulp简介
  1. 易于使用
    通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。
  2. 构建快速
    利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。
  3. 插件高质
    Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。
  4. 易于学习
    通过最少的 API，掌握 Gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。
    详情请见gulp中文网

开发环境配置

Nodejs安装

首先到官网下载对应的版本，window_64下载
安装比较简单，一直点下一步就行。
安装完成后，打开window命令窗口执行

1
$ node –v

Gulp安装
  1. Gulp安装通过npm在命令窗口即可实现
1
npm install gulp –g

说明：
npm 安装时，可能比较慢，可以cnpm使用淘宝的npm镜像
先输入命令

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

然后再输入

1
cnpm install gulp –g
  1. 安装完成后，在命令窗口输入 
    1
    gulp –v

项目环境搭建

新建项目

  1. 新建项目

  2. 新建文件gulpfile.js,代码示例

  3. cmd进入项目目录，执行命令,生成package.json文件

1
npm init

  1. 安装项目依赖gulp插件(根据gulpfile.js文件决定安装哪些插件)
1
2
3
4
5
6
7
8
cnpm install gulp –save
cnpm install gulp-jade –save
cnpm install gulp-if –save
cnpm install gulp-changed –save
cnpm install gulp-debug –save
cnpm install gulp-uglify –save
cnpm install minimist –save

package.json代码

  1. 把源码上传到版本控制服务器即可
项目开发

  1. 从svn版本控制服务器下载项目

  2. cmd进入项目目录，输入命令

1
2

npm install

ps: （cnpm install比较快）

  1. 安装完项目依赖包，输入命令 
    1
    gulp

集成部署

nodejs 安装
gulp 安装
Jenkins安装配置
  1. 新建：填写项目名，选择“构建一个自由风格的软件项目”
  2. 源码管理：选择Subversion，填写svn服务器的地址、用户名及密码
  3. 构建
    a). 安装gulp依赖组件，选择Execute shell


b). 执行gulp操作，选择Execute shell


c). 打包（去掉.svn相关文件），选择Execute shell


d). ssh上传、解压，选择Send files or execute commands over ssh
e). 配置ssh远程服务器
系统管理 –> 系统设置 –> Publish over SSH –> 填写ssh服务器地址、用户名及密码
f). 选择配置好的SSH Server


4. 配置完成后，点保存
5. 点击立即构建，验证配置是否成功