Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including grunt-devcode with all npm packages installed. Try it out:

var gruntDevcode = require("grunt-devcode")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

grunt-devcode v0.0.4

Remove code blocks based on environment configuration

Devcode v.0.0.4

Changelog: v.0.0.4 - removed grunt-env dependency, changed configuration, devcode now supports 'grunt server' v.0.0.3 - upgraded grunt dependency

Usage with Yeoman grunt file:

Devcode is a fork of grunt-preprocess project, which has been re-written from scratch at the end. Due to the problems I had with that library, along with an excessive amount of code (additional dependency from "preprocess") and I suppose not fully tested functionality.


  npm install grunt-devcode

Loading devcode into grunt


Little watch task (livereload section) change:

  livereload: {
    files: [
      '<%= %>/{,*/}*.html',
      '{.tmp,<%= %>}/styles/{,*/}*.css',
      '{.tmp,<%= %>}/scripts/{,*/}*.js',
      '<%= %>/images/{,*/}*.{png,jpg,jpeg}'
    tasks: ['devcode:server','livereload']

We have added a 'devcode' task with 'server' environment. It is important to add this one before 'livereload'.

Server task configuration

  grunt.registerTask('server', [
    'devcode:server', // devcode before coffee or whatever You like, but using 'server' section.

Build task configuration

  grunt.registerTask('build', [
    'devcode:dist', // devcode after 'copy', or whatever You like if You know what are You doing.

Devcode configuration:

    devcode :
      options :
        html: true,        // html files parsing?
        js: true,          // javascript files parsing?
        css: true,         // css files parsing?
        clean: true,       // removes devcode comments even if code was not removed
        block: {
          open: 'devcode', // with this string we open a block of code
          close: 'endcode' // with this string we close a block of code
        dest: 'dist'       // default destination which overwrittes environment variable
      server : {           // settings for task used with 'devcode:server'
        options: {
            source: '<%= %>/',
            dest: '.tmp/',
            env: 'development'
      dist : {             // settings for task used with 'devcode:dist'
        options: {
            source: 'dist/',
            dest: 'dist/',
            env: 'production'

Devcode usage (html files):

<!-- devcode: !production -->
  <li class="right"><a href="#settings" data-toggle="tab">Settings</a></li>
<!-- endcode -->

this code will show for all environment types but production

Devcode usage (js and css files):

// devcode: !production
  body {
    background-color: red;
// endcode

this code will show for all environment types but production

Test server

  grunt server

Test build

  grunt build


- Tests
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free