grunt-staticfy
Staticfy your website
Getting Started
This plugin requires Grunt ~0.4.4 and phantomjs
If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
npm install grunt-staticfy --save-devOnce the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-staticfy');The "staticfy" task
Overview
In your project's Gruntfile, add a section named staticfy to the data object passed into grunt.initConfig().
grunt.initConfig({
staticfy: {
options: {
// Task-specific options go here.
},
your_target: {
// Target-specific file lists and/or options go here.
},
},
});Options
options.inject_script
Type: function
Default value: function(){}
options.onfinish
Type: function
Default value: function(str){return str;}
Usage Examples
Default Options
grunt.initConfig({
staticfy: {
staticfy_simple_page: {
files: {
'dest.html': ['original.html']
}
}
}
});Here is the a html with script:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
document.writeln('success');
</script>
</body>
</html>The script on page document.writeln('success'); would be executed and the compiled page is:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
document.writeln('success');
</script>
success
</body>
</html>Custom Options
option.inject_script
Once the page is loaded, the inject script would be executed.
grunt.initConfig({
staticfy: {
option_inject_script: {
options: {
inject_script: function () {
document.body.innerHTML = 'this line is made by inject script';
}
},
files: {
'dest.html': ['original.html']
}
}
}
});This is the original html, no script on page.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
original text
</body>
</html>The inject script document.body.innerHTML = 'this line is made by inject script'; would be executed, so the compiled html is:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
this line is made by inject script
</body>
</html>option.onfinish
grunt.initConfig({
staticfy: {
option_on_finish: {
options: {
onfinish: function (str) {
grunt.log.writeln(str.replace(/\<!-- remove start --\>[\w\W]*\<!-- remove end --\>/gi, ''));
return str.replace(/\<!-- remove start --\>[\w\W]*\<!-- remove end --\>/gi, '');
}
},
files: {
'dest.html': ['original.html']
}
}
}
});Original html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- remove start -->
this will be remove
<!-- remove end -->
this will not be remove
</body>
</html>Compiled html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
this will not be remove
</body>
</html>Contributing
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.
- Fork it
- Create your feature branch (
git checkout -b my-new-feature) - Commit your changes (
git commit -am 'Add some feature') - Push to the branch (
git push origin my-new-feature) - Create new Pull Request
Release History
(Nothing yet)