GulpJS 介绍、风格指南和自动化功能

Muhammad Hassan Tariq

4.80/5 (7投票s)

2015 年 12 月 14 日

CPOL

9分钟阅读

19143

使用 Gulp.JS 在 AngularJS 中指定工作单元

从Github下载源代码

引言

Gulp 的核心功能

Minification
串联
供应商前缀
Less 到 CSS 的编译
优化第三方和自定义代码
将文件注入 HTML
文件修订和版本控制
缓存 Angular 模板
测试
代码分析

它通过持续集成、测试和开发流程，更有效地简化您的 SDLC 周期。它有助于提高质量，交付更快、更一致。

Grunt 和 Gulp 的区别

与主要侧重于配置的 Grunt 相比，Gulp 更侧重于代码，因此 Gulp 更具可读性，更容易调试。它是基于流的，因此能更方便地使用 Node。

Gulp 工作流程

获取要修改的文件
修改文件
创建新文件

由于 Gulp 是基于流的，所以在管道架构中，图示如下：

Gulp API

gulp.task == 定义一个任务
gulp.src == 读取文件
gulp.dest == 写入文件
gulp.watch == 在进行代码更改时监视文件

gulp.task('TaskName', [dependencyItem], function () {
    return gulp
        .src('./sourcePath')
        .pipe(operation)
        .pipe(gulp.dest('./destinationPath'));
});

gulp.task
```
gulp.task(taskName [, arary of dependencies], function)
```
- 注册一个任务
- 依赖项是可选的
- 依赖项是并行执行的，而不是按顺序执行的
- 实际任务在依赖项完成后立即执行
gulp.src
```
gulp.src(file path [, options])
```
- 获取要修改的一组文件
- 可以使用通配符运算符来发出/添加文件
- 可以选择指定要应用于文件集的选项（例如，要保留的路径的多少）
gulp.dest
```
gulp.dest(output folder path [, options])
```
- 修改后的文件将被写入目标输出文件夹
- 将管道传输的文件写入新文件或同一文件
- 可以选择指定要应用于输出文件集或文件夹的选项
gulp.watch

用于在开发期间更改代码时监视文件
```
    gulp.watch(file path [, options], [task name])
```
- 对与文件路径匹配的文件执行一个或多个任务
- 可以选择指定要应用于文件集的选项
```
gulp.watch(file path [, options], CallbackFunction)
```
- 对与文件路径匹配的文件执行回调函数
- 可以选择指定要应用于文件集的选项

安装

关键参与者

Visual Studio
NodeJS
NPM
鲍尔
Gulp

第一步：安装

请注意，您也可以使用 Chocolatey 来安装 Node.js 和 Git。

“Chocolatey 是 Windows 的包管理器（类似于 apt-get，但适用于 Windows）。它被设计为一个去中心化的框架，用于快速安装您需要的应用程序和工具。它构建在 NuGet 基础设施之上，目前使用 PowerShell 作为其将软件包从发行版传递到您家（呃，电脑）的焦点。”

Chocolatey

    choco install nodejs
    choco install nodejs.install
    choco install git 
    choco install git.install

第二步：Visual Studio 扩展

可选

第三步：全局 Node 包

全局安装 CLI 包，这将启用 Gulp 和 Bower 命令行界面。

NPM
bower
gulp

npm install -g npm
npm install -g bower
npm install -g gulp

请注意：NPM 将随 Node.js 安装程序一起自动下载。

第四步：创建 npm 和 Bower 依赖项文件

要处理服务器端包，请创建 `packages.json` 文件。
```
npm init
```
要处理客户端包，请创建 `bower.json` 文件。
```
bower init
```

第五步：项目特定的 Node 包

gulp
```
npm install --save-dev gulp
```
`--save-dev` 将包保存到 `package.json` 文件中的 `devDependencies`。

`--save` 将包保存到 `package.json` 文件中的 `dependencies`。

