Làm cách nào để biên dịch các mẫu ria mép với gulp?

Tôi tạo nguyên mẫu của các trang HTML tĩnh với Mustache/Sass/Compass-watch dưới Ruby. Thiết lập này rất chậm, vì vậy tôi muốn chuyển sang xây dựng mọi thứ với Gulp. Tôi quản lý để có nó xây dựng Sass, nhưng không phải Mustache. Nó chỉ không thấy partials trong các mẫu ria mép. cấu trúc tập tin của tôi là như thế này:Làm cách nào để biên dịch các mẫu ria mép với gulp?

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

nơi index.mustache là:

{{> partials/head }} 

<body> 
    {{> partials/header }} 

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

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

    {{> partials/footer }} 

</body> 
</html>

gulpfile.js tôi đi như thế này:

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']); 
});

Vì vậy, khi tôi chạy gulp trong giao diện điều khiển nó xây dựng scss-> css tốt và đồng hồ cho những thay đổi, nhưng đối với ria mép nó xây dựng các thẻ html nhưng không partials và nó cũng không xem cho những thay đổi trong các tập tin ria mép.

Rõ ràng là có sự cố với tác vụ ria mép. Xin hãy giúp tôi hiểu những gì tôi đang thiếu ở đây. Tôi rất mới với người chạy nhiệm vụ, không bao giờ sử dụng Gulp/Grunt trước đây.

Nguồn

2015-06-19 Andrey

Vì vậy, tôi đã tìm ra giải pháp. Để tạo đồng hồ gulp cho những thay đổi trên bộ ria mép, tôi phải thay đổi gulp.watch thành gulp.watch('./templates/**/*.mustache', ['mustache']); Và để làm cho gulp-ria mép cộng với xem partials tôi cần phải tạo thủ công một đối tượng có tên và đường dẫn và chuyển nó thành tham số thứ ba để công việc ria mép. Và đó là điều tuyệt vời, bởi vì không ai muốn làm một công việc thủ công, đúng không?

Dù sao gulpfile.js phải trông như thế này:

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']); 
});

Và sau đó trong các tập tin bộ ria mép của tôi, tôi đã phải đặt tên partials từ đối tượng đó:

{{> head }} 

<body> 
    {{> header }} 

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

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

    {{> footer }} 

</body> 
</html>

Bây giờ tất cả mọi thứ hoạt động tốt.

Nguồn

2015-06-19 23:20:11 Andrey

tệp 'index.html' của bạn trông như thế nào? – ayjay

@ayjay, đó là một chủ đề cũ, tôi không có các tệp đó nữa. – Andrey

Tại cái nhìn đầu tiên, tôi sẽ nói bạn cần cập nhật nhiệm vụ của bạn với:

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

Liệu nó sửa chữa?

Nguồn

2015-06-19 22:57:55 jbdemonte

Không, điều đó không hữu ích. Xem giải pháp của riêng tôi mà tôi vừa đăng. Dù sao cũng cảm ơn bạn. – Andrey

Điều này không làm gì cả. –

Làm cách nào để biên dịch các mẫu ria mép với gulp?

Trả lời

Các vấn đề liên quan