如何开发H5项目 -- 入门篇

前言

H5即HTML5，H5开发具有低成本、高效率、跨平台、研发周期短，用户接触成本低等特性。

一、开发环境

在开发一个H5项目之前，需要先搞好环境。主要有node、npm、gulp、bower。下面分别介绍一下这些工具的安装和使用。

第一步：安装Node

首先，最基本也最重要的是，我们需要搭建node环境。然后点击大大的绿色的install 按钮，下载完成后直接运行程序，就一切准备就绪。 npm 会随着安装包一起安装，稍后会用到它。 接下来，可以使用命令行来检测Node和npm是否正确安装：

node -v npm -v

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

第二步：安装gulp

首先，定位到项目。 使用 ls 可以列出文件列表，使用 cd 可以进入项目目录。

接下来，开始安装gulp。执行以下命令：

sudo npm install -g gulp

其中， 1、sudo是以管理员身份执行命令，一般会要求输入电脑密码 2、npm是安装node模块的工具，执行install命令 3、-g表示在全局环境安装，以便任何项目都能使用它 4、最后，gulp是将要安装的node模块的名字

运行时注意查看命令行有没有错误信息，安装完成后，你可以使用下面的命令查看gulp的版本号以确保gulp已经被正确安装。

gulp -v

接下来，我们需要将gulp安装到项目本地。

npm install —-save-dev gulp

这里，我们使用 —-save-dev 来更新package.json文件，更新 devDependencies 值，以表明项目需要依赖gulp。

接着，新建Gulpfile文件，运行gulp。安装好gulp后我们需要告诉它要为我们执行哪些任务，这里假设有以下四个任务： 1、检查Javascript 2、编译Sass（或Less之类的）文件 3、合并Javascript 4、压缩并重命名合并后的Javascript

安装依赖：

npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev

现在，组件都安装完毕，我们需要新建gulpfile文件以指定gulp需要为我们完成什么任务。gulp只有五个方法：task ， run ， watch ， src ，和 dest *，在项目根目录新建一个js文件并命名为 *gulpfile.js ，把下面的代码粘贴进去：

**gulpfile.js**

// 引入 gulp

var gulp = require('gulp'); 

// 引入组件

var jshint = require('gulp-jshint');

var sass = require('gulp-sass');

var concat = require('gulp-concat');

var uglify = require('gulp-uglify');

var rename = require('gulp-rename');

// 检查脚本

gulp.task('lint', function() {

    gulp.src('./js/*.js')

        .pipe(jshint())

        .pipe(jshint.reporter('default'));

});

// 编译Sass

gulp.task('sass', function() {

    gulp.src('./scss/*.scss')

        .pipe(sass())

        .pipe(gulp.dest('./css'));

});

// 合并，压缩文件

gulp.task('scripts', function() {

    gulp.src('./js/*.js')

        .pipe(concat('all.js'))

        .pipe(gulp.dest('./dist'))

        .pipe(rename('all.min.js'))

        .pipe(uglify())

        .pipe(gulp.dest('./dist'));

});

// 默认任务

gulp.task('default', function(){

        gulp.run('lint', 'sass', 'scripts');

// 监听文件变化

gulp.watch('./js/*.js', function(){

    gulp.run('lint', 'sass', 'scripts');

});

});

现在，分段解释下这段代码。

    //引入组件

    var gulp = require('gulp');

    var jshint = require('gulp-jshint');

    var sass = require('gulp-sass');

    var concat = require('gulp-concat');

    var uglify = require('gulp-uglify');

    var rename = require('gulp-rename');

这一步，我们引入了核心的gulp和其他依赖组件，接下来，分开创建lint, sass, scripts 和 default这四个不同的任务。

//Lint任务

gulp.task('lint', function() {

    gulp.src('./js/*.js')

        .pipe(jshint())

        .pipe(jshint.reporter('default'));

});

Lint任务会检查 js/ 目录下得js文件有没有报错或警告。

//Sass任务

gulp.task('sass', function() {

    gulp.src('./scss/*.scss')

        .pipe(sass())

        .pipe(gulp.dest('./css'));

});

Sass任务会编译 scss/ 目录下的scss文件，并把编译完成的css文件保存到 /css 目录中。

//Scripts 任务

gulp.task('scripts', function() {

    gulp.src('./js/*.js')

        .pipe(concat('all.js'))

        .pipe(gulp.dest('./dist'))

        .pipe(rename('all.min.js'))

        .pipe(uglify())

        .pipe(gulp.dest('./dist'));

});

scripts任务会合并 js/ 目录下得所有得js文件并输出到 dist/ 目录，然后gulp会重命名、压缩合并的文件，也输出到 dist/ 目录。

//default任务

gulp.task('default', function(){

    gulp.run('lint', 'sass', 'scripts');

    gulp.watch('./js/*.js', function(){

        gulp.run('lint', 'sass', 'scripts');

    });

});

这时，我们创建了一个基于其他任务的default任务。使用 .run() 方法关联和运行我们上面定义的任务，使用 .watch() 方法去监听指定目录的文件变化，当有文件变化时，会运行回调定义的其他任务。

现在，回到命令行，可以直接运行gulp任务了。

gulp

这将执行定义的default任务，换言之，这和以下的命令式同一个意思。

gulp default

我们可以运行在gulpfile.js中定义的任意任务，比如，现在运行sass任务：

gulp sass

第三步：安装bower

Bower是一个客户端技术的软件包管理器，它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。在安装bower之前，有必要了解下bower和npm的区别：

