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和樹枝文件

回答

相關問題