如何使用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編寫鬍鬚模板偏股？

回答

相關問題