gulp-iz-preprocessor
Comment-based preprocessor.
Install
npm install gulp-iz-preprocessor --save-dev
- Build for each targets
- Definition of importable and import.
- Move code blocks for optimized build.
1. Build for each targets
src.js
- Wrap if-block by remove range(
//_{
~ //_}
). - Then define target ranges(
//_{@XX
~ //_}@XX
).
if(UA.PC){
console.log('I am PC.');
} else if(UA.iOS){
console.log('I am iOS.');
} else {
console.log('I am Android.');
};
You will get those 3 files.
PC.js
console.log('I am PC.');
iOS.js
console.log('I am iOS.');
Android.js
console.log('I am Android.');
2. Importable definition and import
Importable definition at library.js.
console.log('Implementation of Ajax.');
Import at main.js.
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.
project.TriState = {
TRUE : 1,
FALSE : -1,
MAYBE : 0
};
Move to bottom
Collecting to the bottom for optimized build.
For example, Collect each @media blocks for Clean CSS.
h1 { background : #000; }
@media print {h1 { background : #fff; }}
h1 { color : red; }
@media handheld, only screen and (max-width: 479px) {h1 { color : green; }}
@media print {h1 { color : #000; }}
h1 { background : #000; }
h1 { color : red; }
@media handheld, only screen and (max-width: 479px) {h1 { color : green; }}
@media print {h1 { background : #fff; }}
@media print {h1 { color : #000; }}
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';
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 |
imports | Array.<String> | [ "Ajax" ] | v |
dir | String | Output file directory | v(*1) |
prefix | String | Output file name prefix | 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
- Previous version : iz preprocessor VS Code extenshon
Projects in use
- web-doc-base "Super project for itozyun's Web document projects"
- OutCloud "itozyun's blog"
Enjoy!