第六步：项目特定的 Bower 包

    bower install angular --save
    bower install lodash --save
    bower install jasmine --save

对于特定版本的 Bower 包，您可以使用 `\#versionNumber`。

    bower install angularjs#v1.3.8 --save
    bower install lodash#v3.10.1 --save

第七步：在项目中添加 Gulp 配置文件

在项目中添加 `gulpfile.js` 并将以下代码粘贴进去。

    var gulp = require('gulp');
    gulp.task('testing', function () {
        console.log('Hello world!');
    });

第八步：执行 Gulp 任务

现在，在 CMD 中执行 `testing` 任务（确保 CMD 指向项目路径）。

    gulp testing

Gulp 配置文件风格指南

为使事情简单、可维护且易于阅读，请避免在 Gulp 文件之外使用魔术字符串。例如，将它们引入 `gulp.config.js` 文件中，例如文件路径、全局 Gulp 变量、通配符字符串等。

使用 **`gulp-load-plugins`** 进行懒加载。它会加载任何 Gulp 插件并将它们附加到全局作用域，或附加到您选择的对象。

$ npm install --save-dev gulp-load-plugins

代码之前

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

    gulp.task('jshint', function () {
        return gulp
            .src('./file.js')
            .pipe(jshint())
            .pipe(jshint.reporter('YOUR_REPORTER_HERE'));
    });

代码之前

    var gulp = require('gulp');
    var $ = require('gulp-load-plugins')({ lazy: true });

    gulp.task('jshint', function () {
        return gulp
            .src('./file.js')
            .pipe($.jshint())
            .pipe($.jshint.reporter('YOUR_REPORTER_HERE'));
    });

使用 **`yargs`** 从 CLI 中选择参数。使用此插件，您可以获取 Node.js 命令行参数。

npm install yargs

例如

    var args = require('yargs').argv;
    var gulp = require('gulp');
    var $ = require('gulp-load-plugins')({ lazy: true });

    gulp.task('jshint', function () {
        return gulp
            .src('./file.js')
            .pipe($.if(args.verbose, $.print()))
            .pipe($.jshint())
            .pipe($.jshint.reporter('jshint-stylish', { verbose: true }))
            .pipe($.jshint.reporter('YOUR_REPORTER_HERE'));
    });

命令：`gulp jshint --verbose`

`verbose` 是一个用于显示文件列表的参数。

使用 **`gulp-util`** 进行日志记录、`isStream()`、`isBuffer()`、`noop()` 等实用功能。

npm install gulp-util

例如

    var gutil = require('gulp-util');

    gulp.task('hello', function () {
        gutil.log('Hello World');
    });

命令：`gulp hello`

使用 **`gulp-print`** 将文件名打印到控制台，以检查 Gulp 管道的状态。

npm install gulp-print

例如

    var gulp = require('gulp');
    var $ = require('gulp-load-plugins')({ lazy: true });

    gulp.task('print', function() {
        return gulp
            .src('test/*.js')
                        .pipe($.print())
    });

命令：`gulp print`

使用 **`gulp-if`** 条件性地控制 Vinyl 对象的流。

npm install gulp-if

例如

    var gulp = require('gulp');
    var $ = require('gulp-load-plugins')({ lazy: true });
    var args = require('yargs').argv;

    gulp.task('if', function() {
        return gulp
            .src('test/*.js')
            .pipe($.if(args.admin, $.uglify()))
            .pipe(gulp.dest('./dist/'));
    });

命令：`gulp if true`

如果用户传递 `true` 作为 `admin` 参数的值，则会根据源压缩 JavaScript 文件。

使用 **`gulp-task-listing`** 作为默认任务的第一步，以便从您的 Gulpfile 中轻松获取任务列表。

npm install gulp-task-listing

例如

    var gulp = require('gulp');
    var $ = require('gulp-load-plugins')({ lazy: true });

    gulp.task('help', $.taskListing);
    gulp.task('default', ['help']);

命令：`gulp default`

