如何使用gulp编写胡须模板偏股？

我在Ruby下制作了带有Mustache/Sass/Compass-watch的静态HTML页面原型。这个设置非常慢，所以我想转移到用Gulp构建所有东西。我设法建立了Sass，但不是胡子。它只是没有看到小胡子模板中的部分。我的文件结构是这样的：如何使用gulp编写胡须模板偏股？

. 
├── css 
├── scss 
├── index.html 
├── gulpfile.js 
└── templates 
    ├── index.mustache 
    └── partials 
     └── header.mustache

其中index.mustache是：

{{> partials/head }} 

<body> 
    {{> partials/header }} 

    <div class="wrap"> 
     {{> some_inner_partial }} 

     <div class="content"> 
      ... 
     </div> 
    </div> 

    {{> partials/footer }} 

</body> 
</html>

我gulpfile.js是这样的：

var gulp = require('gulp'); 
var sass = require('gulp-sass'); 
var sourcemaps = require('gulp-sourcemaps'); 
var mustache = require("gulp-mustache-plus"); 

// Gulp Sass Task 
gulp.task('sass', function() { 
    gulp.src('./scss/{,*/}*.{scss,sass}') 
    .pipe(sourcemaps.init()) 
    .pipe(sass({ 
     errLogToConsole: true 
    })) 
    .pipe(sourcemaps.write()) 
    .pipe(gulp.dest('./css')); 
}); 

// Gulp Mustache Task 
gulp.task('mustache', function() { 
    gulp.src("./templates/*.mustache") 
     .pipe(mustache({},{},{ 
      file_1: "partials/*.mustache" 
     })).pipe(gulp.dest("./")); 
}); 

gulp.task('default', ['sass', 'mustache'], function() { 
    gulp.watch('./scss/{,*/}*.{scss,sass}', ['sass']); 
    gulp.watch('./templates/{,*/}*.{mustache}', ['mustache']); 
});

所以，当我在控制台中运行gulp它构建scss-> css就好了，可以监视变化，但对于胡子而言，它会构建html标记，但不会构成部分，也不会监视胡须文件中的更改。

显然胡子任务有问题。请帮助我了解我在这里失踪的内容。我对任务跑步者非常陌生，以前从未使用Gulp/Grunt。

来源

2015-06-19 Andrey

所以我想出了解决方案。为了让胡须更换，我必须更改gulp.watch到gulp.watch('./templates/**/*.mustache', ['mustache']); 并且为了让大嘴胡子加看到偏分我需要手动创建一个部分名称和路径的对象，并将它作为第三个参数传递去胡子任务。这是很受欢迎的，因为没有人愿意做手动工作，对吧？

但无论如何，gulpfile.js必须是这样的：

var gulp = require('gulp'); 
var sass = require('gulp-sass'); 
var sourcemaps = require('gulp-sourcemaps'); 
var mustache = require("gulp-mustache-plus"); 

// Gulp Sass Task 
gulp.task('sass', function() { 
    gulp.src('./scss/{,*/}*.{scss,sass}') 
    .pipe(sourcemaps.init()) 
    .pipe(sass({ 
     errLogToConsole: true 
    })) 
    .pipe(sourcemaps.write()) 
    .pipe(gulp.dest('./css')); 
}); 

// Gulp Mustache Task 
gulp.task('mustache', function() { 
    gulp.src("./templates/*.mustache") 
     .pipe(mustache({},{},{ 
      head: "./templates/layout/head.mustache", 
      header: "./templates/modules/header.mustache", 
      ... etc.... //any oter partials 
     })).pipe(gulp.dest("./")); 
}); 

gulp.task('default', ['sass', 'mustache'], function() { 
    gulp.watch('./scss/{,*/}*.{scss,sass}', ['sass']); 
    gulp.watch('./templates/**/*.mustache', ['mustache']); 
});

然后在我的胡子文件，我不得不把谐音的名字从该对象：

{{> head }} 

<body> 
    {{> header }} 

    <div class="wrap"> 
     {{> some_inner_partial }} 

     <div class="content"> 
      ... 
     </div> 
    </div> 

    {{> footer }} 

</body> 
</html>

现在一切工作正常。

来源

2015-06-19 23:20:11 Andrey

你的'index.html'文件是什么样的？ – ayjay

@ayjay，这是一个老话题，我没有这些文件了。 – Andrey

在第一次看，我会说你需要更新你的任务：

gulp.task('mustache', function() { 
    gulp 
     .src("./templates/**/.mustache") 
     .pipe(gulp.dest("./")); 
});

是否解决？

来源

2015-06-19 22:57:55 jbdemonte

不，这没有帮助。查看我刚发布的自己的解决方案。不管怎么说，还是要谢谢你。 – Andrey

这完全没有做任何事情。 –

如何使用gulp编写胡须模板偏股？

回答

相关问题