gulp-extjs
A gulp plugin which resolves and sorts all dependencies of an Ext JS project.
Features:
- Build your Ext JS project without having to use the sencha tools.
- Only includes the source files you really need.
- Sorts your source files in the right order.
You don't use gulp?
Check out extjs-dependencies - the
Ext resolver without dependencies to any particular build system.
Basic usage
Install gulp-extjs
in your project:
npm install --save-dev gulp-extjs
Then add it to your gulpfile.js
:
var gulp = require('gulp');
var extjs = require('gulp-extjs');
var concat = require('gulp-concat');
gulp.task('scripts', function(){
return gulp.src([ 'ext/ext-dev.js', 'app.js' ])
.pipe(extjs())
.pipe(concat('scripts.js'))
.pipe(gulp.dest('build'));
});
Use a separate Ext JS script
If you prefer to load the Ext JS core using an extra script tag, you can exclude it from your build.
Example gulpfile.js
:
var gulp = require('gulp');
var extjs = require('gulp-extjs');
var concat = require('gulp-concat');
gulp.task('scripts', function(){
return gulp.src('app.js')
.pipe(extjs({
provided: 'ext/ext-all-dev.js',
}))
.pipe(concat('scripts.js'))
.pipe(gulp.dest('build'));
});
Create sourcemaps
Example gulpfile.js
:
var gulp = require('gulp');
var extjs = require('gulp-extjs');
var sourcemaps = require('gulp-sourcemaps');
var concat = require('gulp-concat');
gulp.task('scripts', function(){
return gulp.src([ 'ext/ext-dev.js', 'app.js' ])
.pipe(extjs())
.pipe(sourcemaps.init())
.pipe(concat('scripts.js'))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('build'));
});
All options
gulp.task('scripts', function(){
return gulp.src([ 'ext/ext-dev.js', 'app.js' ])
.pipe(extjs({
verbose: false,
encoding: 'utf8',
provided: [ 'extjs/ext-dev.js' ],
resolve: {
path: {
'Ext': 'ext/src',
'myapp': 'app'
},
alias: {
'Ext.Layer': 'Ext.dom.Layer'
}
},
extraDependencies: {
requires: {
'MyClass': 'MyDependency'
},
uses: {
'MyClass': 'MyDependency'
}
}
excludeClasses: ['Ext.*', 'MyApp.some.Class'],
skipParse: ['app/ux/SkipMe.js']
}))
.pipe(concat('scripts.js'))
.pipe(gulp.dest('build'));
});