Tuesday 16 May 2017

Getting premailer-gulp-juice and gulp-pug working nicely together

this is my first post so I apologize if I do not do this correctly. I did search for terms relating to my issue and couldn't find anything.

What I am working on is building an email building tool using nodejs and gulp.

My file structure is like so:

Working directory:

  • templates/client/email-type/email.pug
  • templates/client/email-type/style.scss

Build directory:

  • build/client/email-type/email.html
  • build/client/email-type/style.css

I am using gulp-sass to render vanilla css, which works fine. I am using gulp-pug to render html, which works fine.

Now trying to use premailer-gulp-juice to inline the CSS that is being linked to within the rendered html file is just not working, unless I specify the exact path in the html file.

Since I am trying to set up an environment for multiple clients, and multiple email files, I can't be that specific.

My issue is that I am getting a "File not found. Skipping style.css" error.

Example from npmjs:

gulp.task('bootloader', function(){
  gulp.src('./app/templates/bootloader.jade')
    .pipe(jade({pretty: true}))
    .pipe(gulp.dest('./.build'))
    .pipe(juice())
    .pipe(gulp.dest('./.build'));
});

My gulpfile looks like this:

var gulp = require('gulp');
var sass = require('gulp-sass');
var pug = require('gulp-pug');
var juice = require('premailer-gulp-juice');

gulp.task('sass', function () {
  return gulp.src('./templates/**/*.scss')
  .pipe(sass().on('error', sass.logError))
  .pipe(gulp.dest('./build'));
});

gulp.task('render', ['sass'], function () {
  return gulp.src(['./templates/**/*.pug'])
  .pipe(pug({
    client: false,
    pretty: true
  }))
  .pipe(gulp.dest('./build'))
  .pipe(juice())
  .pipe(gulp.dest('./build'));
});

gulp.task('default', ['sass', 'render'], function () {});

I always get this error:

[09:53:08] Using gulpfile ~/Desktop/Dev/email/gulpfile.js
[09:53:08] Starting 'sass'...
[09:53:08] Finished 'sass' after 38 ms
[09:53:08] Starting 'render'...
**Not found, skipping: style.css**
[09:53:09] Finished 'render' after 137 ms
[09:53:09] Starting 'default'...
[09:53:09] Finished 'default' after 6.76 μs

My html file is linking to the style.css file that is outputted by gulp-sass under the build folder, so it is literally:

<link rel="stylesheet" type="text/css" href="style.css">



via Stephen Provenzano

No comments:

Post a Comment