使用gulp将多个haml文件编译成一个html

使用gulp将多个haml文件编译成一个html,html,gulp,haml,Html,Gulp,Haml,我已经让gulp正确地编译和缩小了我的scss和js文件,但在我的整个生命周期中,我似乎无法使用gulp haml模块正确地编译haml文件 my gulpfile.js中的相应代码如下所示: gulp.task('haml', function() { gulp.src('.app/**/*.haml') .pipe(plumber()) .pipe(haml()) .pipe(gulp.dest('./hamltest')); }); gulp.task('scripts',

我已经让gulp正确地编译和缩小了我的scss和js文件,但在我的整个生命周期中,我似乎无法使用gulp haml模块正确地编译haml文件

my gulpfile.js中的相应代码如下所示:

gulp.task('haml', function() {
 gulp.src('.app/**/*.haml')
  .pipe(plumber())
  .pipe(haml())
  .pipe(gulp.dest('./hamltest'));
});

gulp.task('scripts', [
  'styles', 
  'app',
  'haml'
]);

gulp.task('watch', function() {
 gulp.watch([
    './styles/',
    '.app/**/*.js',
    '.app/**/*.haml'
],
[
    'styles',
    'app',
    'haml'
 ]);
});

gulp.task('default', [
 'styles', 
 'scripts',
 'haml', 
 'watch'
]);
我已经设置了所有的gulp变量,正在运行:

  • 大口喝火腿-v 0.1.6
  • haml-v0.4.3
  • 大口喝CLI-第1.2.2版
  • 本地-第3.9.1节
使用命令:$gulpinterminal运行所有操作

在这一点上,我想知道是否有可能将多个haml文件编译成一个html,或者将多个haml文件编译成一个主haml文件,然后渲染成html

使用haml分部是更好的方法吗?这整件事有可能一饮而尽吗?如有任何见解,将不胜感激


其他信息:我还尝试使用pipe order()和pipe concat()函数

与gulp haml一起编译Ruby代码,如:

= Haml::Engine.new(File.read('./includes/menu-main.haml')).render
因为GulpHaml没有完整的Ruby引擎功能。如果您想使用Ruby,请下载并安装它,然后为它安装haml(但是Ruby请求非常慢~1-3s)。或者,使用其他一些模板器,比如gulp file include,这样您就可以编译并包含已编译的.HTML文件(我使用的是gulp jhaml,它与gulp haml具有相同的功能):

您也可以尝试使用本机函数include。-以前被称为“玉”

var haml        = require('gulp-jhaml'),
    gih         = require('gulp-include-html'),
    browserSync = require('browser-sync');

gulp.task('haml', function() {
  return gulp.src(['source-folder/*.haml'])
    .pipe(haml({}, {eval: false}))
    .on('error', function(err) {
      console.error(err.stack) 
    })
    .pipe(gulp.dest('source-folder/html'));
});
gulp.task('html-include', ['haml'], function () {  
  gulp.src(['source-folder/html/*.html'])
    .pipe(gih({
      prefix: '@@'
    }))
    .pipe(gulp.dest('result-folder'));
});
gulp.task('watch', ['html-include', 'browser-sync'], function() {
  gulp.watch('source-folder/*.haml', ['html-include']);
  gulp.watch('result-folder/*.html', browserSync.reload);
});
gulp.task('default', ['watch']);