使用 **`gulp-plumber`** 来防止因 Gulp 插件的错误而导致管道中断。它会优雅地处理错误，而不是使用 `.on('error', errorFunction)`。

npm install gulp-plumber

例如

    var gulp = require('gulp');
    var $ = require('gulp-load-plugins')({ lazy: true });

    gulp.task('error', function () {
        return gulp
            .src('./file.js')
            .pipe($.plumber())
            .pipe($.uglify())
            .pipe(gulp.dest('./dist/'));
    });

命令：`gulp error`

GulpJS 的自动化功能

JS 代码风格指南和分析

使用此任务来实现您的 JavaScript 风格指南并检测错误。
突出显示 `.jshintrc` 和 `.jscsrc` 文件中的所有规则。
Gulp 将测试这些文件中的 JavaScript 代码，以强制执行规则。

示例 Js Hint 文件

示例 Js 代码风格文件

预安装

    npm install --save-dev gulp gulp-load-plugins

Install

    npm install --save-dev gulp-load-plugins jshint-stylish gulp-util

代码

    var gulp = require('gulp');
    var $ = require('gulp-load-plugins')({ lazy: true });

    gulp.task('jsCode', function () {
    return gulp
        .src('test/*.js')
        .pipe($.jscs())
        .pipe($.jshint())
        .pipe($.jshint.reporter('fail'));
    });

Execute

    gulp jscode

Less 和 Sass 编译

使用 **`gulp-less`** 在浏览之前将 Less 编译为 CSS。
该任务将处理 Less 文件中的变量、运算符、函数、混合器等。
您可以使用 `AutoPrefixer` 来添加供应商前缀。

预安装

    npm install --save-dev gulp gulp-load-plugins

Install

    npm install --save-dev gulp-less gulp-autoprefixer

代码

    var gulp = require('gulp');
    var $ = require('gulp-load-plugins')({ lazy: true });

    gulp.task('css', function () {
    return gulp
        .src('test/*.less')
        .pipe($.less())
        .pipe($.autoprefixer({ browsers: ['last 2 version', '> 5%'] }))
        .pipe(gulp.dest('./build/'));
    });

Execute

    gulp css

动态添加 JavaScript 和 CSS 到主文件

使用 **`wiredep`** 将 Bower 的 JS 和 CSS 依赖项注入到 `index.html` 中。
使用 **`gulp-inject`** 将自定义 JS 和 CSS 依赖项注入到 `index.html` 中。

预安装

    npm install --save-dev gulp gulp-load-plugins

Install

    npm install --save-dev wiredep gulp-inject

**`wiredep`** 的 HTML 文件中的语法

    <!-- bower:css -->

    <!-- endbower -->

    <!-- bower:js -->

    <!-- endbower -->

代码

    var gulp = require('gulp');
    var $ = require('gulp-load-plugins')({ lazy: true });

    var options = {
        bowerJson: require('./bower.json'),
        directory: './bower_components/',
        ignorePath:  '../..'
    }

    gulp.task('injectJS', function () {
        var wiredep = require('wiredep').stream;

        return gulp
            .src('./src/index.html')
            .pipe(wiredep(options))
            .pipe($.inject(gulp.src('modules/home/**/*.js')))
            .pipe(gulp.dest('./build/'));
    });

Execute

    gulp injectJS

**`gulp-inject`** 的 HTML 文件中的语法

    <!-- inject:css -->

    <!-- endinject -->

    <!-- inject:js -->

    <!-- endinject -->

代码

    var gulp = require('gulp');
    var $ = require('gulp-load-plugins')({ lazy: true });

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

        return gulp
            .src('./src/index.html')
            .pipe($.inject(gulp.src('content/**/*.css')))
            .pipe(gulp.dest('./build/content/'));
    });

Execute

    gulp injectCSS

自动浏览器刷新

使用 **`BrowserSync`** 在浏览器中实时查看 HTML/JS/CSS 的更改。
`proxy` 属性应包含 IIS 路径和端口。
`ghostMode` 同步跨浏览器操作，例如滚动、点击等。

