From: Geoff Kimball Date: Thu, 10 Mar 2016 18:59:07 +0000 (-0800) Subject: Simplify testing environment by cutitng out the separate Gulpfile and set of dependencies X-Git-Tag: v2.0.0-rc.4~53^2~6 X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=90ff1caf88978ccc9b12d0835f266b16900ef772;p=thirdparty%2Ffoundation%2Ffoundation-emails.git Simplify testing environment by cutitng out the separate Gulpfile and set of dependencies --- diff --git a/gulpfile.js b/gulpfile.js index 5f2591bb..06f4b5b5 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -7,6 +7,10 @@ var rimraf = require('rimraf'); var browser = require('browser-sync'); var foundationDocs = require('foundation-docs'); var octophant = require('octophant'); +var inky = require('inky'); +var siphon = require('siphon-media-query'); +var lazypipe = require('lazypipe'); +var fs = require('fs'); // Configuration for the documentation generator supercollider @@ -107,3 +111,34 @@ gulp.task('default', ['server'], function() { gulp.watch(['docs/assets/scss/**/*', 'node_modules/foundation-docs/scss/**/*'], ['sass:docs', browser.reload]); gulp.watch('scss/**/*.scss', ['sass:foundation', browser.reload]); }); + +gulp.task('test', ['sass', 'test:compile'], function() { + browser.init({ server: 'test/visual/_build', directory: true }); + gulp.watch('scss/**/*.scss', ['sass:foundation', browser.reload]); + gulp.watch('test/visual/pages/*.html', ['test:compile', browser.reload]); +}); + +gulp.task('test:compile', function() { + gulp.src('test/visual/pages/*.html') + .pipe($.wrap({ src: 'test/visual/_template.html' })) + .pipe(inky()) + .pipe(inliner('_build/assets/css/foundation.css')) + .pipe(gulp.dest('test/visual/_build')); +}); + +function inliner(css) { + var css = fs.readFileSync(css).toString(); + var mqCss = siphon(css); + + var pipe = lazypipe() + .pipe($.inlineCss, { + applyStyleTags: false + }) + .pipe($.injectString.replace, '', ``) + .pipe($.htmlmin, { + collapseWhitespace: true, + minifyCSS: true + }); + + return pipe(); +} diff --git a/package.json b/package.json index 93d67f72..cb2369c5 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "scripts": { "start": "gulp", "test": "cd testing && npm start", + "test:visual": "gulp test", "production": "cd testing && npm run build" }, "repository": "https://github.com/zurb/foundation-emails", @@ -23,9 +24,10 @@ "gulp-autoprefixer": "^2.3.1", "gulp-cached": "^1.1.0", "gulp-concat": "^2.6.0", - "gulp-htmlmin": "^1.1.1", + "gulp-htmlmin": "^1.3.0", "gulp-if": "^2.0.0", "gulp-inject": "^1.2.0", + "gulp-inject-string": "^1.1.0", "gulp-inline-css": "^2.0.0", "gulp-load-plugins": "^1.0.0-rc.1", "gulp-ruby-sass": "^1.0.5", @@ -33,9 +35,10 @@ "gulp-sass-lint": "^1.1.1", "gulp-sourcemaps": "^1.6.0", "gulp-webserver": "^0.9.1", + "gulp-wrap": "^0.11.0", "handlebars": "^3.0.3", "highlight.js": "^8.7.0", - "inky": "^1.2.2", + "inky": "^1.2.3", "lazypipe": "^1.0.1", "marked": "^0.3.5", "media-query-extractor": "^0.1.1", @@ -45,6 +48,7 @@ "panini": "^1.2.0", "rimraf": "^2.4.2", "run-sequence": "^1.1.2", + "siphon-media-query": "^1.0.0", "string-template": "^0.2.1", "supercollider": "^1.4.0", "typeahead.js": "^0.11.1", diff --git a/testing/src/layouts/default.html b/test/visual/_template.html similarity index 85% rename from testing/src/layouts/default.html rename to test/visual/_template.html index 829553d2..54f4ca73 100644 --- a/testing/src/layouts/default.html +++ b/test/visual/_template.html @@ -3,16 +3,16 @@ - + - + diff --git a/test/visual/assets b/test/visual/assets new file mode 120000 index 00000000..11ceee4e --- /dev/null +++ b/test/visual/assets @@ -0,0 +1 @@ +../../_build/assets \ No newline at end of file diff --git a/testing/src/pages/alignment.html b/test/visual/pages/alignment.html similarity index 100% rename from testing/src/pages/alignment.html rename to test/visual/pages/alignment.html diff --git a/testing/src/pages/block-inky.html b/test/visual/pages/block-inky.html similarity index 100% rename from testing/src/pages/block-inky.html rename to test/visual/pages/block-inky.html diff --git a/testing/src/pages/block.html b/test/visual/pages/block.html similarity index 100% rename from testing/src/pages/block.html rename to test/visual/pages/block.html diff --git a/testing/src/pages/button-expanded.html b/test/visual/pages/button-expanded.html similarity index 100% rename from testing/src/pages/button-expanded.html rename to test/visual/pages/button-expanded.html diff --git a/testing/src/pages/button-inky.html b/test/visual/pages/button-inky.html similarity index 100% rename from testing/src/pages/button-inky.html rename to test/visual/pages/button-inky.html diff --git a/testing/src/pages/button.html b/test/visual/pages/button.html similarity index 100% rename from testing/src/pages/button.html rename to test/visual/pages/button.html diff --git a/testing/src/pages/center.html b/test/visual/pages/center.html similarity index 100% rename from testing/src/pages/center.html rename to test/visual/pages/center.html diff --git a/testing/src/pages/grid-callout.html b/test/visual/pages/grid-callout.html similarity index 100% rename from testing/src/pages/grid-callout.html rename to test/visual/pages/grid-callout.html diff --git a/testing/src/pages/grid-inky.html b/test/visual/pages/grid-inky.html similarity index 100% rename from testing/src/pages/grid-inky.html rename to test/visual/pages/grid-inky.html diff --git a/testing/src/pages/grid-nested.html b/test/visual/pages/grid-nested.html similarity index 100% rename from testing/src/pages/grid-nested.html rename to test/visual/pages/grid-nested.html diff --git a/testing/src/pages/grid-with-callouts-inky.html b/test/visual/pages/grid-with-callouts-inky.html similarity index 100% rename from testing/src/pages/grid-with-callouts-inky.html rename to test/visual/pages/grid-with-callouts-inky.html diff --git a/testing/src/pages/grid.html b/test/visual/pages/grid.html similarity index 100% rename from testing/src/pages/grid.html rename to test/visual/pages/grid.html diff --git a/testing/src/pages/index.html b/test/visual/pages/index.html similarity index 100% rename from testing/src/pages/index.html rename to test/visual/pages/index.html diff --git a/testing/src/pages/kitcat.html b/test/visual/pages/kitcat.html similarity index 100% rename from testing/src/pages/kitcat.html rename to test/visual/pages/kitcat.html diff --git a/testing/src/pages/list.html b/test/visual/pages/list.html similarity index 100% rename from testing/src/pages/list.html rename to test/visual/pages/list.html diff --git a/testing/src/pages/menu-inky.html b/test/visual/pages/menu-inky.html similarity index 100% rename from testing/src/pages/menu-inky.html rename to test/visual/pages/menu-inky.html diff --git a/testing/src/pages/menu.html b/test/visual/pages/menu.html similarity index 100% rename from testing/src/pages/menu.html rename to test/visual/pages/menu.html diff --git a/testing/src/pages/offset-inky.html b/test/visual/pages/offset-inky.html similarity index 100% rename from testing/src/pages/offset-inky.html rename to test/visual/pages/offset-inky.html diff --git a/testing/src/pages/offset.html b/test/visual/pages/offset.html similarity index 100% rename from testing/src/pages/offset.html rename to test/visual/pages/offset.html diff --git a/testing/src/pages/visibility.html b/test/visual/pages/visibility.html similarity index 100% rename from testing/src/pages/visibility.html rename to test/visual/pages/visibility.html diff --git a/testing/.babelrc b/testing/.babelrc deleted file mode 100644 index c13c5f62..00000000 --- a/testing/.babelrc +++ /dev/null @@ -1,3 +0,0 @@ -{ - "presets": ["es2015"] -} diff --git a/testing/.gitignore b/testing/.gitignore deleted file mode 100644 index 242dc11b..00000000 --- a/testing/.gitignore +++ /dev/null @@ -1,6 +0,0 @@ -.DS_Store -node_modules -npm-debug.log -bower_components -dist -.sass-cache diff --git a/testing/LICENSE b/testing/LICENSE deleted file mode 100644 index 73d6b962..00000000 --- a/testing/LICENSE +++ /dev/null @@ -1,22 +0,0 @@ -Copyright (c) 2013-2015 ZURB, inc. - -MIT License - -Permission is hereby granted, free of charge, to any person obtaining -a copy of this software and associated documentation files (the -"Software"), to deal in the Software without restriction, including -without limitation the rights to use, copy, modify, merge, publish, -distribute, sublicense, and/or sell copies of the Software, and to -permit persons to whom the Software is furnished to do so, subject to -the following conditions: - -The above copyright notice and this permission notice shall be -included in all copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, -EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF -MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND -NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE -LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION -OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION -WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. \ No newline at end of file diff --git a/testing/README.md b/testing/README.md deleted file mode 100644 index 4b083530..00000000 --- a/testing/README.md +++ /dev/null @@ -1,3 +0,0 @@ -# Foundation for Emails Template - -This is a starter template for a project created with Foundation for Emails, a responsive email framework from ZURB. diff --git a/testing/bower.json b/testing/bower.json deleted file mode 100644 index 4af54f8a..00000000 --- a/testing/bower.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "name": "foundation-emails-template", - "version": "0.0.1", - "authors": [ - "ZURB " - ], - "description": "Basic template for a Foundation for Emails project.", - "main": "gulpfile.js", - "license": "MIT", - "homepage": "http://foundation.zurb.com/emails", - "ignore": [ - "**/.*", - "node_modules", - "bower_components", - "test", - "tests" - ] -} diff --git a/testing/gulpfile.babel.js b/testing/gulpfile.babel.js deleted file mode 100644 index 47233536..00000000 --- a/testing/gulpfile.babel.js +++ /dev/null @@ -1,107 +0,0 @@ -import gulp from 'gulp'; -import plugins from 'gulp-load-plugins'; -import browser from 'browser-sync'; -import rimraf from 'rimraf'; -import panini from 'panini'; -import yargs from 'yargs'; -import lazypipe from 'lazypipe'; -import inky from 'inky'; -import fs from 'fs'; -import siphon from 'siphon-media-query'; - -const $ = plugins(); - -// Look for the --production flag -const PRODUCTION = !!(yargs.argv.production); - -// Build the "dist" folder by running all of the above tasks -gulp.task('build', - gulp.series(clean, pages, sass, images, inline)); - -// Build emails, run the server, and watch for file changes -gulp.task('default', - gulp.series('build', server, watch)); - -// Delete the "dist" folder -// This happens every time a build starts -function clean(done) { - rimraf('dist', done); -} - -// Compile layouts, pages, and partials into flat HTML files -// Then parse using Inky templates -function pages() { - return gulp.src('src/pages/**/*.html') - .pipe(panini({ - root: 'src/pages', - layouts: 'src/layouts', - partials: 'src/partials' - })) - .pipe(inky()) - .pipe(gulp.dest('dist')); -} - -// Reset Panini's cache of layouts and partials -function resetPages(done) { - panini.refresh(); - done(); -} - -// Compile Sass into CSS -function sass() { - return gulp.src('src/assets/scss/app.scss') - .pipe($.if(!PRODUCTION, $.sourcemaps.init())) - .pipe($.sass({ - includePaths: ['node_modules/foundation-emails/scss'] - }).on('error', $.sass.logError)) - .pipe($.if(!PRODUCTION, $.sourcemaps.write())) - .pipe(gulp.dest('dist/css')); -} - -// Copy and compress images -function images() { - return gulp.src('src/assets/img/*') - .pipe($.imagemin()) - .pipe(gulp.dest('./dist/assets/img')); -} - -// Inline CSS and minify HTML -function inline() { - return gulp.src('dist/**/*.html') - .pipe($.if(PRODUCTION, inliner('dist/css/app.css'))) - .pipe(gulp.dest('dist')); -} - -// Start a server with LiveReload to preview the site in -function server(done) { - browser.init({ - server: 'dist' - }); - done(); -} - -// Watch for file changes -function watch() { - gulp.watch('src/pages/**/*.html', gulp.series(pages, inline, browser.reload)); - gulp.watch(['src/layouts/**/*', 'src/partials/**/*'], gulp.series(resetPages, pages, inline, browser.reload)); - gulp.watch(['../scss/**/*.scss', 'src/assets/scss/**/*.scss'], gulp.series(sass, pages, inline, browser.reload)); - gulp.watch('src/img/**/*', gulp.series(images, browser.reload)); -} - -// Inlines CSS into HTML, adds media query CSS into the `) - .pipe($.htmlmin, { - collapseWhitespace: true, - minifyCSS: true - }); - - return pipe(); -} diff --git a/testing/package.json b/testing/package.json deleted file mode 100644 index 01d87b01..00000000 --- a/testing/package.json +++ /dev/null @@ -1,37 +0,0 @@ -{ - "name": "foundation-emails-template", - "version": "1.0.0", - "description": "Basic template for a Foundation for Emails project.", - "repository": "zurb/foundation-emails-template", - "main": "gulpfile.babel.js", - "scripts": { - "start": "gulp", - "build": "gulp --production" - }, - "author": "ZURB ", - "license": "MIT", - "dependencies": { - "foundation-emails": "2.0.0-rc.3" - }, - "devDependencies": { - "babel-core": "^6.3.26", - "babel-preset-es2015": "^6.3.13", - "browser-sync": "^2.11.0", - "gulp": "git://github.com/gulpjs/gulp.git#4.0", - "gulp-cli": "^1.1.0", - "gulp-htmlmin": "^1.1.1", - "gulp-if": "^2.0.0", - "gulp-imagemin": "^2.4.0", - "gulp-inject-string": "^1.1.0", - "gulp-inline-css": "^3.0.0", - "gulp-load-plugins": "^1.1.0", - "gulp-sass": "^2.1.0", - "gulp-sourcemaps": "^1.6.0", - "inky": "^1.2.0", - "lazypipe": "^1.0.1", - "panini": "^1.2.0", - "rimraf": "^2.3.3", - "siphon-media-query": "^1.0.0", - "yargs": "^4.1.0" - } -} diff --git a/testing/src/assets/scss/_callout-block.scss b/testing/src/assets/scss/_callout-block.scss deleted file mode 100644 index 5bdac88e..00000000 --- a/testing/src/assets/scss/_callout-block.scss +++ /dev/null @@ -1,8 +0,0 @@ - -@media only screen and (max-width: #{$small-range}) { - .float-right { - margin: 0 auto; - float: none; - text-align: center; - } -} \ No newline at end of file diff --git a/testing/src/assets/scss/_settings.scss b/testing/src/assets/scss/_settings.scss deleted file mode 100644 index 62d3b86b..00000000 --- a/testing/src/assets/scss/_settings.scss +++ /dev/null @@ -1,138 +0,0 @@ -// Foundation for Emails Settings -// ------------------------------ -// -// Table of Contents: -// -// 1. Global -// 2. Grid -// 3. Block Grid -// 4. Typography -// 5. Button -// 6. Callout -// 7. Menu -// 8. Thumbnial - - -// 1. Global -// --------- - -$primary-color: #2199e8; -$secondary-color: #777777; -$success-color: #3adb76; -$warning-color: #ffae00; -$alert-color: #ec5840; -$light-gray: #f3f3f3; -$medium-gray: #cacaca; -$dark-gray: #8a8a8a; -$black: #0a0a0a; -$white: #fefefe; -$pre-color: #ff6908; -$global-width: 580px; -$global-width-small: 95%; -$global-gutter: 16px; -$body-background: $light-gray; -$container-background: $white; -$global-font-color: $black; -$body-font-family: Helvetica, Arial, sans-serif; -$global-padding: 16px; -$global-margin: 32px; -$global-radius: 3px; -$global-rounded: 500px; -$global-breakpoint: $global-width + $global-gutter; - -// 2. Grid -// ------- - -$grid-column-count: 12; -$column-padding-bottom: $global-padding; - -// 3. Block Grid -// ------------- - -$block-grid-max: 8; -$block-grid-gutter: $global-gutter; - -// 4. Typography -// ------------- - -$global-font-weight: normal; -$header-color: inherit; -$global-line-height: 1.3; -$global-font-size: 14px; -$body-line-height: 19px; -$header-font-family: $body-font-family; -$header-font-weight: $global-font-weight; -$h1-font-size: 40px; -$h2-font-size: 36px; -$h3-font-size: 32px; -$h4-font-size: 28px; -$h5-font-size: 24px; -$h6-font-size: 20px; -$header-margin-bottom: 10px; -$paragraph-margin-bottom: 10px; -$small-font-size: 10px; -$lead-font-size: $global-font-size * 1.25; -$lead-line-height: 1.6; -$text-padding: 10px; -$subheader-lineheight: 1.4; -$subheader-color: $dark-gray; -$subheader-font-weight: $global-font-weight; -$subheader-margin-top: 4px; -$subheader-margin-bottom: 8px; -$hr-width: $global-width; -$hr-border: 1px solid $medium-gray; -$hr-margin: 20px auto; -$anchor-text-decoration: none; -$anchor-color: $primary-color; -$anchor-color-visited: $anchor-color; -$anchor-color-hover: darken($primary-color, 10%); -$anchor-color-active: $anchor-color-hover; -$stat-font-size: 40px; - -// 5. Button -// --------- - -$button-padding: ( - tiny: 4px 8px 4px 8px, - small: 5px 10px 5px 10px, - default: 8px 16px 8px 16px, - large: 10px 20px 10px 20px, -); -$button-font-size: ( - tiny: 10px, - small: 12px, - default: 16px, - large: 20px, -); -$button-color: $white; -$button-color-alt: $medium-gray; -$button-font-weight: bold; -$button-margin: 0 0 $global-margin 0; -$button-background: $primary-color; -$button-border: 2px solid $button-background; -$button-radius: $global-radius; -$button-rounded: $global-rounded; - -// 6. Callout -// ---------- - -$callout-background: $white; -$callout-background-fade: 85%; -$callout-padding: 10px; -$callout-border: 1px solid darken($callout-background, 20%); -$callout-border-secondary: 1px solid darken($secondary-color, 20%); -$callout-border-success: 1px solid darken($success-color, 20%); -$callout-border-warning: 1px solid darken($warning-color, 20%); -$callout-border-alert: 1px solid darken($alert-color, 20%); - -// 7. Menu -// ------- - -$menu-item-padding: 20px; -$menu-simple-item-spacing: 10px; - -// 8. Thumbnial -// ------------ - -$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2); - diff --git a/testing/src/assets/scss/app.scss b/testing/src/assets/scss/app.scss deleted file mode 100644 index cc83c983..00000000 --- a/testing/src/assets/scss/app.scss +++ /dev/null @@ -1,107 +0,0 @@ -@import 'settings'; -@import '../../../../scss/foundation'; - -@media only screen and (max-width: #{$global-breakpoint}) { - .small-float-center { - margin: 0 auto; - float: none; - text-align: center; - } - - .small-text-center { - text-align: center; - } - - table.menu.small-vertical { - td, - th, - a { - display: block !important; - } - } -} - - - -.header { - background: $light-gray; - border-radius: 10px; - Margin-bottom: $global-margin * 2; - - .columns { - padding-bottom: 0; - } - - p { - margin-bottom: 0; - } - - img { - padding-top: $global-padding; - padding-bottom: $global-padding; - } -} - -.container { - border-radius: 10px; -} - -.feature-block { - background: $light-gray; - Margin-bottom: $global-padding * 2; - - .columns { - padding-top: $global-padding * 2; - padding-bottom: $global-padding * 2; - } -} - -.gallery { - img { - Margin-bottom: $global-margin; - } - - .gallery-name { - text-align: center; - font-weight: bold; - Margin-bottom: 0; - } - - .gallery-age { - color: $secondary-color; - text-align: center; - } -} - - -// building block - -.feature-list { - - .feature-list-item { - border-top: 1px solid $light-gray; - td, th { - padding: 10px 0 10px 0; - } - } - - .feature-list-item-info { - font-size: 14px; - line-height: 21px; - text-transform: uppercase; - color: $medium-gray; - Margin-bottom: 0; - } - - .feature-list-item-header { - font-size: 20px; - line-height: 30px; - Margin-bottom: 5px; - - a { - color: $black; - } - } -} - - diff --git a/testing/src/partials/footer.html b/testing/src/partials/footer.html deleted file mode 100644 index 985208da..00000000 --- a/testing/src/partials/footer.html +++ /dev/null @@ -1,7 +0,0 @@ - - - -

Terms | Privacy | Unsubscribe

- - - \ No newline at end of file diff --git a/testing/src/partials/header.html b/testing/src/partials/header.html deleted file mode 100644 index e69de29b..00000000

- {{> body}} + <%= contents %>