如何获得gulp-html-minifier的输出到gulp-inject-stringified-html？ [英] How to get gulp-html-minifier's output into gulp-inject-stringified-html?

问题描述

我试图将这两个gulp插件一起使用：

• gulp-html-minifier


• gulp-inject-stringified-html
  

或者换句话说，我试图将包含html片段的文件的内容在缩小后注入到我的javascript文件中。

当我试图运行
$ b

gulp build我得到这个：

Error：ENOENT：no such file or directory，open'C：\path\to\.temp\template.html'

这是我的情况的一个 repro 。我的文件夹结构：

$ b

  /src/app.js 
 / src / template。 html 
 /gulpfile.js 
 /package.json 
  

我的 gulpfile.js ：

  var gulp = require（'gulp'）; 
 var injectHtml = require（'gulp-inject-stringified-html'）; 
 var htmlmin = require（'gulp-html-minifier'）; 
 
 gulp.task（'minify'，[]，function（）{
 gulp.src（'src / *。html'）
 .pipe（htmlmin（）） 
 .pipe（gulp.dest（'。temp'））; 
}）; 
 $ b $ gulp.task（'default'，['minify']，function（）{
 gulp.src（'src / *。js'）
 .pipe（injectHtml （））
 .pipe（gulp.dest（'。build'））; 
}）; 
  

template.html 文件：

 < div>我的模板< / div> 
  

app.js 文件：

  var html = {gulp_inject：../.temp/template.html}; 
  

现在，如果我先手动运行 minify ，事情将按预期工作。从这我推测我没有正确使用Gulp。我认为我需要将 htmlmin 的结果输入到 injectHtml 方法中。但我看不出如何。

我怎样才能让这两个插件一起玩呢？

解决方案

您在minify任务中缺少返回。它应该看起来像这样：

  gulp.task（'minify'，[]，function（）{
 return gulp.src（'src / *。html'）
 .pipe（htmlmin（））
 .pipe（gulp.dest（'。temp'））; 
}）; 
  

没有返回，默认任务没有任何方法可以知道minify已完成，因此它可能在缩小的html文件被创建之前开始。

I'm trying to use these two gulp plugins together:

• gulp-html-minifier
• gulp-inject-stringified-html

Or put differently, I'm trying to inject the contents of files containing html fragments into my javascript files after they're minified.

When I'm trying to run a straight up gulp build I get this:

Error: ENOENT: no such file or directory, open 'C:\path\to\.temp\template.html'

Here's a repro of my situation. My folder structure:

/src/app.js
/src/template.html
/gulpfile.js
/package.json

My gulpfile.js:

var gulp = require('gulp');
var injectHtml = require('gulp-inject-stringified-html');
var htmlmin = require('gulp-html-minifier');

gulp.task('minify', [], function() {
    gulp.src('src/*.html')
        .pipe(htmlmin())
        .pipe(gulp.dest('.temp'));
});

gulp.task('default', ['minify'], function() {
    gulp.src('src/*.js')
        .pipe(injectHtml())
        .pipe(gulp.dest('.build'));
});

The template.html file:

<div>My Template</div>

The app.js file:

var html = { gulp_inject: "../.temp/template.html" };

Now, if I run minify manually first, things will work as expected. From this I speculate I'm not using Gulp correctly. I reckon I'd need to pipe the result of htmlmin into the injectHtml method. But I fail to see how.

How can I get these two plugins to play together nicely?

解决方案

You are missing a return in the minify task. It should look like that:

gulp.task('minify', [], function() {
    return gulp.src('src/*.html')
        .pipe(htmlmin())
        .pipe(gulp.dest('.temp'));
});

Without return, the default task doesn't have any way to know that minify finished, so it may start before the minified html file was created.

这篇关于如何获得gulp-html-minifier的输出到gulp-inject-stringified-html？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！