NPM 是node js的包管理器，用来下载安装node js的第三方工具包，也可以用来发布你自己开发的工具包。NPM主要运用于Node.js项目的内部依赖包管理，安装的模块位于项目根目录下的node_modules文件夹内。 Bower 是一个前端库管理的工具，管理一些js库，比如说jQuery，bootstrap等。通过bower，你就不用自己去找jQuery文件了，通过配置文件就可以自动完成了。

为什么有很多项目 Bower 和 NPM 都用呢，那是因为要用 bower 管理前端的包，而用 npm 去管理一些后端的包和构建工具，例如，yeoman，grunt，gulp，jshint 等等。

接下来，可以通过NPM安装Bower，执行以下命令：

npm install -g bower

其中 -g 命令表示全局安装。

二、项目结构和如何启动

一个H5项目的结构主要有以下几个部分：

src ：主要包括partials（存放html文件）、images图片、scripts脚本、styles样式（存放css、scss等）、data（mock数据）。

.gitignore ：用于配置不需要加入版本管理的文件，告诉Git哪些文件不需要添加到版本管理中。［配置语法：以斜杠“/”开头表示目录；以星号“*”通配多个字符；以问号“?”通配单个字符；以方括号“[]”包含单个字符的匹配列表；以叹号“!”表示不忽略(跟踪)匹配到的文件或目录；］这样，被过滤掉的文件就不会出现在GitLab库中了，当然本地库中还有，只是push的时候不会上传。

deploy ： 配置dev , test , beta ,prod环境下如何起服务.

dist ：产出的代码。

package.json ：package.json是包配置文件，必须是一个严格的json文件。其中很多属性可以通过npm-config来生成。使用npm init命令会引导创建一个package.json文件。 npm安装package.json时，直接转到当前项目目录下用命令npm install安装即可，自动将package.json中的模块安装到node-modules文件夹下。package.json中包含各种所需模块以及项目的配置信息（名称、版本、作者、许可证等）meta 信息，其中name和version必不可少。

dep2dev.sh：发布到dev的命令。

README.md ：说明文档。

启动一个H5项目主要有以下几个步骤：

首先在gitlab里新建一个模版项目，将项目地址copy下来，然后执行以下命令：

拷贝项目到本地： *git clone git@git.jdb-dev.com:mars/newH5Pro.git *

进入项目： cd newH5Pro

修改package.json的name为你的项目包名： vim package.json

安装node依赖： npm install

启动项目： gulp serve

三、H5项目调适

场景：本地调适H5项目

步骤如下所示：由于H5项目只是页面，在本地改动代码后，通过 gulp serve 可以看到代码改动后的效果。在命令行执行gulp serve 后生成dist文件夹，dist下存放着要执行的代码文件，在浏览器中打开页面时会依次读取dist下的代码文件。

四、H5项目的开发流程

首先，将最新代码push到gitlab，在命令行输入：

git status

git add proNameOne proNameTwo // 若proNameOne proNameTwo为新增加或新更改的文件；若add所有，则执行git add .

git commit -m "newH5Pro"

git push

（一）dev 环境

*执行脚本：sh dep2dev.sh *

eg. newH5Pro git:(master) ✗ sh dep2dev.sh

（二）beta 环境

Jenkins -> 部署BETA环境

（三）prod 环境

*Jenkins ->上线-上传FTP服务器 *

发jira单 -> 点击“创建” ［通知op上线］

其中，“创建问题”表单里的项目写要上线的项目描述，server平台为h5，描述内容主要包括影响范围、发布内容、FTP地址、发布步骤（1、发布FE 2、qa测试）、发布时间、发布负责人。

注意：部署到各个环境之前，记得先在浏览器里输入URL自测下是否能正确打开。

（四）test 环境

以adPage项目为例：

下载密钥文件kp-docker-trade，修改下面密钥文件的地址

登录 sudo ssh trade@100.73.128.2 -i ~/Documents/jiedaibao/kp-docker-trade 然后输入mac密码 cd 到h5/dst下创建自己的文件夹。

上传代码： sudo scp -i ~/Documents/jiedaibao/kp-docker-trade -r dist/* trade@100.73.128.2:/data/trade/h5/dst/adPage 访问地址：http://h5.test.jiedaibao.com/adPage/adPage

五、H5项目中 URL拼写规范

（一）本地

本地 URL拼写顺序为：http://本地IP地址:端口号/根目录dist里的路径?key=value

以h5app为例，eg. http://100.66.168.167:8008/partials/anniversary/index.html？tojdb=jdb

其中，根目录为dist, dist路径为dist/partials/anniversary/index.html

（二） dev环境

dev 环境的URL拼写规则为：http://dev域名/项目名称/根目录dist里的路径

以h5app为例，eg. http://h5.dev.jiedaibao.com/h5app/partials/anniversary/index.html

其中，dev域名为：h5.dev.jiedaibao.com

项目名：项目名要和 dep2dev.sh 脚本文件里的 project名称同步，eg：project="h5app"，所以这里的项目名为h5app.

dist路径为：dist/partials/anniversary/index.html

（三）beta 环境

beta 环境下的URL拼写规范为：https://beta域名/项目名称/根目录dist里的路径

以h5app为例，eg. https://beta-h5.jiedaibao.com.cn/h5app/partials/anniversary/index.html

其中，beta域名为：beta-h5.jiedaibao.com.cn

beta 环境下的URL拼写规范和dev相似，只是把域名换成了beta 下的域名。

（四）prod 环境

prod环境下的URL拼写规范为：https://线上域名/项目名称/根目录dist下的路径

仍以h5app为例，eg. https://app.jiedaibao.com/h5app/partials/anniversary/index.html

or https://app.jiedaibao.com.cn/h5app/partials/anniversary/index.html

其中，线上域名主要有两个：app.jiedaibao.com ，app.jiedaibao.com.cn