gulp-iz-preprocessor

gulp-iz-preprocessor

Comment-based preprocessor.

Install

npm install gulp-iz-preprocessor --save-dev

Overview of Comment-based preprocessor

1. Build for each targets
2. Definition of importable and import.
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. Importable definition and import

Importable definition at library.js.

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

Import 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; }

/* //_<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; }}
/* //_>bottom99 */

h1 { background : #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; }}
/* //_>bottom99 */

---

Extended comments

Definitions

Extended comments	Name	Description
//@PC	Build target definition
//#mobile[@iOS,#WinMobi]	Group definition	//#xx[<@xx/#xx>, ...]
//+XHR	Importable definition
//+ajax[+XHR,+MSXML]	Importable with dependent	//+xx[+xx, ...]
//!ajax	Import

Range

Extended comments	Name	Description
//_{	Remove range	remove
//_{@PC	Target range	keep if @PC
//_{#mobile	Group range	keep if #mobile
//_{@PC,#mobile	Multi targets range	//_{<@xx/#xx>, ...
//_{+ajax	Importable range	keep if "+ajax" imported
//_{^@iOS	Not range	keep without @iOS
//_<top	Move to top range	move to top for optimized builds
//_<bottom50	Move to bottom range	//_<bottom(Order:0~100) move to bottom for optimized builds

---

Usage in gulp task

const gulp   = require('gulp'),
      output = './public/css';
/* -------------------------------------------------------
 *  gulp css
 */
const izpp     = require('gulp-iz-preprocessor'),
      sass     = require("gulp-sass"),
      gcmq     = require("gulp-group-css-media-queries"),
      cleanCSS = require("gulp-clean-css");

gulp.task('css', function(){
    return gulp.src([
            "./Library/src/scss/**/*.scss",
            "./src/scss/**/*.scss"
        ])
        .pipe(
            izpp({
                fileType : 'scss',
                log      : false,
                tasks : [
                    { name : 'desktop', imports : [ 'desktopOnly' ], dir : 'pc'  },
                    { name : 'mobile' , imports : [ 'mobileOnly'  ], dir : 'mob' }
                ]
            })
        )
        .pipe(sass())
        .pipe(gcmq())
        .pipe(cleanCSS())
        .pipe(gulp.dest(output));
});

Initialization options

Name	Type	Description	Optional
fileType	String	extname
log	Boolean	Show console.log()	v
tasks	Array.<Task object>	Task object array	v

Task object

Name	Type	Description	Optional
name	String	Task name for log	v
targets	Array.<String>	[ "mobile" ]	v
imports	Array.<String>	[ "Ajax" ]	v
dir	String	Output file directory	v(*1)
prefix	String	Output file name prefix	v(*1)
importFor	Object	{ mobile : [ "Ajax" ] }	v

1. When registering two or more tasks, dir or prefix must be specified. If not specified, later tasks will overwrite earlier tasks. Only files for later tasks are output!

Links

1. Previous version : iz preprocessor VS Code extenshon

Projects in use

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

Enjoy!