Have ideas to improve npm?Join in the discussion! »

gulp-iz-preprocessor

1.0.2 • Public • Published

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!

Keywords

none

Install

npm i gulp-iz-preprocessor

DownloadsWeekly Downloads

5

Version

1.0.2

License

MIT

Unpacked Size

35.2 kB

Total Files

5

Last publish

Collaborators

  • avatar