Toggles blocks within an html file depending on supplied values.
This plugin requires Grunt ~0.4.2
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-toggle --save-devOnce the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-toggle');In your project's Gruntfile, add a section named toggle to the data object passed into grunt.initConfig().
grunt.initConfig({
toggle: {
dev: {
options: {
show: ['dev']
}
},
dist: {
options: {
show: ['dist', 'prod']
}
}
},
});Type: Array
Default value: []
An array of strings which correspond to the toggle comment blocks you wish to keep in your html file. All blocks not listed will be removed.
Type: Boolean or Number
Default: false
Whether to copy or set the existing file permissions. Set to true to copy the existing file permissions. Or set to the mode, i.e.: 0644, that copied files will be set to.
Given the following html:
<html>
<head>
<title>toggle</title>
<!-- toggle:head -->
<script>console.log('head visible');</script>
<!-- endtoggle -->
</head>
<body>
<!-- toggle:body -->
<p>body visible</p>
<!-- endtoggle -->
</body>
</html>To only show the head toggle block, use the following options:
grunt.initConfig({
toggle: {
dev: {
options: {
show: ['head']
},
files: {
'index.html': ['index.html'],
}
}
},
});The output would be:
<html>
<head>
<title>toggle</title>
<script>console.log('head visible');</script>
</head>
<body>
</body>
</html>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.
1.0.0 - Initial release