e-jigsaw / gulp-riot

gulp plugin for riot

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Cannot compile a nested tag

stnight opened this issue · comments

I tested to compile a nested tag that goes like this:

<story>
    <post></post>
    <comments></comments>
</story>

But i think base from the gulp-riot's capability it doesn't support it.

@stnight I used to like below

gulp.src(paths) // like ['components/story.tag', 'components/post.tag'..., 'index.js']
  .pipe(riot(...))
  .pipe(concat('index.js')) // gulp-concat
  .pipe(gulp.dest)

and index.js is just riot.mount('*')

It is might be works.

Thanks

@e-jigsaw your method doesn't work :(

@stnight First you need to concatenating all of the tag files into one single tag file, here is example gulp tasks


const del = require( 'del' );
const gulp = require( 'gulp' );
const riot = require('gulp-riot');
const concat = require('gulp-concat');
const tagPath = './src/tags';
const jsPath = './src/js';
const bundleName = 'bundle'; // the file name for concatenating all tag file
const tagBundle = `${tagPath}/${bundleName}.tag`;
conse jsBundle = `${jsPath}/${bundleName}.js`;


/**
 * GULP RIOT TASKS
 */

// Remove Previous Bundled tag file and compiled js file
gulp.task( 'riot:clean', () =>
	del( [ jsBundle, tagBundle ] )
);

// Combine all tag files into one single tag file and put it in the ./src/tags/ directory
gulp.task( 'riot:concat', [ 'riot:clean' ], () =>
    gulp.src( [ `${tagPath}/**/*.tag` ] )
        .pipe( concat( `${bundleName}.tag`  ) )
	.pipe( gulp.dest( tagPath ) )
);

// Compile the concatenated tag file which is ./src/tags/bundle.tag
gulp.task( 'riot', [ 'riot:concat' ], () =>
    gulp.src( [ tagBundle ] )
        .pipe(riot())
	.pipe( gulp.dest( jsPath ) )
);