Browser Sync

预安装

    npm install --save-dev gulp lodash node-notifier

Install

    npm install --save-dev browser-sync

代码

    var gulp = require('gulp');
    var browserSync = require('browser-sync');
    var _ = require('lodash');

    gulp.task('browser-sync', function () {
        if (browserSync.active) {
            return;
        }
        var options = {
            proxy: 'localhost:' + 3472,
            port: 3470,
            files: [
                './scripts/**/*.*'
            ],
            ghostMode: {
                clicks: true,
                location: false,
                forms: true,
                scroll: true
            },
            injectChanges: true,
            logFileChanges: true,
            logLevel: 'debug',
            logPrefix: 'gulp-patterns',
            notify: true,
            reloadDelay: 1000 
        };
        browserSync(options);
    });

    function notify(options) {
        var notifier = require('node-notifier');
        var notifyOptions = {
            sound: 'Bottle',
            contentImage: path.join(__dirname, 'gulp.png'),
            icon: path.join(__dirname, 'gulp.png')
        };
        _.assign(notifyOptions, options);
        notifier.notify(notifyOptions);
    }

Execute

    gulp browser-sync

压缩图像

使用 **`gulp-imagemin`** 来最小化 PNG、JPEG、GIF 和 SVG 图像。
使用 `optimizationLevel` 属性在 0 到 7 之间调整压缩。

预安装

    npm install --save-dev gulp gulp-load-plugins

Install

    npm install --save-dev gulp-imagemin

代码

    var gulp = require('gulp');
    var $ = require('gulp-load-plugins')({ lazy: true });

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

        return gulp
            .src('./src/images/')
            .pipe($.imagemin({ optimizationLevel: 4 }))
            .pipe(gulp.dest('./build/images'));
    });

Execute

    gulp images

复制文件

用于复制字体、非压缩图像等文件。

代码

    var gulp = require('gulp');

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

        return gulp
            .src('./src/fonts/')
            .pipe(gulp.dest('./build/fonts'));
    });

Execute

    gulp delete

删除文件

用于删除文件夹和文件。

Install

    npm install --save-dev del

代码

    var gulp = require('gulp');
    var del = require('del');

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

        del('./build/');
    });

Execute

    gulp delete

列出所有任务文件

使用 **`gulp-task-listing`** 来列出您 GulpJS 文件中的所有任务。

预安装

    npm install --save-dev gulp gulp-load-plugins

Install

    npm install --save-dev gulp-task-listing

代码

    var gulp = require('gulp');
    var $ = require('gulp-load-plugins')({ lazy: true });

    gulp.task('help', $.taskListing);

Execute

    gulp help

缓存 HTML 模板
- 使用 **`gulp-angular-templatecache`** 来连接和注册 `$templateCache` 中的 AngularJS 模板。
- 所有 HTML 文件将使用 Angular 的 **`$templateCache`** 服务以键值对的形式存储。
- HTML 的 URL 将是键，文件的 HTML 代码将是 `$templateCache` 服务中的值。
- 这将减少 HTTP 请求。
- 对于 Angular 的每次 HTML 请求，它会先检查 `$templateCache` 服务，如果找不到，则会为该 HTML 文件发出 HTTP 请求。
- 选项中的 `standAlone` 属性表示创建一个新的 Angular 模块用于模板。
- **`gulp-angular-templatecache`** 会创建一个文件，并通过主模块的 `.run()` 服务来将所有 HTML 加载到 `$templateCache` 服务中。
预安装
```
    npm install --save-dev gulp gulp-load-plugins 
```
Install
```
    npm install --save-dev gulp-angular-templatecache gulp-minify-html 
```
代码
```
    var gulp = require('gulp');
    var $ = require('gulp-load-plugins')({ lazy: true });
    var options =   {
                module: 'ModuleName',
                standAlone: false,
                root: 'scripts/app/'
            }   

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

        return gulp
            .src('**/*.html')
            .pipe($.minifyHtml({ empty: true }))
            .pipe($.angularTemplatecache(
                    'templates.js',
                    options
                ))
            .pipe(gulp.dest('./.tmp/'));
    });
```
Execute
```
    gulp templatecache
```

