Is it possible to create files with pug?
lets take an example I want to create a folder "TestFolder".
This folder contains two files
Test.html - contains a button "alert"
Test.js- contain code for what happens when alert is clicked
now i want to create this folder with Pug and node
Sure you can write javascript with pug. Therefore you've got the script. tag. However the way you write javascript is not really different. Personally I create a javascript file and reference it from the pug file.
Javascript written in pug looks like this:
script.
console.log('Foo bar');
A javascript file referenced in a pugfile:
script(src="/js/analytics.js")
var local_data =!{JSON.stringify(data)} // Variable from the backend
In my opinion there should be abolutely no problem creating folders and .html as well as .js files, provided you are using some kind of Workflow CLI (like Gulp).
Creating HTMl is easy, as this is what PUG is supposed to do. If you want to place it in a new folder (that should be created and wasn't there before), use your workflow tool. Example:
gulp.task('pug', function () {
gulp.src('./app/pug/**/_html_*.pug')
.pipe(pug({
pretty: true
}))
.pipe(gulp.dest('./somenewfolder/anotherone'));
});
Creating JS is a little bit more tricky, but can also be achieved. Just generate your PUG (containing JS only)...:
gulp.task('pugtoJS', function () {
gulp.src('./app/pug/**/_js_*.pug')
.pipe(pug({}))
.pipe(gulp.dest('./somenewfolder/generatedscript'));
});
...and then change the file type using a renaming plugin like gulp-ext-replace.
Now the only thing to do is removing the <script> tags, in which your JS code lives. This can be done by hand or using an additional package, e.g. gulp-string-replace.
You see, it's all about chaining and integrating NPM-Packages into your Workflow.
Let me know if this works for you. Feel free to ask any questions you might have in the comments.
