Я использую Sass-версию Foundation for Emails для генерации электронных писем в формате HTML. Я сделал несколько небольших изменений в gulpfile и package.json, но по большей части это именно то, что указано в репозитории Foundation for Emails .
Я получаюошибка при попытке запустить npm run build
. Кажется, это что-то, что я добавил к своему шаблонному коду, но я не уверен, что это может быть.
Вот ошибка:
[13:48:22] Using gulpfile ~/Development/Work/foundation-email-stack-sass-workflow/gulpfile.babel.js
[13:48:22] Starting 'default'...
[13:48:22] Starting 'build'...
[13:48:22] Starting 'clean'...
[13:48:22] Finished 'clean' after 11 ms
[13:48:22] Starting 'pages'...
[13:48:23] Finished 'pages' after 525 ms
[13:48:23] Starting 'sass'...
[13:48:35] Finished 'sass' after 12 s
[13:48:35] Starting 'images'...
[13:48:39] gulp-imagemin: Minified 27 images (saved 46.34 kB - 1.1%)
[13:48:39] Finished 'images' after 4.04 s
[13:48:39] Starting 'inline'...
(node:35425) [DEP0097] DeprecationWarning: Using a domain property in MakeCallback is deprecated. Use the async_context variant of MakeCallback or the AsyncResource class instead.
[13:48:41] The following tasks did not complete: default, build, inline
[13:48:41] Did you forget to signal async completion?
Вот мой gulpfile:
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';
import path from 'path';
import merge from 'merge-stream';
import beep from 'beepbeep';
import colors from 'colors';
var helpers = require('handlebars-helpers')();
var ext_replace = require('gulp-ext-replace');
const $ = plugins();
// Look for the --production flag
const PRODUCTION = !!(yargs.argv.production);
const EMAIL = yargs.argv.to;
// Declar var so that both AWS and Litmus task can use it.
var CONFIG;
// Build the "dist" folder by running all of the below 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));
// Build emails, then send to litmus
gulp.task('litmus',
gulp.series('build', creds, aws, litmus));
// Build emails, then send to EMAIL
gulp.task('mail',
gulp.series('build', creds, aws, mail));
// Build emails, then zip
gulp.task('zip',
gulp.series('build', zip));
// 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,hbs,handlebars}', '!src/pages/archive/**/*.{html,hbs,handlebars}'])
.pipe(panini({
root: 'src/pages',
layouts: 'src/layouts',
partials: 'src/partials',
helpers: 'src/helpers'
}))
.pipe(inky())
.pipe(ext_replace('.html'))
.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/**/*.scss')
.pipe($.if(!PRODUCTION, $.sourcemaps.init()))
.pipe($.sass({
includePaths: ['node_modules/foundation-emails/scss']
}).on('error', $.sass.logError))
.pipe($.if(PRODUCTION, $.uncss(
{
html: ['dist/**/*.html']
})))
.pipe($.if(!PRODUCTION, $.sourcemaps.write()))
.pipe(gulp.dest('dist/css'));
}
// Copy and compress images
function images() {
return gulp.src(['src/assets/img/**/*', '!src/assets/img/archive/**/*'])
.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,hbs,handlebars}').on('all', gulp.series(pages, inline, browser.reload));
gulp.watch(['src/layouts/**/*', 'src/partials/**/*']).on('all', gulp.series(resetPages, pages, inline, browser.reload));
gulp.watch(['../scss/**/*.scss', 'src/assets/scss/**/*.scss']).on('all', gulp.series(resetPages, sass, pages, inline, browser.reload));
gulp.watch('src/assets/img/**/*').on('all', gulp.series(images, browser.reload));
}
// Inlines CSS into HTML, adds media query CSS into the <style> tag of the email, and compresses the HTML
function inliner(css) {
var css = fs.readFileSync(css).toString();
var mqCss = siphon(css);
var pipe = lazypipe()
.pipe($.inlineCss, {
applyStyleTags: false,
removeStyleTags: true,
preserveMediaQueries: true,
removeLinkTags: false
})
.pipe($.replace, '<!-- <style> -->', `<style>${mqCss}</style>`)
.pipe($.replace, '<link rel="stylesheet" type="text/css" href="css/app.css">', '')
.pipe($.htmlmin, {
collapseWhitespace: true,
minifyCSS: true
});
return pipe();
}
// Ensure creds for Litmus are at least there.
function creds(done) {
var configPath = './config.json';
try { CONFIG = JSON.parse(fs.readFileSync(configPath)); }
catch(e) {
beep();
console.log('[AWS]'.bold.red + ' Sorry, there was an issue locating your config.json. Please see README.md');
process.exit();
}
done();
}
// Post images to AWS S3 so they are accessible to Litmus and manual test
function aws() {
var publisher = !!CONFIG.aws ? $.awspublish.create(CONFIG.aws) : $.awspublish.create();
var headers = {
'Cache-Control': 'max-age=315360000, no-transform, public'
};
return gulp.src('./dist/assets/img/*')
// publisher will add Content-Length, Content-Type and headers specified above
// If not specified it will set x-amz-acl to public-read by default
.pipe(publisher.publish(headers))
// create a cache file to speed up consecutive uploads
//.pipe(publisher.cache())
// print upload updates to console
.pipe($.awspublish.reporter());
}
// Send email to Litmus for testing. If no AWS creds then do not replace img urls.
function litmus() {
var awsURL = !!CONFIG && !!CONFIG.aws && !!CONFIG.aws.url ? CONFIG.aws.url : false;
return gulp.src('dist/**/*.html')
.pipe($.if(!!awsURL, $.replace(/=('|")(\/?assets\/img)/g, "=$1"+ awsURL)))
.pipe($.litmus(CONFIG.litmus))
.pipe(gulp.dest('dist'));
}
// Send email to specified email for testing. If no AWS creds then do not replace img urls.
function mail() {
var awsURL = !!CONFIG && !!CONFIG.aws && !!CONFIG.aws.url ? CONFIG.aws.url : false;
if (EMAIL) {
CONFIG.mail.to = [EMAIL];
}
return gulp.src('dist/**/*.html')
.pipe($.if(!!awsURL, $.replace(/=('|")(\/?assets\/img)/g, "=$1"+ awsURL)))
.pipe($.mail(CONFIG.mail))
.pipe(gulp.dest('dist'));
}
// Copy and compress into Zip
function zip() {
var dist = 'dist';
var ext = '.html';
function getHtmlFiles(dir) {
return fs.readdirSync(dir)
.filter(function(file) {
var fileExt = path.join(dir, file);
var isHtml = path.extname(fileExt) == ext;
return fs.statSync(fileExt).isFile() && isHtml;
});
}
var htmlFiles = getHtmlFiles(dist);
var moveTasks = htmlFiles.map(function(file){
var sourcePath = path.join(dist, file);
var fileName = path.basename(sourcePath, ext);
var moveHTML = gulp.src(sourcePath)
.pipe($.rename(function (path) {
path.dirname = fileName;
return path;
}));
var moveImages = gulp.src(sourcePath)
.pipe($.htmlSrc({ selector: 'img'}))
.pipe($.rename(function (path) {
path.dirname = fileName + path.dirname.replace('dist', '');
return path;
}));
return merge(moveHTML, moveImages)
.pipe($.zip(fileName+ '.zip'))
.pipe(gulp.dest('dist'));
});
return merge(moveTasks);
}
И мой package.json:
{
"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",
"zip": "gulp zip --production",
"litmus": "gulp litmus --production",
"mail": "gulp mail --production"
},
"author": "ZURB <foundation@zurb.com>",
"license": "MIT",
"dependencies": {
"foundation-emails": "^2.2.1",
"handlebars-helpers": "^0.10.0"
},
"devDependencies": {
"babel-core": "^6.3.26",
"babel-preset-es2015": "^6.3.13",
"babel-register": "^6.7.2",
"beepbeep": "^1.2.0",
"browser-sync": "^2.11.0",
"colors": "^1.1.2",
"gulp": ">=4.0",
"gulp-awspublish": "^3.0.1",
"gulp-cli": "^1.1.0",
"gulp-ext-replace": "^0.3.0",
"gulp-html-src": "^1.0.0",
"gulp-htmlmin": "^1.1.1",
"gulp-if": "^2.0.0",
"gulp-imagemin": "^2.4.0",
"gulp-inline-css": "^3.0.0",
"gulp-litmus": "0.0.7",
"gulp-load-plugins": "^1.1.0",
"gulp-mail": "^0.1.1",
"gulp-rename": "^1.2.2",
"gulp-replace": "^0.5.4",
"gulp-sass": "^2.1.0",
"gulp-sourcemaps": "^1.6.0",
"gulp-uncss": "^1.0.1",
"gulp-zip": "^3.2.0",
"inky": "^1.3.6",
"lazypipe": "^1.0.1",
"merge-stream": "^1.0.0",
"panini": "^1.3.0",
"rimraf": "^2.3.3",
"siphon-media-query": "^1.0.0",
"yargs": "^4.1.0"
},
"babel": {
"presets": [
"es2015"
]
}
}
Предложения?