it doesn't replace dependency
Closed this issue · 4 comments
I'm using TS with import, for example in app.module.ts I have:
import {CheckedDirective} from "./common/directives/checked.directive";
checked.directive is a TS in that directory.
With gulp-rev, after tsc, it is correctly revisioned as: checked-0a90e14b3d.directive.js
and inserted in manifest
"app/common/directives/checked.directive.js": "app/common/directives/checked-0a90e14b3d.directive.js",
gulp-rev-collector doesn't rewrite the dependency in "app/app-c3170cc5cd.module.js", it remains:
var checked_directive_1 = require("./common/directives/checked.directive");
What can I do?
My gulp tasks:
`gulp.task('revision:rename', () =>
gulp.src([
BUILD_DIR+"//*.html",
BUILD_DIR+"//.css",
BUILD_DIR+"/**/.js",
"!"+BUILD_DIR+"/index.html",
"!"+BUILD_DIR+"/favicon.ico",
BUILD_DIR+"/**/*.{jpg,png,jpeg,gif,svg,ico,PNG}"])
.pipe(rev())
.pipe(gulp.dest(DIST_ASSEMBLE))
.pipe(rev.manifest({ path: 'manifest.json' }))
.pipe(gulp.dest(DIST_ASSEMBLE))
);
//update references in js but not rewrite
//import {CheckedDirective} from "./common/directives/checked.directive";
//in import {CheckedDirective} from "./common/directives/checked-0a90e14b3d.directive";
gulp.task("revision:updateReferences", () =>
gulp.src([DIST_ASSEMBLE+"/manifest.json","distassemble/**/*.{html,json,css,js}"])
.pipe(collect())
.pipe(gulp.dest(DIST_ASSEMBLE))
);`
You car reach the result:
- using gulp-rev-collector v1.3.0
- change your manifest to
"common/directives/checked.directive.js": "common/directives/checked-0a90e14b3d.directive.js",
or change require call to
var checked_directive_1 = require("../app/common/directives/checked.directive");
- using
extMap
option for gulp-rev-collector like:
var revCollector = require('gulp-rev-collector');
...
.pipe( revCollector({
extMap: {
'.directive.js': '.directive'
}
}) )
...
Thanks for your response but:
-
manifest: why removing initial "app" is important? I think problem is the extension .js that isn't in my import (TS) /require (JS). Also each time I must rewrite my manifest? It's about 5000rows!
-
I can't change require call
var checked_directive_1 = require("../app/common/directives/checked.directive");
cause all js are automatically generated from typescript with TSC (gulp previous task).
The chain is: program in TS --> gulp tsc to automatically obtain .js that I don't change --> gulp rev + gulp collector -
With
extMap
I must write all dependeces manually? I've a lot (a lot!) import for each TS/JS, and in this way what's the help of gulp-rev-collector?
Example for 1 file:
import {HasPermissionDirective} from "./common/directives/hasPermission.directive"; import {PermissionService} from "./permission/permission.service"; import {UserService} from "./admin/user/user.service"; import {LoggingService} from "./admin/logging/logging.service"; import {OrderBy} from "./common/pipes/orderBy.pipe"; import {UserRegionsPanelComponent} from "./admin/user/detail/user-regions-panel.component"; import {UserTipieventoPanelComponent} from "./admin/user/detail/user-tipievento-panel.component"; import {MessageService} from "./common/services/message.service"; import {HttpResponseHandlerService} from "./app.httpResponseHandler.service"; import {RoleService} from "./admin/role/role.service"; import {UserListPipe} from "./admin/user/list/user-list.pipe";
I missing something: import in TS is a standard, so why collector doesn't recognize it?
- yes! my module cant find pattern
app/common/directives/checked.directive
in string./common/directives/checked.directive
to replacement. without serios rewrite it can`t.
you can modify content of your manifests before using collector.
ETC:
var through = require('through2');
through
function replacer() {
return through.obj(function(file, enc, cb){
if (path.extname(file) === '.json') {
var src = file.contents.toString('utf8');
src = src.replace(/"app\//g, '"/');
file.contents = new Buffer(src);
}
this.push(file);
cb();
});
}
...
gulp.task("revision:updateReferences", () =>
gulp.src([DIST_ASSEMBLE+"/manifest.json","distassemble/**/*.{html,json,css,js}"])
.pipe(replacer())
.pipe(collect({extMap: {
'.directive.js': '.directive',
'.service.js': '.service',
'.pipe.js': '.pipe',
'.module.js': '.module'
}}))
.pipe(gulp.dest(DIST_ASSEMBLE))
);
without 5000 rows modyfy...
2. if you realise 1, it don't needed.
3. yes. you need rules for .directive
, .service
, .pipe
... what else? .module
...
isn't a "lot" variants. copypast them from exsample below...
thanks for your reply
- In this code there are a lot of custom pattern for file names used in import/require. Example for another generated js:
var utilService_1 = require("./admin/utilService");
var persone_component_1 = require("./event/detail/panelModal/persone-component");
var inputswitch_1 = require("primeng/components/inputswitch/inputswitch");
var risorse_materiali_component_1 = require("./event/detail/panelModal/risorse-materiali-component");
...
different from file to file, so I thinking there is no simple way to rev and replace dependencies in my case with gulp-rev and gulp-rev-collector :(
I hoped that there was a plugin for automatically scan and then rev and replace all "import" present in all my TS (all "require" in all generated JS)