template-inline

0.3.5 • Public • Published

Grunt Plugin: template-inline

Grunt task for embedding html template as base64 or encodeURIComponent inside your js.

插件使用参见:

example/todoMvc的grunt配置

效果:

参见 https://github.com/pronebel/template-inline

如图所示,没有使用插件时,会加载模板文件。使用插件不会加载模板文件。

使用方式

1.参见:代码下的TodoMVC的grunt配置

2.原来的requirejs中的 "text!xxx/yyy.html"会被编译成 "tplin!html内容编码"。 TodoMVC中的Rrequirejs的目录中有个tplin文件,改动代码,根据编码方式进行解码实现。

注:html内容编码为读取的html的内容,根据编码方式配置生成编码后的内容。
目前支持base64,encodeURIComponent编码

项目中的grunt配置供参考构建应用思路:

module.exports = function(grunt) {
    "use strict";
    var jsFiles = [
        'js/app/**/*.js',
        'js/model/**/*.js',
        'js/module/**/*.js',
        'js/view/**/*.js'
    ];

    grunt.initConfig({
        jshint: {
            files: jsFiles
        },
        templateInline: {

            tpl: {

                files : [
                    {
                        expand: true,
                        cwd : 'js/',
                        src : ['*/**/*.js','!lib/comb.src/*.js'],
                        filter : 'isFile',
                        dest : '.tplin/'
                    }
                ],

                options: {
                    baseDir: "js/",
                    type:"base64" //base64 or uri
                }
            }
          
        },
        compass: {
            compile: {
                options: {
                    sassDir: 'sass',
                    cssDir: 'css',
                    environment: 'production'
                }
            }
        },
        clean: {
            css: [ 'css/*.css'] ,
            dist: [ 'dist/' ],
            tplin: [ '.tplin/' ]
        },
        uglify : {
            options: {
                mangle: {
                    except: ['require','exports','requirejs']
                }
            },
            build: {
              files:  [
                  {

                    expand: true,
                    cwd:'.tplin/',
                    src : ['**/*.js'],
                    dest: 'dist/'
                  }
              ]

            }
        }
    });





    grunt.loadNpmTasks('grunt-contrib-mincss');
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-compass');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('template-inline');




    grunt.registerTask("compile:js",['clean:dist','templateInline:tpl','uglify:build','clean:tplin']);
    grunt.registerTask("compile:css",['clean:css','compass:compile'])


    grunt.registerTask('default', ['compile:js' ]);

};

Readme

Keywords

none

Package Sidebar

Install

npm i template-inline

Weekly Downloads

4

Version

0.3.5

License

none

Last publish

Collaborators

  • pronebel