让premailer-gulp-juice和gulp-pug很好地协同工作

时间:2017-05-16 14:05:35

标签: node.js gulp pugjs

这是我的第一篇文章,所以如果我没有正确地做到这一点,我道歉。我确实搜索了与我的问题有关的条款,但找不到任何东西。

我正在研究的是使用nodejs和gulp构建电子邮件构建工具。

我的文件结构如下:

工作目录:

  • templates / client / email-type / email.pug
  • 模板/客户端/电子邮件型/ style.scss

构建目录:

  • 建立/客户端/电子邮件型/ email.html
  • 建立/客户端/电子邮件型/ style.css中

我正在使用gulp-sass渲染香草css,效果很好。 我使用gulp-pug渲染html,效果很好。

现在尝试使用premailer-gulp-juice来内联在渲染的html文件中链接的CSS是行不通的,除非我在html文件中指定了确切的路径。

由于我正在尝试为多个客户端和多个电子邮件文件设置环境,因此我不能那么具体。

我的问题是我收到了“找不到文件。跳过style.css”错误。

来自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'));
});

我的gulpfile看起来像这样:

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 () {});

我总是收到这个错误:

[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

我的html文件链接到由gulp-sass在build文件夹下输出的style.css文件,所以它实际上是:

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

0 个答案:

没有答案