合并所有 JS 和 CSS 到各自的单个文件中

使用 **`gulp-useref`** 将所有 CSS 合并到一个 CSS 文件中，并将所有 JS 文件合并到一个 JS 文件中。
解析 HTML 文件中的构建块，以替换对非优化脚本或样式的引用。
类似于 `gulp-inject`。
`Index.html` 应包含 `bower/inject/build` 部分，`bower` 和 `inject` 区域应首先使用 **`wiredep`** 和 **`gulp-inject`** 任务进行填充，然后执行此任务以将所有 CSS 和 JS 文件合并到 `index.html` 的 `build` 标签下提到的相应单个文件中。

预安装

    npm install --save-dev gulp gulp-load-plugins

Install

    npm install --save-dev gulp-useref@v1.1.0

**`gulp-useref`** 的 HTML 文件中的语法

    <!-- build:css content/lib.css -->
    <!-- bower:css -->
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:css content/site.css -->
    <!-- inject:css -->
    <!-- inject -->
    <!-- endbuild -->

    <!-- build:js js/lib.js -->
    <!-- bower:js -->
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:js js/app.js -->
    <!-- inject:js -->
    <!-- endinject -->
    <!-- endbuild -->

代码

    var gulp = require('gulp');
    var $ = require('gulp-load-plugins')({ lazy: true });
    var assets = $.useref.assets({ searchPath: './' });

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

        return gulp
            .src('./build/index.html')
            .pipe(assets)
            .pipe(assets.restore())
            .pipe($.useref())
            .pipe(gulp.dest('./build/'));
    });

Execute

    gulp combine

`$.useref.assets()` 从 HTML 注释收集资源。
`$.useref.restore()` 将文件恢复到 `index.html`。
`$.useref()` 将合并文件。

最小化文件

使用 **`gulp-uglify`** 来移除空格、注释，并最小化 *JavaScript* 文件。
使用 **`gulp-csso`** 来移除空格、注释，并转换 *CSS* 文件。
使用 **`gulp-filter`** 来分离/减少/过滤 Gulp 流中的文件。
代码混淆可能会破坏 Angular 的依赖注入，为避免此问题，请使用严格依赖注入 (ng-strict-di) 或 `$inject` 属性注解。
`Filter.restore()` 函数将过滤器放回流中。

预安装

    npm install --save-dev gulp gulp-load-plugins

Install

    npm install --save-dev gulp-filter@v2.0.0 gulp-csso gulp-uglify

代码

    var gulp = require('gulp');
    var $ = require('gulp-load-plugins')({ lazy: true });
    var assets = $.useref.assets({ searchPath:  './' });
    var cssFilter = $.filter('**/*.css');
    var jsFilter = $.filter('**/*.js');

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

        return gulp
            .src('./build/index.html')
            .pipe(assets)
            .pipe(cssFilter)
            .pipe($.csso())
            .pipe(cssFilter.restore())
            .pipe(jsFilter)
            .pipe($.uglify())
            .pipe(jsFilter.restore())
            .pipe(assets.restore())
            .pipe($.useref())
            .pipe(gulp.dest('./build/'));
    });

Execute

    gulp minify

Angular 依赖注入

使用 **`gulp-ng-annotate`** 来提供自动安全网，因为代码混淆可能会破坏 Angular 的依赖注入。
`gulp-ng-annotate` 查找依赖注入并添加 Angular 注入。
在控制器、服务、匿名函数等的顶部使用 **`/* @ngInject */`** 注解，以在忘记使用严格依赖注入 (ng-strict-di) 或 `$inject` 属性注解时解决依赖注入问题。
`@ngInject` 为 `gulp-ng-annotate` 添加 Angular 注入提供代码提示。
避免为第三方库实现 `@ngInject`。

