iz preprocessor

Warning! Project update stopped. Subsequent projects will be developed as gulp plugins. Check out gulp-iz-preprocessor.

Overview

1. Build for each targets
2. Optional build
3. Move code blocks for optimized build.

1. Build for each targets

src.js

1. Wrap if-block by remove range( //_{ ~ //_} ).
2. Then define target ranges( //_{@XX ~ //_}@XX ).

//_{
if(UA.PC){
    //_{@PC
        console.log('I am PC.');
    //_}@PC
} else if(UA.iOS){
    //_{@iOS
        console.log('I am iOS.');
    //_}@iOS
} else {
    //_{@Android
        console.log('I am Android.');
    //_}@Android
};
//_}

You will get those 3 files.

PC.js

//_{@PC
    console.log('I am PC.');
//_}@PC

iOS.js

//_{@iOS
    console.log('I am iOS.');
//_}@iOS

Android.js

//_{@Android
    console.log('I am Android.');
//_}@Android

2. Optional build

Define option at library.js.

//_{+ajax
    console.log('Implementation of Ajax.');
//_}+ajax

Import option at main.js.

//!ajax

function main(){
    console.log('I can call Ajax!');
};

3. Move code blocks for optimized build.

Move to top

Collecting to the top for optimized build. For example, Collect each @enum definitions for Closure Compiler.

//_<top
    /**
    * @enum {number}
    */
    project.TriState = {
        TRUE  : 1,
        FALSE : -1,
        MAYBE : 0
    };
//_>top

Move to bottom

Collecting to the bottom for optimized build. For example, Collect each @media blocks for Clean CSS.

h1 { background : [#000](https://github.com/itozyun/iz-preprocessor/issues/000); }

/* //_<bottom99 */
        @media print {h1 { background : #fff; }}
/* //_>bottom99 */

h1 { color : red; }

/* //_<bottom50 */
        @media handheld, only screen and (max-width: 479px) {h1 { color : green; }}
/* //_>bottom50 */

/* //_<bottom99 */
        @media print {h1 { color : [#000](https://github.com/itozyun/iz-preprocessor/issues/000); }}
/* //_>bottom99 */

h1 { background : [#000](https://github.com/itozyun/iz-preprocessor/issues/000); }
h1 { color : red; }

/* //_<bottom50 */
        @media handheld, only screen and (max-width: 479px) {h1 { color : green; }}
/* //_>bottom50 */

/* //_<bottom99 */
        @media print {h1 { background : #fff; }}
/* //_>bottom99 */
/* //_<bottom99 */
        @media print {h1 { color : [#000](https://github.com/itozyun/iz-preprocessor/issues/000); }}
/* //_>bottom99 */

Extended comments

dfn

range

settings.json example

From version 0.0.8, "prefix" and "imports" are available.

From version 0.0.6, "rootPath" accepts two types of "path String" or "path Arrays".

From version 0.0.4, the file path is now two ways, "path" and "find".

From version 0.0.2, add build parameters to settings.json.

{
    "izPreprocessor.tasks" : {
        "scss" : [
                    {
                        "path"   : "scss/mobile.scss",
                        "output" : "precompiled_0/scss"
                    },
                    {
                        "find"   : {
                            "rootPath" : "source",
                            "include"  : "scss/**.scss",
                            "exclude"  : "node_modules"
                        },
                        "imports" : [ "mobileOnly" ],
                        "output" : "precompiled_1/scss"
                    },
                    {
                        "find"   : {
                            "rootPath" : [
                                "../src1/scss/**",
                                "../src2/scss/**",
                                "./scss/**"
                            ],
                            "include"  : "*.scss"
                        },
                        "output" : "precompiled_2/scss"
                    }
                ],
        "js" : [
                    {
                        "path"   : "js/main.js",
                        "output" : "precompiled/js"
                    }
                ]
    }
}

Links

1. Visual Studio Marketplace > iz preprocessor

Projects in use

1. web-doc-base "Super project for itozyun's Web document projects"
2. OutCloud "itozyun's blog"

Enjoy!