development-tool
Advanced tools
development-tool is an automation tools kit, for Web Front end and nodejs development. It is a module bundler. It's main purpose is to bundle JavaScript files for usage in a browser or nodejs, yet it is also capable of transforming, bundling, or packaging
development-tool is an automation tools kit, for Web Front end and nodejs development. It is a module bundler. It's main purpose is to bundle JavaScript files for usage in a browser or nodejs, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
This repo is for distribution on npm. The source for this module is in the
main repo.
Please file issues and pull requests against that repo.
This package use to develop kit for project development via gulp tasks.
Development tool can load task from module, directory, object or dynamic tasks. dynamic load task and run task by command evn:
gulp start [--build] [--test] [--e2e] [--release] [--depoly] [--server][--watch] [--task task1,task2]
gulp build [--build] [--test] [--e2e] [--release] [--depoly] [--server] [--watch]
You can install this package either with npm.
for nodejs develop, need install development-tool-node
for front-end develop install development-tool-web
you can bundle angularjs, angular, react, knockout, Vue, etc. ... easy to packag your project in any modular. use development-tool-systemjs for bundle project, alse can use development-tool-jspm for bundle project.
npm install development-tool
// for nodejs develop
npm install development-tool-node
// for front end develop
npm install development-tool-web
You can import modules:
import * as gulp from 'gulp';
import { Development } from 'development-tool';
import * as gulp from 'gulp';
import { Development } from 'development-tool';
// create project.
let projectA = new Development({...});
// or
let projectA = Development.create(gulp, __dirname, [...]);
//add context component.
projectA.add(component);
// or
projectA.add(ITaskConfig);
// or
projectA.add(ITaskOption);
...
projectA.start();
import * as gulp from 'gulp';
import { Pipe, Operation, IMap, ITaskContext, IDynamicTaskOption, RunWay, IOrder } from 'development-core';
import { Development, ITaskOption } from 'development-tool';
Development.create(gulp, __dirname, [
<ITaskOption>{
name: 'serv',
src: 'server',
dist: 'dist',
testSrc: 'server/test/**/*.spec.ts',
cleanSrc: ['dist/!(development|production)'],
refs: [
// another project.
(ctx) => pathstring;
'../subSystem',
{name: 'project_name', path:'_', cmd:'gulp build', args: '--release' },
{name: (ctx) => 'project_name', path: (ctx) => 'path', cmd:(ctx) => 'gulp build', args: (ctx) => ['...'] }
],
// default run parallel.
refsRunWay: RunWay.parallel,
// set refs projec run order.
//refsOrder: Order,
asserts: {
css: '', less: '',
jpeg: Operation.default, jpg: Operation.default, png: Operation.default, svg: Operation.default,
ttf: Operation.default, woff: Operation.default, eot: Operation.default, xlsx: Operation.default,
pdf: Operation.default,
template: {
src: ['server/views/**/*.html', 'server/views/**/*.ejs'],
dist: 'dist/views'
},
copys: { src: ['package.json', 'start.bat'], oper: Operation.deploy },
pm2: {
src: 'pm2.json',
oper: Operation.deploy,
loader: [{
pipes: [(ctx) => replace('"script": "dist/index.js",', '"script": "index.js",')]
}]
}
},
tasks: [
{
src: 'dist/config/*',
dist: 'dist/config',
loader: <IDynamicTaskOption>{
name: 'server-config',
oper: Operation.release | Operation.deploy,
pipes: [(ctx) => replace('./development', './production')]
}
}
],
loader: 'development-tool-node'
}
]).start();
import * as gulp from 'gulp';
import * as _ from 'lodash';
import { Pipe, Operation, IMap, IDynamicTaskOption } from 'development-core';
import { Development, ITaskOption } from 'development-tool';
import { IBundlesConfig, IBundleGroup } from 'development-tool-systemjs';
import { IWebTaskOption } from 'development-tool-web';
import * as path from 'path';
const tslint = require('gulp-tslint');
const cache = require('gulp-cached');
const rename = require('gulp-rename');
const jeditor = require('gulp-json-editor');
const through = require('through2');
const JSONC = require('json-comments');
const replace = require('gulp-replace');
// const babel = require('gulp-babel');
const del = require('del');
const htmlMin = require('gulp-minify-html');
const uglify = require('gulp-uglify');
// const inlineNg2Template = require('gulp-inline-ng2-template');
const sass = require('gulp-sass');
interface Packages {
name: string;
items?: string[];
pattern?: string;
}
Development.create(gulp, __dirname, [
<ITaskOption>{
name: 'serv',
src: 'server',
dist: 'dist',
testSrc: 'server/test/**/*.spec.ts',
cleanSrc: 'dist/!(development|production)',
asserts: {
css: '', less: '',
jpeg: Operation.default, jpg: Operation.default, png: Operation.default, svg: Operation.default,
ttf: Operation.default, woff: Operation.default, eot: Operation.default, xlsx: Operation.default,
pdf: Operation.default,
template: {
src: ['server/views/**/*.html', 'server/views/**/*.ejs'],
dist: 'dist/views'
},
copys: { src: ['package.json', 'start.bat'], oper: Operation.deploy },
pm2: {
src: 'pm2.json',
oper: Operation.deploy,
loader: [{
pipes: [(ctx) => replace('"script": "dist/index.js",', '"script": "index.js",')]
}]
}
},
tasks: [
{
src: 'dist/config/*',
dist: 'dist/config',
loader: <IDynamicTaskOption>{
name: 'server-config',
oper: Operation.release | Operation.deploy,
pipes: [(ctx) => replace('./development', './production')]
}
}
],
loader: 'development-tool-node'
},
<IWebTaskOption>{
name: 'web',
src: 'client',
dist: 'dist/development',
releaseDist: 'dist/production',
cleanSrc: (ctx) => {
if (ctx.env.release || ctx.env.deploy) {
let srcs: string[] = [];
if (ctx.env.gb) {
srcs.push('dist/production/!(*.js)');
} else {
srcs.push('dist/production');
}
if (ctx.oper & Operation.deploy) {
srcs.push('dist/development');
}
return srcs;
} else {
return 'dist/development';
}
},
browsersync: {
files: ['node_modules/**/*']
},
karma: {
systemjs: {
systemjs: ['systemjs/dist/system-polyfills', 'systemjs/dist/system'],
config: ['systemjs.config.js'],
resource: 'assets'
}
},
loader: 'development-tool-web',
asserts: {
css: '', // less: '',
jpeg: Operation.default, jpg: Operation.default, png: Operation.default, svg: Operation.default,
ttf: Operation.default, woff: Operation.default, eot: Operation.default, xlsx: Operation.default,
pdf: Operation.default,
bootstrapfonts: {
src: 'node_modules/bootstrap-sass/assets/fonts/**',
dist: ctx => ctx.parent.toDistPath('./fonts')
},
scss: {
src: 'client/**/*.scss',
loader: [{
oper: Operation.default | Operation.autoWatch,
pipes: [
(ctx) => sass({
outputStyle: 'compressed',
includePaths: [
ctx.toDistPath('asserts'),
ctx.toRootPath('node_modules/bootstrap-sass/assets/stylesheets')
]
}).on('error', sass.logError)
]
}]
},
json: {
src: ['client/**/*.json', '!client/data/**/*.json', '!client**/jsconfig.json', '!client/config*.json'],
loader: [
{
oper: Operation.default | Operation.autoWatch,
pipes: [
() => cache('config_json'),
() => through.obj(function (file, encoding, callback) {
if (file.isNull()) {
return callback(null, file);
}
if (file.isStream()) {
return callback('doesn\'t support Streams');
}
var min = JSONC.minify(file.contents.toString('utf8'));
file.contents = new Buffer(min);
this.push(file);
callback();
})
]
}
]
},
config: {
src(ctx) {
if (ctx.env.config) {
return `client/config-${ctx.env.config}.json`;
} else {
return 'client/config.json';
}
},
loader: [
{
oper: Operation.default | Operation.autoWatch,
pipes: [
() => cache('config_json'),
() => through.obj(function (file, encoding, callback) {
if (file.isNull()) {
return callback(null, file);
}
if (file.isStream()) {
return callback('doesn\'t support Streams');
}
var min = JSONC.minify(file.contents.toString('utf8'));
file.contents = new Buffer(min);
this.push(file);
callback();
}),
() => rename('config.json'),
() => jeditor({})
]
}
]
},
html: ['client/*.html'],
template: {
src: ['client/**/*.template.html', 'client/**/*.component.html', 'client/**/*.tpl.html'],
loader: [{
oper: Operation.default | Operation.autoWatch,
pipes: [
() => cache('component_template_cache'),
() => htmlMin({
empty: true,
spare: true,
quotes: true,
dom: {
lowerCaseAttributeNames: false,
lowerCaseTags: false
}
})]
}]
},
ts: {
src: ['client/**/*.ts', 'test/**/*.ts'],
// will run after anthor assert complete.
order: <IOrder>{ value: 1, runWay: RunWay.sequence },
tsPipes: <Pipe[]>[
(ctx: ITaskContext) => inlineNg2Template({ base: '/app' }),
() => tslint()
// { toTransform: (ctx) => { console.log('/-------------------\ninlineNg2Template'); return inlineNg2Template({ base: ctx.toDistPath('./app') , target: 'es5' })}, order: total => 1 / total },
// { toTransform: () => tslint(), order: total => 2 / total }
],
// pipes: [
//... js pipe task.
// ],
loader: 'development-assert-ts'
},
tsx: {
loader: 'development-assert-ts'
},
js: 'client/**/*.js'
},
subTaskOrder: total => 3 / total,
tasks: [
<IBundlesConfig>{
index: ['client/index.html'],
bundleBaseDir: 'dist/production',
src: 'dist/production/**/*.js',
dist: 'dist/production',
systemConfig: 'dist/production/systemjs.config.js',
mainfile: 'boot.js',
loader: 'development-tool-systemjs',
bust: (ctx) => <string>ctx.getPackage()['version'],
baseURL: (ctx) => {
let val = ctx.env['aspnet'];
if (_.isString(val)) {
return val;
} else if (val) {
return 'app/dist/production';
}
return './';
},
includePackageFiles: [
'node_modules/systemjs/dist/system-polyfills.js',
'node_modules/systemjs/dist/system.js'
],
dependencies: (ctx) => {
let config = require(ctx.toDistPath('systemjs.config.js')).default;
return _.keys(config.map);
},
bundles: (ctx) => {
let routes: Packages[] = [
{ name: 'core', pattern: 'app/core/**/!(routing).module.js' },
{ name: 'shared', pattern: 'app/shared/**/!(routing).module.js' },
{ name: 'dashboard', pattern: 'app/dashboard/**/!(routing).module.js' },
{ name: 'app', items: ['app/app.module.js', 'app/boot.js'] }
];
let dist = ctx.parent.getDist();
return Promise.all(_.map(routes, r => {
if (r.items) {
return {
name: r.name,
items: r.items
}
} else {
return ctx.fileFilter(path.join(dist, r.pattern), null, n => ctx.toUrl(dist, n))
.then(items => {
return {
name: r.name,
items: items
}
});
}
})).then(its => {
let bundle: IMap<IBundleGroup> = {};
its.forEach(it => {
let exclude = ['core', 'shared'];
if (it.name === 'core') {
exclude = [];
} else if (it.name === 'shared') {
exclude = ['core']
}
bundle[it.name] = {
combine: true,
exclude: exclude,
items: it.items
}
});
return bundle;
});
},
depsExclude: ['angular-i18n', 'jquery', 'rxjs', 'app', 'ag-grid', '@angularclass', 'plugin-babel', 'systemjs-babel-build', 'ts', 'typescript'],
bundleDeps: (ctx, deps) => {
let libs = ['css', 'json', 'lodash', 'text', 'zone.js', 'reflect-metadata', 'moment', 'core-js-shim', 'url'];
let angularlibs = _.filter(deps, it => {
return it.indexOf('@angular') === 0 && it.indexOf('@angularclass') < 0;
});
let ngtools = ['angular2-grid', 'highcharts', 'angular2-highcharts', 'ng2-validation', 'ng2-file-upload', 'ng2-translate', 'ng2-bootstrap'];
return {
libs: {
combine: true,
items: libs
},
angularlibs: {
combine: true,
items: angularlibs,
exclude: ['libs']
},
tools: {
combine: true,
items: _.filter(deps, function (d) {
return skslibs.indexOf(d) < 0 && libs.indexOf(d) < 0 && angularlibs.indexOf(d) < 0 && ngtools.indexOf(d) < 0;
}),
exclude: ['libs', 'angularlibs']
},
ngtools: {
combine: true,
items: ngtools,
exclude: ['libs', 'angularlibs', 'tools']
}
};
},
pipes: [
() => uglify()
]
, mainfilePipes: [
() => uglify()
]
},
{
loader: <IDynamicTaskOption[]>[
{
name: 'clean-production',
oper: Operation.release,
task: (ctx) => del(ctx.toDistSrc(['app', 'common', 'jspm-config', 'assets/**/*.less']))
},
{
name: 'copy-index',
oper: Operation.default,
src: ctx => ctx.parent.toDistPath('./index.html'),
dist: 'dist/views',
pipes: []
}
]
}
]
},
<ITaskOption>{
name: 'docker',
oper: Operation.deploy,
tasks: [
{
src: 'dist/**',
loader: [
{
name: 'clean-development',
task: (ctx) => del('dist/development')
}
]
},
{
name: 'deploy-server',
src: 'docker-compose.yml',
dist: './publish',
exportImage: true,
images: ['test_webapp', 'test_nginx'],
service: 'www.yourserver.com',
user: 'test',
psw: 'test',
loader: 'development-tool-docker'
}]
}
])
.start();
only dynamic task and IPipeTask (base class PipeTask) can add special pipe work.
import * as gulp from 'gulp';
import { Development, IAssertOption, ITaskOption } from 'development-tool';
Development.create(gulp, __dirname, [
{
src: 'src',
//testSrc: '...',
//e2eSrc: '...',
//watchSrc: '...'
dist: 'lib',
// buildDist:'build path',
// releaseDist: 'release path',
// depolyDist: 'depoly path'
asserts:{
// use IAsserts task to deal with ts file, if src not setting, use src/**/*.ts
// pipes, output is addation pipe work.
ts: {
loader: {
module:'development-assert-ts',
// add pipe works for module tasks.
pipe(stream, ctx, dist, gulp){ ... }
pipes: Pipe[] | (ctx, dist, gulp)=> Pipe[],
output: OutputPipe[] | (stream, ctx, dist, gulp)=> OutputPipe[]
}
},
tsb:{
src:'srcb/**/*.ts',
loader:'development-assert-ts',
// also can add pipe works for module tasks here.
pipe(stream, ctx, dist, gulp){ ... }
pipes: Pipe[] | (ctx, dist, gulp)=> Pipe[],
output: OutputPipe[] | (stream, ctx, dist, gulp)=> OutputPipe[]
}
//default copy 'src/**/*.json' to dist. auto create json task and json-watch task.
json: '',
//default copy to dist. auto create jpeg task and jpeg-watch task.
jpeg: ['src/apath/**/*.jpeg', 'src/bpath/**/*.jpeg'],
//default copy to dist. auto create moduleBcss task and moduleBcss-watch task.
moduleBcss: 'src/moduleB/**/*.css',
// use default task to deal with ts file, if src must setting.
less:<ITaskOption>{...},
// use dynamic task to deal with html file, if src not setting, use src/**/*.html
html:{loader: <IDynamicTaskOption[]>[}
...
},
loader: 'development-tool-node'
}
])
.start();
Development.create(gulp, __dirname, {
tasks:{
src: 'src',
dist: 'lib',
loader: 'development-tool-web',
tasks:[
{
src: 'files be dealt with',
//testSrc: '...',
//e2eSrc: '...',
//watchSrc: '...'
dist: 'dist path',
// buildDist:'build path',
// releaseDist: 'release path',
// depolyDist: 'depoly path'
// any module implement ITaskDefine, or @tasks(...) decorator and @dynamicTask decorator task.
loader:'development-tool-*'
},
{
src: ['src/apath/**/*.css', 'src/bpath/**/*.css'],
//testSrc: '...',
//e2eSrc: '...',
//watchSrc: '...'
dist: 'dist path',
// buildDist:'build path',
// releaseDist: 'release path',
// depolyDist: 'depoly path'
loader: {
// any module implement ITaskDefine, or @tasks(...) decorator and @dynamicTask decorator task.
dir: [path.join(__dirname, './src/mytasks')]
},
tasks: [
{
src: 'files be dealt with',
//testSrc: '...',
//e2eSrc: '...',
//watchSrc: '...'
dist: 'dist path',
// buildDist:'build path',
// releaseDist: 'release path',
// depolyDist: 'depoly path'
loader: {
// any module implement ITaskDefine, or @tasks(...) decorator and @dynamicTask decorator task.
dir: path.join(__dirname, './src/mytasks')
}
},
{
src: 'files be dealt with',
//testSrc: '...',
//e2eSrc: '...',
//watchSrc: '...'
dist: 'dist path',
// buildDist:'build path',
// releaseDist: 'release path',
// depolyDist: 'depoly path'
loader: {
// any module implement ITaskDefine, or @tasks(...) decorator and @dynamicTask decorator task.
module: path.join(__dirname, './src/mytasks/dosomething')
}
}
]
}
...
]
}
})
.start();
import * as gulp from 'gulp';
import { Development } from 'development-tool';
import { ITaskOption, Src, Operation, IDynamicTaskOption } from 'development-core';
const del = require('del');
const cache = require('gulp-cached');
const ts = require('gulp-typescript');
const sourcemaps = require('gulp-sourcemaps');
let tsProject = ts.createProject('tsconfig.json');
Development.create(gulp, __dirname, {
tasks: {
src: 'src/**/*.ts',
dist: 'lib',
loader: <IDynamicTaskOption[]>[
{
name: 'clean',
//the task for Operation type. default for all.
//oper: Operation.release | Operation.depoly | Operation.build | Operation.test | Operation.e2e
task: (ctx) => del(ctx.getDist())
},
{
name: 'tscompile',
//the task for Operation type. default for all.
//oper: Operation.release | Operation.depoly | Operation.build | Operation.test | Operation.e2e
pipes: [
() => cache('typescript'),
sourcemaps.init,
tsProject
],
// set muti-output. no setting default output default one to "dist: 'lib'" .
output: [
(tsmap, ctx) => tsmap['dts'].pipe(gulp.dest(ctx.getDist())),
(tsmap, ctx) => tsmap['js'].pipe(sourcemaps.write('./sourcemaps')).pipe(gulp.dest(ctx.getDist()))
]
},
{
name: 'watch',
//watch only for --watch env.
watchTasks: ['tscompile']
}
]
}
})
.start();
Dynamic task can set special src filter, dist path, build path, release path,
test path, deploy path, e2e path. detail see IDynamicTaskOption interface.
// or with task from module and asserts.
Development.create(gulp, __dirname, {
tasks: {
src: 'src/**/*.ts',
dist: 'lib',
asserts:{
//default copy 'src/**/*.json' to dist. auto create json task and json-watch task.
json: '',
//default copy to dist. auto create jpeg task and jpeg-watch task.
jpeg: ['src/apath/**/*.jpeg', 'src/bpath/**/*.jpeg'],
//default copy to dist. auto create moduleBcss task and moduleBcss-watch task.
moduleBcss: 'src/moduleB/**/*.css',
// use IAsserts task to deal with ts file, if src not setting, use src/**/*.ts
// can add special pipe work via pipes ctx. add special output by ctx output
ts:{ loader: {module:'development-assert-ts', pipes: Pipe[] | (ctx, dist, gulp)=> Pipe[], output: OutputPipe[] | (stream, ctx, dist, gulp)=> OutputPipe[] }},
// use default task to deal with ts file, if src must setting.
less:<ITaskOption>{...},
// use dynamic task to deal with html file, if src not setting, use src/**/*.html
html:{loader: <IDynamicTaskOption[]>[}
...
},
loader: {
module:'module name',
dynamicTasks:[
{
name: 'clean',
task: (ctx) => del(ctx.getDist())
},
{
name: 'tscompile',
pipes(ctx){
return [
() => cache('typescript'),
sourcemaps.init,
tsProject
]),
// set muti-output. no setting default output default one to "dist: 'lib'" .
output [
(tsmap, ctx) => tsmap['dts'].pipe(gulp.dest(ctx.getDist())),
(tsmap, ctx) => tsmap['js'].pipe(sourcemaps.write('./sourcemaps')).pipe(gulp.dest(ctx.getDist()))
]
},
{
name: 'watch',
watchTasks: ['tscompile']
}
]
}
}
})
.start();
// Dynamic task can set special src filter, dist path, build path,
// release path, test path, deploy path, e2e path. detail see IDynamicTaskOption interface
Development.create(gulp, __dirname, [
{
src: 'src',
dist: 'lib',
assertsOrder: 0.1,
asserts: {
ts: [
{
name: 'tscompile',
//src: 'src/moduleA/**/*.ts'
//dist:'lib/ts',
pipes: [
() => cache('typescript'),
sourcemaps.init,
tsProject
],
output: [
(tsmap, ctx, dt) => tsmap.dts.pipe(gulp.dest(ctx.getDist(dt))),
(tsmap, ctx, dt) => {
if (ctx.oper === Operation.release || ctx.oper === Operation.deploy) {
return tsmap.js
.pipe(babel({
presets: ['es2015']
}))
.pipe(uglify())
.pipe(sourcemaps.write('./sourcemaps'))
.pipe(gulp.dest(ctx.getDist(dt)));
} else {
return tsmap.js
.pipe(sourcemaps.write('./sourcemaps'))
.pipe(gulp.dest(ctx.getDist(dt)));
}
}
]
},
{
name: 'watch',
watchTasks: ['tscompile']
}
]
},
loader: [
{
name: 'test',
src: 'test/**/*spec.ts',
oper: Operation.test | Operation.release | Operation.deploy,
pipes: [mocha],
output: null
},
{
name: 'clean',
order: 0,
task: (ctx) => del(ctx.getDist())
}
]
}
])
.start();
https://github.com/zhouhoujun/development-tool.git
The mocks are then available at jspm_components/development-tool/development-tool.js.
Documentation is available on the development-tool docs site.
MIT © Houjun
FAQs
development-tool is an automation tools kit, for Web Front end and nodejs development. It is a module bundler. It's main purpose is to bundle JavaScript files for usage in a browser or nodejs, yet it is also capable of transforming, bundling, or packaging
The npm package development-tool receives a total of 0 weekly downloads. As such, development-tool popularity was classified as not popular.
We found that development-tool demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.
Security News
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.
Security News
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.