gulp_for_qa

gulp 介绍

gulp

什么是gulp?这和我们qa有什么关系?

Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。
入门指南

  1. 全局安装 gulp:

    1
    $ npm install --global gulp
  2. 作为项目的开发依赖(devDependencies)安装:

    1
    $ npm install --save-dev gulp
  3. 在项目根目录下创建一个名为 gulpfile.js 的文件:

    1
    2
    3
    4
    5
    var gulp = require('gulp');
    gulp.task('default', function() {
    // 将你的默认的任务代码放在这
    });
  4. 运行 gulp:

1
$ gulp

默认的名为 default 的任务(task)将会被运行,在这里,这个任务并未做任何事情。
想要单独执行特定的任务(task),请输入 gulp

官网:
http://www.gulpjs.com.cn/docs/getting-started/

gulp api 非常简单,只有5个task,run,watch,src,和dest.

是的 你只需要搞懂这5个api 完全够用。

Gulp 能帮助我们更好更快的进行测试,制定标准等工作。

eslint

Javascript代码验证工具,这种工具可以检查你的代码并提供相关的代码改进意见
最大卖点,可以通过插件实现自定义规则

例如 gc 这边用的angluar

https://www.npmjs.com/package/eslint-plugin-angular

使用npm 安装jslint 插件

1
$ npm install gulp-eslint --save-dev

配置 .eslintrc文件

设置js规范的文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
"env": {
"browser": true,
},
"globals": {
"angular": true,
},
"rules": {
"camelcase": 2,
"curly": 2,
"brace-style": [2, "1tbs"],
"quotes": [2, "single"],
"semi": [2, "always"],
"space-in-brackets": [2, "never"],
"space-infix-ops": 2,
}
}

配置 gulpfile

1
2
3
4
5
6
7
8
9
var eslint = require('gulp-eslint')
gulp.task('lint', function() {
return gulp.src(path.JS)
.pipe(eslint())
.pipe(eslint.format());
});
$ gulp lint

参考:

运行 gulp lint 命令

http://www.jianshu.com/p/c599185a0d84

jshint jslint jscs eslint的对比

http://developer.51cto.com/art/201506/481510.htm
http://www.sitepoint.com/comparison-javascript-linting-tools/

##browersync

Browsersync能让浏览器实时、快速响应您的文件更改(html、js、css、sass、less等)并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。您可以想象一下:“假设您的桌子上有pc、ipad、iphone、android等设备,同时打开了您需要调试的页面,当您使用browsersync后,您的任何一次代码保存,以上的设备都会同时显示您的改动”。无论您是前端还是后端工程师,使用它将提高您30%的工作效率。

1
$ npm install browser-sync gulp --save-dev

配置gulpfile

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
var path = {
HTML : "html/*.html",
LESS : "less/*.less",
CSS : "css/*.css",
JS : "js/*.js"
};
gulp.task("serve", ["less", "js-watch", "html"], function() {
browserSync.init({
server : "./"
});
gulp.watch(path.LESS, ["less"]);
gulp.watch(path.JS, ["js-watch"]);
gulp.watch(path.HTML, ["html"]);
gulp.watch(path.HTML).on("change", function() {
browserSync.reload;
});
});
gulp.task("less", function() {
gulp.src(path.LESS)
.pipe(less())
.pipe(gulp.dest(path.CSS))
.pipe(browserSync.stream());
})
gulp.task("js-watch", function() {
gulp.src(path.JS)
.pipe(browserSync.stream());
})
gulp.task("html", function() {
gulp.src(path.HTML)
.pipe(browserSync.stream());
})

运行命令
就可以看到代码变更对不同浏览器页面造成的影响了。
image

参考文档

http://www.browsersync.cn/docs/gulp/

开启代理模式

1
2
3
browser-sync start --proxy "http://localhost:3000/products/voip-phones/yealink-t20p" --host "http://localhost:3001/products/voip-phones/yealink-t20p"
gulp-istanbul

##Istanbul 是 JavaScript 程序的代码覆盖率工具
• 行覆盖率(line coverage):是否每一行都执行了?

• 函数覆盖率(function coverage):是否每个函数都调用了?

• 分支覆盖率(branch coverage):是否每个if代码块都执行了?

• 语句覆盖率(statement coverage):是否每个语句都执行了?

配置gulpfile文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
gulp.task('pre-test', function () {
return gulp.src(['js/*.js'])
// Covering files
.pipe(istanbul())
// Force `require` to return covered files
.pipe(istanbul.hookRequire());
});
gulp.task('test', ['pre-test'], function () {
return gulp.src(['test/*.js'])
.pipe(mocha())
// Creating the reports after tests ran
.pipe(istanbul.enforceThresholds({ thresholds: { global: 90 } }))
.pipe(istanbul.writeReports({
dir: './assets/unit-test-coverage',
reporters: [ 'lcov' ],
reportOpts: { dir: './assets/unit-test-coverage'} }));
});

运行gulp 命令

image1

####参考:
http://www.ruanyifeng.com/blog/2015/06/istanbul.html

http://blog.oskoui-oskoui.com/?p=8478

https://github.com/SBoudrias/gulp-istanbul

##所有例子用的repo
https://github.com/qileilove/gulp_qa