Skip to content
Permalink
Browse files

add foundation example (#537)

  • Loading branch information
msweeneydev committed Dec 2, 2019
1 parent 4fe015d commit 876eee1cd4a295ea7030ea96df95f92bd53da2b6
@@ -0,0 +1,4 @@
{
"presets": [ "@babel/preset-env" ],
"compact": false
}
@@ -0,0 +1,3 @@
{
"directory": "bower_components"
}
@@ -0,0 +1,5 @@
# Browsers that we support
last 2 versions
ie >= 9
ios >= 7
android >= 4.4
@@ -0,0 +1,8 @@
.DS_Store
node_modules
npm-debug.log
bower_components
dist
*.swp
.cache
.idea
@@ -0,0 +1,2 @@
README.md
yarn.lock
@@ -0,0 +1,5 @@
# Changelog

## Version 1.0 (November 19, 2015)

Initial release.
@@ -0,0 +1,29 @@
# Foundation Example

This directory is a brief example of a [Foundation](https://foundation.zurb.com/) site that can be deployed with ZEIT Now and zero configuration.

## Deploy Your Own

Deploy your own Foundation project with ZEIT Now.

[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/new/project?template=https://github.com/zeit/now-examples/tree/master/foundation)

_Live Example: https://foundation.now-examples.now.sh_

### How We Created This Example

To get started with Foundation for deployment with ZEIT Now, you can use the [Foundation CLI](https://foundation.zurb.com/sites/docs/installation.html) to initialize the project:

```shell
$ npx foundation new my-foundation-site
```

> The only change made is to amend the output directory in `config.yml` to `"public"`.
### Deploying From Your Terminal

You can deploy your new Foundation project with a single command from your terminal using [Now CLI](https://zeit.co/download):

```shell
$ now
```
@@ -0,0 +1,27 @@
# Your project's server will run on localhost:xxxx at this port
PORT: 8000

# UnCSS will use these settings
UNCSS_OPTIONS:
html:
# Search for used CSS classes in generated HTML files
- "dist/**/*.html"
ignore:
- !!js/regexp .foundation-mq
- !!js/regexp ^\.is-.*

# Gulp will reference these paths when it copies files
PATHS:
# Path to dist folder
dist: "public"
# Paths to static assets that aren't images, CSS, or JavaScript
assets:
- "src/assets/**/*"
- "!src/assets/{img,js,scss}/**/*"
# Paths to Sass libraries, which can then be loaded with @import
sass:
- "node_modules/foundation-sites/scss"
- "node_modules/motion-ui/src"
# Paths to JavaScript entry points for webpack to bundle modules
entries:
- "src/assets/js/app.js"
@@ -0,0 +1,173 @@
'use strict';

import plugins from 'gulp-load-plugins';
import yargs from 'yargs';
import browser from 'browser-sync';
import gulp from 'gulp';
import panini from 'panini';
import rimraf from 'rimraf';
import sherpa from 'style-sherpa';
import yaml from 'js-yaml';
import fs from 'fs';
import webpackStream from 'webpack-stream';
import webpack2 from 'webpack';
import named from 'vinyl-named';
import uncss from 'uncss';
import autoprefixer from 'autoprefixer';

// Load all Gulp plugins into one variable
const $ = plugins();

// Check for --production flag
const PRODUCTION = !!(yargs.argv.production);

// Load settings from settings.yml
const { PORT, UNCSS_OPTIONS, PATHS } = loadConfig();

function loadConfig() {
let ymlFile = fs.readFileSync('config.yml', 'utf8');
return yaml.load(ymlFile);
}

// Build the "dist" folder by running all of the below tasks
// Sass must be run later so UnCSS can search for used classes in the others assets.
gulp.task('build',
gulp.series(clean, gulp.parallel(pages, javascript, images, copy), sass, styleGuide));

// Build the site, 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(PATHS.dist, done);
}

// Copy files out of the assets folder
// This task skips over the "img", "js", and "scss" folders, which are parsed separately
function copy() {
return gulp.src(PATHS.assets)
.pipe(gulp.dest(PATHS.dist + '/assets'));
}

// Copy page templates into finished HTML files
function pages() {
return gulp.src('src/pages/**/*.{html,hbs,handlebars}')
.pipe(panini({
root: 'src/pages/',
layouts: 'src/layouts/',
partials: 'src/partials/',
data: 'src/data/',
helpers: 'src/helpers/'
}))
.pipe(gulp.dest(PATHS.dist));
}

// Load updated HTML templates and partials into Panini
function resetPages(done) {
panini.refresh();
done();
}

// Generate a style guide from the Markdown content and HTML template in styleguide/
function styleGuide(done) {
sherpa('src/styleguide/index.md', {
output: PATHS.dist + '/styleguide.html',
template: 'src/styleguide/template.html'
}, done);
}

// Compile Sass into CSS
// In production, the CSS is compressed
function sass() {

const postCssPlugins = [
// Autoprefixer
autoprefixer(),

// UnCSS - Uncomment to remove unused styles in production
// PRODUCTION && uncss.postcssPlugin(UNCSS_OPTIONS),
].filter(Boolean);

return gulp.src('src/assets/scss/app.scss')
.pipe($.sourcemaps.init())
.pipe($.sass({
includePaths: PATHS.sass
})
.on('error', $.sass.logError))
.pipe($.postcss(postCssPlugins))
.pipe($.if(PRODUCTION, $.cleanCss({ compatibility: 'ie9' })))
.pipe($.if(!PRODUCTION, $.sourcemaps.write()))
.pipe(gulp.dest(PATHS.dist + '/assets/css'))
.pipe(browser.reload({ stream: true }));
}

let webpackConfig = {
mode: (PRODUCTION ? 'production' : 'development'),
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: [ "@babel/preset-env" ],
compact: false
}
}
}
]
},
devtool: !PRODUCTION && 'source-map'
}

