1

我正在尝试使用它来将关键的 css 应用到我的树枝文件中。

我之前已经完美地工作了，但我已经更新到 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')}}

由于我的名声很小，我无法发布图像。

这是我的文件结构：

文件结构

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

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

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

我正在使用版本 0.7.1 的关键

谢谢杰克。

4

1 回答 1

0

查看前四行：

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

function critical() {
  return critical( plugins.path.join( project.paths.base ) )
    .pipe( critical.generate(
  • 您定义 afunction和 avar都命名为critical。命名您的功能criticalCss或其他任何内容。
  • 您正在使用path.join单个参数。可能在这里遗漏了一些东西。
  • critical.stream只能采用选项对象，而不是路径。你想要return gulp.src而不是return critical.
  • critical.generate不返回 a stream.Transform，所以你不能将它传递给stream.pipe(). 你想要critical({})像这个例子一样。
于 2016-03-03T16:27:34.740 回答