wildhoney / gulp-processhtml Goto Github PK

View Code? Open in Web Editor NEW

77.0 7.0 15.0 197 KB

Process html files at build time to modify them depending on the release environment

License: MIT License

JavaScript 77.73% HTML 21.75% CSS 0.52%

gulp-processhtml's Introduction

gulp-processhtml

Gulp plugin uses Denis Ciccale's node-htmlprocessor to process/transform html files.

npm: npm install gulp-processhtml --save-dev

Gulpfile

var gulp = require('gulp'),
    processhtml = require('gulp-processhtml')
    opts = { /* plugin options */ };

gulp.task('default', function () {
    return gulp.src('./*.html')
               .pipe(processhtml(opts))
               .pipe(gulp.dest('dist'));
});

Example Usage

You might need to change some attributes in your html, when you're releasing for a different environment.

Using this plugin, you can transform this:

<!DOCTYPE html>
<html>
<head>
  <!-- build:css style.min.css -->
  <link rel="stylesheet" href="css/style.css">
  <!-- /build -->
</head>
<body>

  <!-- build:js app.min.js -->
  <script src="app.js"></script>
  <!-- /build -->

  <!-- build:remove -->
  <script src="http://192.168.0.1:35729/livereload.js?snipver=1"></script>
  <!-- /build -->

  <!-- build:replace 'Goodbye Livereload...' -->
  <script src="http://192.168.0.1:35729/livereload.js?snipver=1"></script>
  <!-- /build -->

</body>
</html>

To this:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.min.css">
</head>
<body>
  <script src="app.min.js"></script>
  Goodbye Livereload...
</body>
</html>

Credits

Denis Ciccale

gulp-processhtml's People

Contributors

Stargazers

Watchers

Forkers

kombucha kristoferjoseph designfrontier madastro indiche chrisantaki fabiendem azming mrhaze zebrafishlabs gourava29 dciccale ykurniawan rlugojr

gulp-processhtml's Issues

Attr regexp takes more than it should

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.

Sudden failure to complete processing...

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?

Cannot include some files

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?

Replace html block with text

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>

Can't Get Example Working

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.

How to use it?

Sorry, not very clear from the README.md how to use this plug in. Where would environment specific settings go?

Thank you.

How to cancat data with processhtml?

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?

Remove deprecated module gulp-util

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:

how to process a group of files?

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?

http://stackoverflow.com/a/23099944/1163694

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!!)