// Combine JavaScript into one file
// In production, the file is minified
function javascript() {
return gulp.src(PATHS.entries)
.pipe(named())
.pipe($.sourcemaps.init())
.pipe(webpackStream(webpackConfig, webpack2))
.pipe($.if(PRODUCTION, $.terser()
.on('error', e => { console.log(e); })
))
.pipe($.if(!PRODUCTION, $.sourcemaps.write()))
.pipe(gulp.dest(PATHS.dist + '/assets/js'));
}

// Copy images to the "dist" folder
// In production, the images are compressed
function images() {
return gulp.src('src/assets/img/**/*')
.pipe($.if(PRODUCTION, $.imagemin([
$.imagemin.jpegtran({ progressive: true }),
])))
.pipe(gulp.dest(PATHS.dist + '/assets/img'));
}

// Start a server with BrowserSync to preview the site in
function server(done) {
browser.init({
server: PATHS.dist, port: PORT
}, done);
}

// Reload the browser with BrowserSync
function reload(done) {
browser.reload();
done();
}

// Watch for changes to static assets, pages, Sass, and JavaScript
function watch() {
gulp.watch(PATHS.assets, copy);
gulp.watch('src/pages/**/*.html').on('all', gulp.series(pages, browser.reload));
gulp.watch('src/{layouts,partials}/**/*.html').on('all', gulp.series(resetPages, pages, browser.reload));
gulp.watch('src/data/**/*.{js,json,yml}').on('all', gulp.series(resetPages, pages, browser.reload));
gulp.watch('src/helpers/**/*.js').on('all', gulp.series(resetPages, pages, browser.reload));
gulp.watch('src/assets/scss/**/*.scss').on('all', sass);
gulp.watch('src/assets/js/**/*.js').on('all', gulp.series(javascript, browser.reload));
gulp.watch('src/assets/img/**/*').on('all', gulp.series(images, browser.reload));
gulp.watch('src/styleguide/**').on('all', gulp.series(styleGuide, browser.reload));
}

0 comments on commit 876eee1

Please sign in to comment.
You can’t perform that action at this time.