Page MenuHomeDevCentral
Files F4060897

D1326.diff
No OneTemporary
Actions

D1326.diff
View Options

diff --git a/.babelrc b/.babelrc
--- a/.babelrc
+++ b/.babelrc
@@ -1,4 +1,4 @@
{
- "presets": ["es2015"],
+ "presets": ["es2015"],
"compact": false
}
diff --git a/.gitignore b/.gitignore
--- a/.gitignore
+++ b/.gitignore
@@ -2,4 +2,5 @@
node_modules
npm-debug.log
bower_components
-dist
\ No newline at end of file
+dist
+*.swp
diff --git a/bower.json b/bower.json
deleted file mode 100644
--- a/bower.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
- "name": "foundation-ssg",
- "version": "1.0.0",
- "authors": [
- "ZURB <foundation@zurb.com>"
- ],
- "description": "Static site generator for Foundation for Sites.",
- "main": "gulpfile.js",
- "license": "MIT",
- "ignore": [
- "**/.*",
- "node_modules",
- "bower_components",
- "test",
- "tests"
- ],
- "dependencies": {
- "foundation-sites": "~6.2.3",
- "motion-ui": "~1.2.2"
- },
- "private": true
-}
diff --git a/config.yml b/config.yml
--- a/config.yml
+++ b/config.yml
@@ -8,6 +8,7 @@
COMPATIBILITY:
- "last 2 versions"
- "ie >= 9"
+ - "ios >= 7"
# UnCSS will use these settings
UNCSS_OPTIONS:
@@ -24,40 +25,11 @@
# Paths to static assets that aren't images, CSS, or JavaScript
assets:
- "src/assets/**/*"
- - "!src/assets/{img,js,scss}/**/*"
+ - "!src/assets/{img,js,scss}{,/**/*}"
# Paths to Sass libraries, which can then be loaded with @import
sass:
- - "bower_components/foundation-sites/scss"
- - "bower_components/motion-ui/src"
- # Paths to JavaScript libraries, which are compined into one file
- javascript:
- # Libraries requried by Foundation
- - "bower_components/jquery/dist/jquery.js"
- - "bower_components/what-input/what-input.js"
- # Core Foundation files
- - "bower_components/foundation-sites/js/foundation.core.js"
- - "bower_components/foundation-sites/js/foundation.util.*.js"
- # Individual Foundation components
- # If you aren't using a component, just remove it from the list
- - "bower_components/foundation-sites/js/foundation.abide.js"
- - "bower_components/foundation-sites/js/foundation.accordion.js"
- - "bower_components/foundation-sites/js/foundation.accordionMenu.js"
- - "bower_components/foundation-sites/js/foundation.drilldown.js"
- - "bower_components/foundation-sites/js/foundation.dropdown.js"
- - "bower_components/foundation-sites/js/foundation.dropdownMenu.js"
- - "bower_components/foundation-sites/js/foundation.equalizer.js"
- - "bower_components/foundation-sites/js/foundation.interchange.js"
- - "bower_components/foundation-sites/js/foundation.magellan.js"
- - "bower_components/foundation-sites/js/foundation.offcanvas.js"
- - "bower_components/foundation-sites/js/foundation.orbit.js"
- - "bower_components/foundation-sites/js/foundation.responsiveMenu.js"
- - "bower_components/foundation-sites/js/foundation.responsiveToggle.js"
- - "bower_components/foundation-sites/js/foundation.reveal.js"
- - "bower_components/foundation-sites/js/foundation.slider.js"
- - "bower_components/foundation-sites/js/foundation.sticky.js"
- - "bower_components/foundation-sites/js/foundation.tabs.js"
- - "bower_components/foundation-sites/js/foundation.toggler.js"
- - "bower_components/foundation-sites/js/foundation.tooltip.js"
- # Paths to your own project code are here
- - "src/assets/js/!(app).js"
+ - "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"
diff --git a/gulpfile.babel.js b/gulpfile.babel.js
--- a/gulpfile.babel.js
+++ b/gulpfile.babel.js
@@ -1,14 +1,17 @@
'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 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';
// Load all Gulp plugins into one variable
const $ = plugins();
@@ -86,19 +89,33 @@
}))
// Comment in the pipe below to run UnCSS in production
//.pipe($.if(PRODUCTION, $.uncss(UNCSS_OPTIONS)))
- .pipe($.if(PRODUCTION, $.cssnano()))
+ .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 = {
+ module: {
+ rules: [
+ {
+ test: /.js$/,
+ use: [
+ {
+ loader: 'babel-loader'
+ }
+ ]
+ }
+ ]
+ }
+}
// Combine JavaScript into one file
// In production, the file is minified
function javascript() {
- return gulp.src(PATHS.javascript)
+ return gulp.src(PATHS.entries)
+ .pipe(named())
.pipe($.sourcemaps.init())
- .pipe($.babel())
- .pipe($.concat('app.js'))
+ .pipe(webpackStream(webpackConfig, webpack2))
.pipe($.if(PRODUCTION, $.uglify()
.on('error', e => { console.log(e); })
))
@@ -135,7 +152,7 @@
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/assets/scss/**/*.scss').on('all', gulp.series(sass, 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));
diff --git a/package.json b/package.json
--- a/package.json
+++ b/package.json
@@ -2,23 +2,31 @@
"name": "foundation-zurb-template",
"version": "1.0.0",
"description": "Official ZURB Template for Foundation for Sites.",
- "main": "gulpfile.js",
+ "main": "gulpfile.babel.js",
"scripts": {
"start": "gulp",
"build": "gulp build --production"
},
"author": "ZURB <foundation@zurb.com>",
"license": "MIT",
+ "dependencies": {
+ "foundation-sites": "~6.4.1",
+ "jquery": ">=3.0.0",
+ "what-input": "^4.1.3",
+ "motion-ui": "~1.2.2"
+ },
"devDependencies": {
+ "babel-core": "^6.24.1",
+ "babel-loader": "^6.4.1",
"babel-preset-es2015": "^6.3.13",
"babel-register": "^6.7.2",
"browser-sync": "^2.10.0",
- "gulp": "gulpjs/gulp#4.0",
+ "gulp": "github:gulpjs/gulp#4.0",
"gulp-autoprefixer": "^3.1.0",
"gulp-babel": "^6.1.2",
+ "gulp-clean-css": "^3.3.1",
"gulp-cli": "^1.2.1",
"gulp-concat": "^2.5.2",
- "gulp-cssnano": "^2.1.0",
"gulp-extname": "^0.2.0",
"gulp-if": "^2.0.0",
"gulp-imagemin": "^2.2.1",
@@ -31,6 +39,9 @@
"panini": "^1.3.0",
"rimraf": "^2.4.3",
"style-sherpa": "^1.0.0",
+ "vinyl-named": "^1.1.0",
+ "webpack": "^2.6.1",
+ "webpack-stream": "^3.2.0",
"yargs": "^3.8.0"
},
"repository": {
@@ -42,7 +53,9 @@
"email": "foundation@zurb.com"
},
"babel": {
- "presets": ["es2015"]
+ "presets": [
+ "es2015"
+ ]
},
"private": true
}
diff --git a/readme.md b/readme.md
--- a/readme.md
+++ b/readme.md
@@ -8,7 +8,7 @@
- Handlebars HTML templates with Panini
- Sass compilation and prefixing
-- JavaScript concatenation
+- JavaScript module bundling with webpack
- Built-in BrowserSync server
- For production builds:
- CSS compression
@@ -40,6 +40,12 @@
The CLI will prompt you to give your project a name. The template will be downloaded into a folder with this name.
+Now `cd` to your project name and to start your project run
+
+```bash
+foundation watch
+```
+
### Manual Setup
To manually set up the template, first download it with Git:
@@ -53,7 +59,6 @@
```bash
cd projectname
npm install
-bower install
```
Finally, run `npm start` to run Gulp. Your finished site will be created in a folder called `dist`, viewable at this URL:

File Metadata

Mime Type
text/plain
Expires
Mon, Jan 27, 08:42 (2 h, 53 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2380201
Default Alt Text
D1326.diff (8 KB)

Event Timeline

Nasqueron DevCentral · If it had been much bigger the moon would have had a core of ice. · Powered by Phabricator