Comments (5)
Thanks @trajche for your comments!
We decided that we don't want to implement the solution to the project because we're trying to keep it simple and clean.
This is something that can be added per project by developers if they need it. It's very specific.
Once again, thanks for your time and comments!
from bojler.
Hi @trajche, we had same issue during Marketo implementation.
We did few adjustments on one specific project, maybe this will be useful for you:
const gulp = require( 'gulp' ),
through = require( 'through2' ),
sass = require( 'gulp-sass' ),
gcmq = require( 'gulp-group-css-media-queries' ),
gutil = require( 'gulp-util' ),
juice = require( '@akzhan/gulp-juice' ),
del = require( 'del' ),
stripComments = require( 'gulp-strip-comments' ),
connect = require( 'gulp-connect' ),
path = require( 'path' ),
filesToSass = [
'source/sass/inlined.scss',
'source/sass/embedded.scss',
],
filesToWatch = [
'source/sass/**/*.scss',
'source/**/*.html',
];
// Ignore Marketo variables
if ( ! juice.codeBlocks ) {
juice.codeBlocks = {};
}
juice.codeBlocks.mkto = {
start: '${',
end: '}',
};
// Build SASS
gulp.task( 'build:sass', function( done ) {
'use strict';
return gulp.src( filesToSass )
.pipe(
sass( {
outputStyle: 'compressed',
} )
.on( 'error', gutil.log )
)
.pipe( gcmq() )
.pipe( gulp.dest( 'public/css/' ) )
.on( 'end', done );
} );
const replaceSpecials = function( file, enc, callback ) {
'use strict';
if ( file.isNull() ) {
return callback( null, file );
}
if ( file.isStream() ) {
return callback( null, file );
}
if ( file.isBuffer() ) {
let content = file.contents.toString();
content = content.replace( /\#curlyBracketOpen\#/g, '{' );
content = content.replace( /\#curlyBracketClose\#/g, '}' );
file.contents = new Buffer( content );
this.push( file );
}
callback();
};
// Inline CSS
gulp.task( 'inline:css', function( done ) {
'use strict';
return gulp.src( 'source/**/*.html' )
.pipe(
juice( {
applyHeightAttributes: false,
applyWidthAttributes: false,
webResources: {
relativeTo: path.resolve( __dirname, 'public/' ),
images: false,
svgs: false,
scripts: false,
links: false,
},
} )
.on( 'error', gutil.log )
)
.pipe( through.obj( replaceSpecials ) )
.pipe( gulp.dest( 'public/' ) )
.on( 'end', done );
} );
// Clean CSS
gulp.task( 'clean:css', function( done ) {
'use strict';
return del( [
'public/css/',
] )
.then( function() {
done();
} );
} );
// Clean HTML
gulp.task( 'clean:html', function( done ) {
'use strict';
return gulp.src( 'public/**/*.html' )
.pipe(
stripComments( {
safe: true,
trim: true,
} )
.on( 'error', gutil.log )
)
.pipe( gulp.dest( 'public/' ) )
.pipe( connect.reload() )
.on( 'end', done );
} );
// Default (Build)
gulp.task(
'default',
gulp.series( [
'build:sass',
'inline:css',
'clean:css',
'clean:html',
] )
);
// Start server w/ live reload
gulp.task( 'start', function( done ) {
'use strict';
connect.server( {
port: 8000,
root: 'public',
livereload: true,
} );
done();
} );
// Watch
gulp.task( 'watch', function( done ) {
'use strict';
gulp.watch(
filesToWatch,
gulp.series( [
'default',
] )
);
done();
} );
// Development mode
gulp.task(
'dev',
gulp.series( [
'default',
gulp.parallel( [
'start',
'watch',
] )
] )
);
// Clean project folder
gulp.task( 'clean', function( done ) {
'use strict';
return del( [
'public/*',
'!public/assets',
] )
.then( function() {
done();
} );
} );
Let me know if you need help with it :)
from bojler.
Many thanks Alen. Will test this and come back to you later today!
from bojler.
@alenvuletic I managed to get it working by using the replaceSpecials and using #curlyBracketOpen# and #curlyBracketClose# but I am unable to define codeBlocks on juice.
I tried to add it as an option in html.js:
function inline() {
return gulp.src( config.paths.html.inline.src )
.pipe(
juice( {
applyHeightAttributes: false,
applyWidthAttributesa: false,
xmlMode: true,
webResources: {
relativeTo: './dist',
images: false,
svgs: false,
scripts: false,
links: false,
},
codeBlocks: {
start: '${',
end: '}'
},
})
)
.pipe( through.obj( replaceSpecials ) )
.pipe( gulp.dest( config.paths.html.inline.dest ) );
}
But did not succeed. Any tips on how to use it with the current gulpfile (the one you shared seems like from an earlier Bojler version)?
from bojler.
Since I am not sure how to set Juice global settings, current hack for anyone reading this:
Add two functions, replaceSpecials which is ran before the inline-ing by Juice and then replaceSpecialsAgain which is ran after the inline-ing and removal of Marketo tags.
const replaceSpecials = function( file, enc, callback ) {
'use strict';
if ( file.isNull() ) {
return callback( null, file );
}
if ( file.isStream() ) {
return callback( null, file );
}
if ( file.isBuffer() ) {
let content = file.contents.toString();
content = content.replace( /\${/g, '#curlyBracketOpen#' );
content = content.replace( /}/g, '#curlyBracketClose#' );
file.contents = new Buffer.from( content );
this.push( file );
}
callback();
};
const replaceSpecialsAgain = function( file, enc, callback ) {
'use strict';
if ( file.isNull() ) {
return callback( null, file );
}
if ( file.isStream() ) {
return callback( null, file );
}
if ( file.isBuffer() ) {
let content = file.contents.toString();
content = content.replace( /\#curlyBracketOpen\#/g, '${' );
content = content.replace( /\#curlyBracketClose\#/g, '}' );
file.contents = new Buffer.from( content );
this.push( file );
}
callback();
};
Then in html.js replace the inline() function to:
function inline() {
return gulp.src( config.paths.html.inline.src )
.pipe( through.obj( replaceSpecials ) )
.pipe(
juice( {
applyHeightAttributes: false,
applyWidthAttributesa: false,
xmlMode: true,
webResources: {
relativeTo: './dist',
images: false,
svgs: false,
scripts: false,
links: false,
},
})
)
.pipe( through.obj( replaceSpecialsAgain ) )
.pipe( gulp.dest( config.paths.html.inline.dest ) );
}
If anyone figures out how to use codeBlocks please let me know :)
from bojler.
Related Issues (20)
- Update `README.md` header with centered logo and content HOT 1
- Update grid container and column philosophy HOT 1
- Bad bojler... HOT 6
- Add `Closed Issues` badge to `README.md`
- Update documentation links in `README.md` and `package.json` from `http://` to `https://`
- Update v4.0.0 change log date
- Signal gulp task async completion HOT 1
- Gmail isnt responsive due to escaped @ HOT 2
- Content in conditional comments gets removed HOT 1
- [feature request] pug templates HOT 1
- Gmail isn't responsive HOT 5
- Gmail ignores @media query blocks that contain class names with ":" or "@" HOT 2
- Gmail strips style away if there is nested @ declarations HOT 1
- Gmail responsive issue? HOT 2
- bojler buttons aren't clickable across the button HOT 3
- unable to disable eslint rules (Tabs) HOT 1
- Partials HOT 2
- How to work with remote images HOT 1
- youtube video lesson HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bojler.