Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feature - Allow for layouts to have different CSS files via prefix workflow, enables you to have different/multiple template styles in same project #25

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Feature - Allow for layouts to have different CSS files via prefix workflow, enables you to have different/multiple template styles in same project #25

Changes from 2 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
6f91796
Upgrade/fix allows multiple app.css files
AndrewEQ Aug 26, 2016
323733e
Allow for layouts to have different CSS files via prefix workflow, en…
AndrewEQ Aug 26, 2016
fde4312
Removed the stylesheet reference when inlining to prevent an error
AndrewEQ Dec 20, 2016
0344b04
fixed issue with prod
AndrewEQ Jan 23, 2017
4aaafe3
Merge remote-tracking branch 'zurb/master'
AndrewEQ Jan 24, 2017
09025fb
Synced with Zurb & Added new index generator
AndrewEQ Jan 24, 2017
5488a25
renamed function
AndrewEQ Jan 24, 2017
f100e0e
renamed index to not override any existing index.html
AndrewEQ Jan 24, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 48 additions & 6 deletions gulpfile.babel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,38 @@ import colors from 'colors';

const $ = plugins();

/* Enable/disable prefix workflow - allows for layouts to have different css references
but page names prefix must match css file name
e.g.
> scss/__invite.scss
.invite { background-color:#333333; ... }
...

> scss/invite.scss
@import 'settings';
@import 'foundation-emails';
@import '_invite';
...

> layouts/invite.html
...
<link rel="stylesheet" type="text/css" href="css/invite.css">
...

> pages/invite.html, invite2.html, invite_audience1.html
---
layout: invite
---
...

//So all the pages with the prefix "invite" will be inlined with the css from invite.css
*/
var PREFIX_WORKFLOW=true;

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

// Declar var so that both AWS and Litmus task can use it.
// Declare var so that both AWS and Litmus task can use it.
var CONFIG;

// Build the "dist" folder by running all of the above tasks
Expand Down Expand Up @@ -65,7 +93,7 @@ function resetPages(done) {

// Compile Sass into CSS
function sass() {
return gulp.src('src/assets/scss/app.scss')
return gulp.src('src/assets/scss/*.scss')
.pipe($.if(!PRODUCTION, $.sourcemaps.init()))
.pipe($.sass({
includePaths: ['node_modules/foundation-emails/scss']
Expand All @@ -82,10 +110,24 @@ function images() {
}

// Inline CSS and minify HTML
function inline() {
return gulp.src('dist/**/*.html')
.pipe($.if(PRODUCTION, inliner('dist/css/app.css')))
.pipe(gulp.dest('dist'));
function inline(done) {

if (PREFIX_WORKFLOW) {
var files = fs.readdirSync('./dist/css');
var prefix = '';
var result = done();
for(var i in files) {
prefix = files[i].slice(0, -4);
result = gulp.src('dist/**/' + prefix + '*.html')
.pipe($.if(PRODUCTION, inliner('dist/css/' + prefix + '.css')))
.pipe(gulp.dest('dist'));
}
return result;
} else {
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
Expand Down