Question

我尝试使用它将关键css应用到我的twig文件中。

我之前完成了这项工作，但我已经更新到gulp 4并重新组织了我的gulp文件。我还尝试包含多个维度。

非常感谢任何帮助。

                    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

当我在终端中运行gulp critical-css时出现此错误

[10:47:17]以下任务未完成：critical-css

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

我正在使用Critical

的0.7.1版

谢谢杰克。

Answer 1

查看前四行：

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

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

您定义了名为function的{{1}}和var。将您命名为critical或其他任何内容。
您使用criticalCss只有一个参数。可能在这里遗漏了一些东西。
path.join只能获取选项对象，而不是路径。您想要critical.stream而不是return gulp.src。
return critical未返回critical.generate，因此您无法将其传递给stream.Transform。您希望在this example中使用stream.pipe()。

Gulp Critical CSS和Twig文件

1 个答案: