grunt-codekit
Advanced tools
Grunt plugin for compiling Kit files and concatenating javascript
###Install the plugin
npm install grunt-codekit --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-codekit');
The plugin supports compiling templates written using the Kit language of CodeKit&trade. You can use both short form and long form when specifying input and output destination. You can use both short form and long form when specifying input files and output destinations.
Using short form (see below), the output files will be placed in the dest directory
and have the same names as the input files, just with a .html extension. When using
the long form you can explicitly specify the full name and path of each output file.
There is nothing in the way of mixing and matching the two styles.
As with all Grunt plugins, you can specify an options object, either for all tasks
or for each task. There is currently just one option:
compilePrefixed - Files starting with an underscore (such as _header.kit),
so called partials, are normally not considered for compilation. By setting this option
to true you can override this setting and still compile these files (default false).grunt.initConfig({
codekit: {
globbed_example_config : {
src : 'templates/**/*.kit',
dest : 'build/html/'
},
explicit_output_names: {
files : {
'build/index.html' : '/templates/my_special_index.kit'
}
},
build_with_underscored_files : {
options : { compilePrefixed : true },
files : {
'build/about.html : '_about.kit',
'build/index.html : '_index.kit'
}
}
},
});
Using Penthouse one can generate a file containing the critical path css, which can dramatically impact your site's speed and therefore your page ranking in Google.
You still need a way of embedding that CSS, though, and one way of doing that is using the Kit language. An example on how this kit file might look is as follows
<html>
<head>
<title><!-- @title --></title>
<!-- embed critical path css generated by penthouse -->
<style>
<!--@include critical.css -->
</style>
</head>
<body>
<!-- @include _header.kit -->
<!-- @include _navbar.kit -->
The main text of the page
<!-- @include _footer.kit -->
</body>
</html>
The Kit language is a simple html templating language used in the commercial program CodeKit. It imports files into other html files and does simple variable substitution. Since Bryan Jones made it open source it has seen support from several other programs, among those PrePros and implementations in Python and Javascript. This plugin makes it possible to compile these files using Grunt.
FAQs
Grunt plugin that compiles Kit files
The npm package grunt-codekit receives a total of 8 weekly downloads. As such, grunt-codekit popularity was classified as not popular.
We found that grunt-codekit demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports PHP with full Composer and Packagist integration, enabling developers to search packages, generate SBOMs, and protect their PHP dependencies from supply chain threats.
Security News
An AI agent is merging PRs into major OSS projects and cold-emailing maintainers to drum up more work.
Research
/Security News
Chrome extension CL Suite by @CLMasters neutralizes 2FA for Facebook and Meta Business accounts while exfiltrating Business Manager contact and analytics data.