grunt-wooha-html

self fed dev craft with bower,grunt,require HTML build plugin.

this plugin is used for version control,html compress,js\css inject.

Update log

• Version 2.0.2 add module.exports support with browserify

Getting Started

This plugin requires Grunt ~0.4.5

npm install grunt-wooha-html --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-wooha-html');

The "wooha_html" task

Overview

In your project's Gruntfile, add a section named wooha_html to the data object passed into grunt.initConfig().

    grunt.initConfig({
    	wooha_html: {
          options: {
          
          }
  		}
  	});

inject script or stylesheet

If you want inject some js or css file in html, You just need add a "inject" attribute on script tag of html.

    <script src="***" inject></script>
    <link rel="stylesheet" type="text/css" href="***" inject>

Options Quick Reference

Option	Description	Default
exportMode	is this project use 1:module.exports or 2:CMD or 3:react	1
env	which environment build for	'pro'
build	grunt build folder	'build'
version	version code	'' with out version control
main	page main js file	index.js
beautify	beautify html file	false
minify	html-minifier options.The minify option is useless when option beautify is true.More information seehtml-minifier	object

Usage

CommonJS mode

  wooha_html: {
      dist: {
        cwd: './demo/',
        src: ['**/*.html', '!**/*.jst.html'],
        dest: './html/',
        options: {
          version: '<%= version %>',
          env: '<%= env %>',
          build: "<%= buildBase %>",
          src: "<%= srcBase %>",
          main: "index",
          exportMode: 2,
          minify: {
              preserveLineBreaks: true,
              minifyCSS: true,
              minifyJS: true,
              maxLineLength: 1024
          },
          beautify: false
        }
      }
  }

Browserify module.exports mode

    wooha_html: {
      dist: {
        cwd: './demo/',
        src: ['**/*.html', '!**/*.jst.html'],
        dest: './html/',
        options: {
          exportMode: 1,
          version: '<%= version %>',
          minify: {
              preserveLineBreaks: true,
              minifyCSS: true,
              minifyJS: true,
              maxLineLength: 1024
          },
          processContent: function (html) {
            /*
            * 统计代码注入
            * */
            return html;
          }
        }
      }
    }

React web mode

    wooha_html: {
      dist: {
        cwd: './demo/',
        src: ['**/*.html', '!**/*.jst.html', "!ueditor/**/*.html"],
        dest: './html/',
        options: {
          version: '<%= version %>',
          exportMode: 3,
          minify: {
              preserveLineBreaks: true,
              minifyCSS: true,
              minifyJS: true,
              maxLineLength: 1024
          },
          beautify: true,
          processContent: function (html) {
            /*
            * 统计代码注入
            * */
            return html;
          }
        }
      }
    }

Project orga

• root
  • build -- build code folder
  • html -- built html folder
  • demo -- dev html folder
  • src
    • c -- lib folder
    • p -- page folder

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.

Release History

(Nothing yet)