add CI gulp recipe (#1886)

GoogleChrome · Mar 30, 2017 · 6898d09 · 6898d09
1 parent 09d1231
commit 6898d09
Show file tree

Hide file tree

Showing 5 changed files with 150 additions and 0 deletions.
diff --git a/docs/recipes/gulp/gulpfile.js b/docs/recipes/gulp/gulpfile.js
@@ -0,0 +1,95 @@
+'use strict';
+
+/**
+ * Copyright 2017 Google Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const gulp = require('gulp');
+const connect = require('gulp-connect');
+const lighthouse = require('lighthouse');
+const ChromeLauncher = require('lighthouse/lighthouse-cli/chrome-launcher').ChromeLauncher;
+const perfConfig = require('lighthouse/lighthouse-core/config/perf.json');
+const PORT = 8080;
+let launcher;
+
+/**
+ * Start server
+ */
+const startServer = function() {
+  return connect.server({
+    root: './public',
+    livereload: true,
+    port: PORT
+  });
+};
+
+/**
+ * Stop server
+ */
+const stopServer = function() {
+  connect.serverClose();
+  launcher.kill();
+};
+
+/**
+ * Launch chrome
+ */
+const launchChrome = function() {
+  launcher = new ChromeLauncher();
+  return launcher.isDebuggerReady()
+    .catch(() => {
+      return launcher.run();
+    });
+};
+
+/**
+ * Run lighthouse
+ */
+const runLighthouse = function() {
+  const url = `http://localhost:${PORT}/index.html`;
+  const lighthouseOptions = {}; // available options - https://github.com/GoogleChrome/lighthouse/#cli-options
+  return lighthouse(url, lighthouseOptions, perfConfig);
+};
+
+/**
+ * Handle ok result
+ * @param {Object} results - Lighthouse results
+ */
+const handleOk = function(results) {
+  stopServer();
+  // TODO: use lighthouse results for checking your performance expectations
+  /* eslint-disable no-console */
+  console.log(results);
+  process.exit(0);
+};
+
+/**
+ * Handle error
+ */
+const handleError = function() {
+  stopServer();
+  process.exit(1);
+};
+
+gulp.task('lighthouse', function() {
+  launchChrome().then(_ => {
+    startServer();
+    return runLighthouse()
+      .then(handleOk)
+      .catch(handleError);
+  });
+});
+
+gulp.task('default', ['lighthouse']);
diff --git a/docs/recipes/gulp/package.json b/docs/recipes/gulp/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "gulp-lighthouse-recipe",
+  "private": true,
+  "scripts": {
+    "start": "gulp"
+  },
+  "devDependencies": {
+    "gulp": "^3.9.1",
+    "gulp-connect": "^5.0.0",
+    "lighthouse": "^1.x"
+  }
+}
diff --git a/docs/recipes/gulp/public/index.html b/docs/recipes/gulp/public/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<!--
+ * Copyright 2017 Google Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+-->
+<html>
+<head>
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.css">
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
+  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
+  <script src="https://code.jquery.com/ui/jquery-ui-git.js"></script>
+</head>
+<body>
+
+<h1>Slow page</h1>
+
+<img src="https://cloud.githubusercontent.com/assets/238208/21210165/b3c368c0-c22d-11e6-91fb-aa24959e2637.png">
+
+</body>
+</html>
diff --git a/docs/recipes/gulp/readme.md b/docs/recipes/gulp/readme.md
@@ -0,0 +1,6 @@
+# Gulp recipe for Lighthouse
+
+## Run
+
+- `npm install`
+- `npm start`
diff --git a/readme.md b/readme.md
@@ -192,6 +192,11 @@ function getOverallScore(lighthouseResults) {
 }
 ```
 
+### Recipes
+> Helpful for CI integration
+
+  - [gulp](docs/recipes/gulp)
+
 ## Viewing a report
 
 Lighthouse can produce a report as JSON, HTML, or stdout CLI output.