Gulp关键CSS和树枝文件

我试图用这个将关键的CSS应用到我的树枝文件中。Gulp关键CSS和树枝文件

我以前的工作完美，但我已经更新到吞噬4，并重新构建我的吞噬文件（S）。我试图也包括多个维度。

任何帮助将不胜感激。

    var critical = require('critical').stream; 

      function critical() { 
       return critical(plugins.path.join(project.paths.base)) 
        .pipe(critical.generate({ inline: true, base: project.paths.views, dest: plugins.path.join(project.paths.views, 'html-header.twig'), src: plugins.path.join(project.paths.build, 'css/style.min.css'), 
        dimensions: [{ 
          height: 200, 
          width: 500 
         }, { 
          height: 900, 
          width: 1200 
         }] })) 
        .pipe(gulp.dest(project.paths.views)); 
      } 

      gulp.task('critical-css', critical);

这里是我的gulpfile.js

'use strict'; 
    /** 
    * Project Setup 
    * 
    * Setting up variables for project name and directories 
    */ 


    /****************************************************************************** 
     | > PLUGINS 
     ******************************************************************************/ 
    global.gulp = require('gulp'); 
    var HubRegistry = require('gulp-hub'); 
    var hub = new HubRegistry(['tasks/{,**/}*.js']); 

    global.plugins = { 
     path: require('path'), 
     rename: require('gulp-rename'), 
     changed: require('gulp-changed'), 
     concat: require('gulp-concat'), 
     browserSync: require('browser-sync'), 
     sourcemaps: require('gulp-sourcemaps') 
    }; 

    /****************************************************************************** 
    | > PROJECT VARIABLES 
    ******************************************************************************/ 

    global.project = { 
     name:  'base', 
     url:  'localhost:8888/base/', 
     phpSource: ['**/*.php', 'page-templates/**/*.php', '!library/**/*', '!wpcs/**/*', '!node_modules/**/*', '!vendor/**/*', '!assets/bower_components/**/*', '!**/*-min.css', '!assets/js/vendor/*', '!assets/css/*', '!**/*-min.js', '!assets/js/production.js'], 

     paths: { 
      base: __dirname, 
      build: plugins.path.join(__dirname, 'build'), 
      src: plugins.path.join(__dirname, 'src'), 
      vendors: plugins.path.join(__dirname, 'vendor'), 
      tasks: plugins.path.join(__dirname, 'tasks'), 
      views: plugins.path.join(__dirname, 'views'), 
      assets: plugins.path.join(__dirname, 'assets'), 

      assets: { 
       sass: plugins.path.join(__dirname, 'src/sass'), 
       images: plugins.path.join(__dirname, 'assets/img'), 
       js: plugins.path.join(__dirname, 'assets/js'), 
       css: plugins.path.join(__dirname, 'assets/css') 
      } 
     } 
    }; 

    gulp.registry(hub); 

    gulp.task('images', gulp.series('image-fallback', 'image-optimise', 'image-responsive'));

关键CSS需要进入的HTML header.twig

<!doctype html> 
    <!--[if lt IE 7]><html class="no-js ie ie6 lt-ie9 lt-ie8 lt-ie7" {{site.language_attributes}}> <![endif]--> 
    <!--[if IE 7]><html class="no-js ie ie7 lt-ie9 lt-ie8" {{site.language_attributes}}> <![endif]--> 
    <!--[if IE 8]><html class="no-js ie ie8 lt-ie9" {{site.language_attributes}}> <![endif]--> 
    <!--[if gt IE 8]><!--><html class="no-js" {{site.language_attributes}}> <!--<![endif]--> 
    <html id="csstyle"> 
    <head> 
     <meta charset="{{site.charset}}" /> 
      <title> 
       {% if wp_title %} 
        {{ wp_title }} - {{ site.name }} 
       {% else %} 
        {{ site.name }} 
       {% endif %} 
      </title> 
     <meta name="description" content="{{site.description}}"> 
     <link rel="stylesheet" href="{{site.theme.link}}/style.css" type="text/css" media="screen" /> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     {{function('wp_head')}}

我不能发布，因为我小有名气图片。

这里是我的文件结构：

File Structure

当我运行在终端我得到这个错误

[10时47分17秒]下面的任务没有完成，一饮而尽关键CSS ：关键 - css

[10:47:17]你忘记发信号异步完成？

我使用Critical

感谢杰克的0.7.1版本。

来源

2016-03-03 Henshall

综观前四行：

var critical = require('critical').stream; 

function critical() { 
    return critical(plugins.path.join(project.paths.base)) 
    .pipe(critical.generate(

你定义一个function和var并重命名为critical。命名你的功能criticalCss或其他任何东西。
您使用的是带有单个参数的path.join。可能在这里丢失了一些东西。
critical.stream只能选择一个选项对象，而不是路径。您需要return gulp.src而不是return critical。
critical.generate不会返回stream.Transform，因此您无法将其传递给stream.pipe()。您需要critical({})，如this example。

来源

2016-03-03 16:27:34

嘿，感谢您的评论，我现在已经改变了这一点。 var critical = require（'critical'）.stream; 函数critical（）{ return gulp.src（plugins.path.join（project.paths.views，'html-header.twig'）） .pipe（critical（{base：project.paths.views，inline ：true，css：[plugins.path.join（project.paths.build，'css/style.min.css'））}）） .pipe（gulp.dest（project.paths.views））; }; – Henshall

当我在终端中运行它时，我得到了这个。 AssertionError：使用前未定义的前向引用任务'critical-css' at tempTask（/ Users/beast/Documents/code/base/wp-content/themes/base-child/node_modules/undertaker-forward-reference/index （/ Users/beast/Documents/code/base/wp-content/.js：11：5） at bound（domain.js：287：14） at runBound（domain.js：300：12） at asyncRunner主题/ base-child/node_modules/async-done/index.js：36：18） at nextTickCallbackWith0Args（node.js：453：9） at process._tickCallback（node.js：382：13） at Function。 Module.runMain（module.js：449：11） – Henshall

延伸... 在启动时（node.js：140：18）在node.js：100 1:3 – Henshall

Gulp关键CSS和树枝文件

回答

相关问题