gulp-iz-preprocessor v1.0.3

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

Range

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

Task object

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!