gulp-html-builder

0.1.0 • Public • Published

gulp-html-builder

NPM version Downloads cise

combo and merge css and js to html. no matter the file is online or not. 对页面中引入的css文件和js文件进行合并并压缩到新文件

Features

  • 根据 builder 注释进行合并压缩
  • 自由控制新文件路径和html中引入新文件路径

Usage

var gulp = require('gulp');
var htmlBuilder = require('gulp-html-builder');
 
gulp.src('src/buildJs.html')
    .pipe(htmlBuilder({
        jsDir: 'dist/assets/js',
        filterPath: 'dist/'
    }))
    .pipe(gulp.dest('dist'));
 
});

Html

 
    <!-- builder: app.min{{ .$hash }}.css -->
    <link rel="stylesheet" href="assets/css/a.css"/>
    <link rel="stylesheet" href="assets/css/b.css" ignore/>
    <!-- builder end -->
 
    <!-- builder: main{{ _$hash }}.js -->
    <script src="assets/js/a.js"></script> 
    <script src="assets/js/b.js"></script> 
    <script src="assets/js/c.js"></script> 
    <!-- builder end -->

output

Alt text

Options

 
gulp.task('build.html', function(){
 
    gulp.src('src/build.html')
        .pipe(htmlBuilder({
            //编译合成后的根目录
            baseDir: 'dist',
            //css文件编译合成后的存放目录,base存在则相对于base:  'dist/assets/css'
            cssDir: 'assets/css',
            //js文件编译合成后的存放目录,base存在则相对于base:  'dist/assets/js'
            jsDir: 'assets/js',
            //为了在html页面中能正确引入对应合成后的文件,
            //需要对合成后写入的路径进行过滤,
            //filterPath就是过滤目录的,让合成后的文件相对于编译后的html目录查找
            filterPath: 'dist/'
        }))
        .pipe(gulp.dest('dist'));
 
});
 
//gulp.task('default', ['build.html']);
 

License

ISC

Readme

Keywords

Package Sidebar

Install

npm i gulp-html-builder

Weekly Downloads

1

Version

0.1.0

License

ISC

Last publish

Collaborators

  • rodey