预安装

    npm install --save-dev gulp gulp-load-plugins

Install

    npm install --save-dev gulp-ng-annotate

代码

    var gulp = require('gulp');
    var $ = require('gulp-load-plugins')({ lazy: true });
    var assets = $.useref.assets({ searchPath:  './' });
    var cssFilter = $.filter('**/*.css');
    var jsLibFilter = $.filter('**/' + config.optimized.lib);
    var jsAppFilter = $.filter('**/' + config.optimized.app);

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

        return gulp
        .src('./build/index.html')
        .pipe(assets)
        .pipe(cssFilter)
        .pipe($.csso())
        .pipe(cssFilter.restore())
        .pipe(jsLibFilter)
        .pipe($.uglify())
        .pipe(jsLibFilter.restore())
        .pipe(jsAppFilter)
        .pipe($.ngAnnotate())
        .pipe($.uglify())
        .pipe(jsAppFilter.restore())
        .pipe(assets.restore())
        .pipe($.useref())
        .pipe(gulp.dest('./build/'));
    });

Execute

    gulp di

修订

使用 **`gulp-rev`** 来实现静态资源版本控制，方法是将内容哈希附加到文件名：`unicorn.css` => `unicorn-d41d8cd98f.css`。
使用 **`gulp-rev-replace`** 来重写 `index.html`（引用文件的 HTML）中被 `gulp-rev` 重命名的文件名出现。
`gulp-rev-replace` 也解决了缓存问题。

预安装

    npm install --save-dev gulp gulp-load-plugins

Install

    npm install --save-dev gulp-rev gulp-rev-replace

代码

    var gulp = require('gulp');
    var $ = require('gulp-load-plugins')({ lazy: true });

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

        return gulp
            .src('src/*.js')
            .pipe($.rev())
            .pipe(gulp.dest('./build/'));
    });

Execute

    gulp revision

文件版本

使用 **`gulp-bump`** 来对 `package.json` 和 `bower.json` 进行版本管理。
`--type=pre` 将升级到预发布版本 `*. generation.*-x`。
`--type=patch` 或不指定标志将升级补丁版本 `*. generation.x`。
`--type=minor` 将升级次要版本 `*.x.*`。
`--type=major` 将升级主要版本 `x.*.*`。
`--version=1.2.3` 将升级到特定版本并忽略其他标志。
对于 `--version=1.2.3`，1 代表主版本，2 代表次版本，3 代表补丁版本。

预安装

    npm install --save-dev gulp gulp-load-plugins yargs

Install

    npm install --save-dev gulp-bump

代码

    var gulp = require('gulp');
    var $ = require('gulp-load-plugins')({ lazy: true });
    var args = require('yargs').argv;

    gulp.task('version', function () {
        var type = args.type;
        var version = args.version;
        var options = {};
        if (version) {
            options.version = version;
        } else {
            options.type = type;
        }
        return gulp
            .src([ './package.json', './bower.json' ])
            .pipe($.bump(options))
            .pipe(gulp.dest('./'));
    });

Execute

    gulp version --version=2.0.0
    gulp version --type=minor

使用 Jasmine 和 Karma 进行单元测试

**Karma** 是 JavaScript 的测试运行器，一个允许您在多个真实浏览器中执行 JS 代码的工具。
**Karma** 是一个 Karma 插件，用于生成代码覆盖率。
任务 `singleRun` 指的是执行一次测试，它可以使构建失败，但非常适合持续集成。
任务 `alwaysRun` 指的是执行测试并保持运行，监视文件更改并在每次更改时重新运行。
在执行 Gulp 任务之前，请确保您的项目中已包含 `karma.config.js` 文件。
`__dirname` 是 NodeJS 的全局对象，用于获取当前执行脚本所在目录的名称。

预安装

    npm install --save-dev gulp

