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