wildhoney / gulp-processhtml Goto Github PK
View Code? Open in Web Editor NEWProcess html files at build time to modify them depending on the release environment
License: MIT License
Process html files at build time to modify them depending on the release environment
License: MIT License
Sorry, not very clear from the README.md how to use this plug in. Where would environment specific settings go?
Thank you.
All targets are processed regardless of the environment passed in
i'm trying to use this plugin to process a directory:
gulp.task('html', function () {
gulp.src('src/*.html')
.pipe(processhtml())
.pipe(gulp.dest('dist'));
});
but it seems i need to give a specific output file.
[gulp] 'html' errored after 3.99 ms Missing fileName option for gulp-processhtml
most other plugins seem to allow just piping into the output dest
// Images
gulp.task('images', function() {
return gulp.src('src/images/**/*')
.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
.pipe(gulp.dest('dist/images'))
.pipe(notify({ message: 'Images task complete' }));
});
i saw this answer but it seems a lot of work for just dealing with a group of files, is this not natively supported by the plugin?
Hello! I just pulled a boilerplate repository that uses this package and it suddenly stopped building.
The error I'm getting is this:
TypeError: Cannot read property 'customBlockTypes' of undefined
at module.exports (/Users/frue/gits/base2/node_modules/gulp-processhtml/index.js:8:17)
at Gulp.<anonymous> (/Users/frue/gits/base2/gulpfile.js:81:11)
at module.exports (/Users/frue/gits/base2/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:34:7)
at Gulp.Orchestrator._runTask (/Users/frue/gits/base2/node_modules/gulp/node_modules/orchestrator/index.js:273:3)
at Gulp.Orchestrator._runStep (/Users/frue/gits/base2/node_modules/gulp/node_modules/orchestrator/index.js:214:10)
at /Users/frue/gits/base2/node_modules/gulp/node_modules/orchestrator/index.js:279:18
at finish (/Users/frue/gits/base2/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:21:8)
at module.exports (/Users/frue/gits/base2/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:60:3)
at Gulp.Orchestrator._runTask (/Users/frue/gits/base2/node_modules/gulp/node_modules/orchestrator/index.js:273:3)
at Gulp.Orchestrator._runStep (/Users/frue/gits/base2/node_modules/gulp/node_modules/orchestrator/index.js:214:10)
You can also take a look at my boilerplate project here: base2.
I'm not sure why this is suddenly breaking and believing that I have a customBlockType—I am not using them. My options hash was empty previously: processhtml()
.
Thoughts?
So, using something like this
<!-- build:js app.min.js -->
<script src="app.js"></script>
<script src="module1.js"></script>
<script src="module2.js"></script>
<!-- /build -->
You achieve nice replacement in your template file. How to cancat files to app.min.js
based on template script data?
I've upload my project here: https://github.com/mcmimik/Test-for-processhtml-bug
There is one file with multiple included templates (.htm), that include other files (.svg).
The result is: https://monosnap.com/file/3yokG0sxmPkevKudXMTsZkbvTmaWdN
I've spent plenty hours to figure out what's wrong, but it's not clear for me. Could you please help me?
Hi!
Just detected this issue... If I have the following rule:
<!--build:[src] modules/main.js-->
<script src="../../bower_components/requirejs/require.js" data-main="modules/main"></script>
<!--/build-->
I'll get a script tag without the data-main attr:
<script src="modules/main.js"></script>
The problem is that the regexp from index.js#L19:
reg = new RegExp('(\\s*(?:' + section.attr + ')=[\'"])(.*)?(".*)', 'gi');
Notice that ?
after the selection group? Changing that to (.*?)
takes the smallest possible group, preventing the replacement to remove other attributes on the target tag.
Replace deprecated dependency gulp-util
gulp-util
has been recently deprecated. Continuing to use this dependency may prevent the use of your library with the latest release of Gulp 4 so it is important to replace gulp-util
.
The README.md lists alternatives for all the components so a simple replacement should be enough.
Your package is one of the most popular packages still relying on gulp-util
, it would be good to publish a fixed version to npm as soon as possible.
See:
I'm following the example in the README verbatim -- I'm pretty sure -- and the remove directive is not working.
My task is,
gulp.task('process html', function() {
gulp.src('./build/index.html')
.pipe(processhtml({process: true}))
.pipe(gulp.dest('./dist'));
});
the html is,
....
<body>
....
<!--build:remove-->
<script src="/angular-mocks.js"></script>
<script src="http://localhost:35729/livereload.js"></script>
<!--/build-->
</body>
Any guidance would be appreciated.
Carriage returns are preventing replacements from executing.
Is it possible to replace blocks with text? something similar to:
Source:
<!-- build:replace '{include header.tpl}' -->
<!DOCTYPE html>
<html>
<head></head>
<!-- /build -->
<body>...</body></html>
Build:
{include header.tpl}
<body>...</body></html>
Hi, ive got a problem with your include Function, it cant find html files outside of the _source Folder. I tried to fix this part:
include: function (content, section, line, asset) {
var file = fs.readFileSync(path.join(__dirname, section.asset), 'utf8')
, i
, l;
// return content.replace(line, section.indent + file.toString().trim());
l = line.length;
while ((i = content.indexOf(line)) !== -1) {
content = content.substring(0, i) +
section.indent + file.toString().trim() + content.substring(i + l);
}
return content;
}
with this:
include: function (content, section, line, asset) {
var base = path.dirname(this.filepath).toString();
var filepath = path.join(base, section.asset);
var file = fs.readFileSync(filepath, 'utf8')
, i
, l;
// return content.replace(line, section.indent + file.toString().trim());
l = line.length;
while ((i = content.indexOf(line)) !== -1) {
content = content.substring(0, i) +
section.indent + file.toString().trim() + content.substring(i + l);
}
return content;
}
I think in the grunt version it works fine but here its restricted via the __dirname.
becomes
Error: ENOENT, no such file or directory 'D:\svn\m\xxx_source\node_modules\inc\module\head.html'
(thank you for the awesome processhtml!!)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.