Install

    npm install --save-dev karma phantomjs karma-coverage karma-growl-reporter karma-phantomjs-launcher  karma-firefox-launcher karma-ie-launcher karma-chrome-launcher karma-jasmine jasmine

代码

    var gulp = require('gulp');

    gulp.task('singleRun', function (done) {
        startTests(true, done);
    });

    gulp.task('alwaysRun',  function (done) {
        startTests(false, done);
    });

    function startTests(singleRun, done) {
        var karma = require('karma').server;
        var excludeFiles = [];
        var serverSpecs = 'tests/**/*.spec.js'

        karma.start({
            configFile: __dirname + '/karma.config.js',
            exclude: excludeFiles,
            singleRun: !!singleRun
        }, karmaCompleted);

        function karmaCompleted(karmaResult) {
            if (karmaResult === 1) {
                done('karma: tests failed with code ' + karmaResult);
            } else {
                done();
            }
        }
    }

Execute

    gulp singleRun
    gulp alwaysRun

使用 Protractor 进行 E2E 测试

**Protractor** 是 AngularJS 应用程序的端到端测试框架。
它针对在真实浏览器中运行的应用程序执行测试，并像真实用户一样与之交互。
请确保您已更新 `webdriver-manager` 版本，否则在执行 Gulp 任务之前，在 CMD 中执行以下命令：
```
webdriver-manager update --standalone
```

在 `protractor.config.js` 文件中，在执行 Gulp 任务之前，指定 `selenium server jar` 的文件路径、`chrome driver` 的路径，并注释掉正在运行的 `selenium` 服务器的地址。

seleniumServerJar: './node_modules/protractor/selenium/selenium-server-standalone-2.48.2.jar',
chromeDriver: './node_modules/protractor/selenium/chromedriver.exe',
//seleniumAddress: 'https://:4444/wd/hub',

在执行 Gulp 任务之前，在单独的控制台中启动 `webdriver-manager`。
```
webdriver-manager start
```
`__dirname` 是 NodeJS 的全局对象，用于获取当前执行脚本所在目录的名称。

预安装

    npm install --save-dev gulp

Install

    npm install --save-dev gulp-protractor protractor

代码

    var gulp = require('gulp');
    var protractor = require("gulp-protractor").protractor;

    gulp.task('e2e', function (done) {
        gulp.src(__dirname + './protractor_test/')
        .pipe(protractor({
            configFile: './protractor.config.js',
            args: ['--baseUrl', 'http://127.0.0.1:8000']
        }))
        .on('error', function (e) { throw e })
    });

Execute

    gulp e2e

在 HTML 上设置测试运行器

使用 **`gulp-jasmine-browser`** 来使用 Gulp 在浏览器中执行 Jasmine 测试。
要查看输出，请在浏览器窗口中输入以下 URL：https://:8888/

预安装

    npm install --save-dev

Install

    npm install --save-dev gulp-jasmine-browser

代码

    var gulp = require('gulp');
    var jasmineBrowser = require('gulp-jasmine-browser');
    var config.files = ['./scripts/lib/angular/angular.js',
        './scripts/lib/angular/angular-mocks.js',
        './scripts/app/myService.services.js',
        './scripts/app/myService.services-spec.js',];

    gulp.task('jasmineBrowser', function () {
        return gulp.src(config.files)
          .pipe(jasmineBrowser.specRunner())
          .pipe(jasmineBrowser.server({ port: 8888 }));
    });

Execute

    gulp jasmineBrowser

有关完整的源代码，请参阅 https://github.com/m-hassan-tariq/GulpJSForAngularJS

https://hassantariqblog.wordpress.com/2015/12/09/introduction-to-gulp-js/
https://hassantariqblog.wordpress.com/2015/12/10/style-guidelines-for-gulpjs/
https://hassantariqblog.wordpress.com/2015/12/11/automation-features-of-gulpjs/

由 john papa 创建的图片

历史

在此处保持您所做的任何更改或改进的实时更新。