Powered by GitBook

Otomatisasi dengan gulp.js

Menggabungkan file HTML

Plugin

Struktur Folder

proyek/
|-- inc/
|   |-- header.html
|   |-- footer.html
|-- pages/
|   |-- index.html
|   |-- about.html
|-- dist/
|   |-- index.html
|   |-- about.html
|-- gulpfile.js

Gulpfile.js

var gulp        = require('gulp');
var fileInclude = require('gulp-file-include');

// Gabungkan HTML
gulp.task('html', function() {
    // Baca file HTML dari folder `pages`
    return gulp.src('pages/*.html')
        // Menggunakan plugin `gulp-file-include`
        .pipe(fileInclude())
        // Tulis HTML ke folder `dist`
        .pipe(gulp.dest('dist'));
});

// Lakukan semua tugas
gulp.task('default', ['html']);

header.html

<!DOCTYPE html>
<head>
    <title>@@title</title>
</head>
<html>
    <body>

    </body>
</html>

index.html

@@include('../header.html', {
    'title': 'Utama'
})

<h1>Index.html</h1>

@@include('../footer.html')

about.html

@@include('../header.html', {
    'title': 'Tentang'
})

<h1>About.html</h1>

@@include('../footer.html')