在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):ludohenin/gulp-inline-ng2-template开源软件地址(OpenSource Url):https://github.com/ludohenin/gulp-inline-ng2-template开源编程语言(OpenSource Language):JavaScript 100.0%开源软件介绍(OpenSource Introduction):gulp-inline-ng2-templateInline Angular2 HTML and CSS files into JavaScript ES5/ES6 and TypeScript files (and possibly more - not tested). This plugin uses the ES6 template strings syntax by default (which requires the use of a transpiler -typescript, babel, traceur- to produce valid ES5 files) but you can opt-in for ES5 one. Very convenient to unit test your component or bundle your components/application (avoid extra HTTP request and keeps your source clean). By aggressively inlining templates, component library authors can ensure that their library is
compatible with all deployment methods (SystemJS, Webpack, etc.) and avoid problems associated
with setting note:
TOC
Installationnpm install gulp-inline-ng2-template --save-dev ConfigurationOptionsYou can pass a configuration object to the plugin. defaults = {
base: '/', // Angular2 application base folder
target: 'es6', // Can swap to es5
indent: 2, // Indentation (spaces)
useRelativePaths: false, // Use components relative assset paths
removeLineBreaks: false, // Content will be included as one line
removeModuleId: false, // Remove the `moduleId` key from component definition after inlining styles
templateExtension: '.html', // Update according to your file extension
templateFunction: false, // If using a function instead of a string for `templateUrl`, pass a reference to that function here
templateProcessor: function (path, ext, file, callback) {/* ... */},
styleProcessor: function (path, ext, file, callback) {/* ... */},
customFilePath: function(ext, file) {/* ... */},
supportNonExistentFiles: false // If html or css file do not exist just return empty content
}; Processors configuration/**
* Processor function call signature and type return
*
* @Param{String} file path
* @Param{String} file extension (type)
* @Param{String} file content
* @Param{Function} callback function (err, result) => void
* @Return{void}
*/
function processor(path, ext, file, cb) {
// async implementation of your source files processing goes here ...
cb(null, file);
} Processor ExamplesMinify template file before inlining them import inlineTemplate from 'gulp-inline-ng2-template';
import htmlMinifier from 'html-minifier';
const pluginOptions = {
base: mySrcPath,
templateProcessor: minifyTemplate
};
function minifyTemplate(path, ext, file, cb) {
try {
var minifiedFile = htmlMinifier.minify(file, {
collapseWhitespace: true,
caseSensitive: true,
removeComments: true,
removeRedundantAttributes: true
});
cb(null, minifiedFile);
}
catch (err) {
cb(err);
}
} Credit @lcrodriguez Template functionInside your component: /**
* Template function call signature and type return
*
* @Param{String} filename
* @Return{String} returned filename
*/
templateFunction: function (filename) {
// ...
return newFilename;
} CustomFilePath configuration/**
* Custom function name call signature and type return
*
* @Param{String} file extension (type)
* @Param{String} file path
* @Return{String} returned file path updated
*/
function customFilePath(ext, file) {
return file;
} Example usage//...
var inlineNg2Template = require('gulp-inline-ng2-template');
var result = gulp.src('./app/**/*.ts')
.pipe(inlineNg2Template({ base: '/app' }))
.pipe(tsc());
return result.js
.pipe(gulp.dest(PATH.dest)); Browserify transform exampleExample transform function to use with Browserify. // ng2inlinetransform.js
var ng2TemplateParser = require('gulp-inline-ng2-template/parser');
var through = require('through2');
var options = {target: 'es5'};
function (file) {
return through(function (buf, enc, next){
ng2TemplateParser({contents: buf, path: file}, options)((err, result) => {
this.push(result);
process.nextTick(next);
});
});
} // gulp task
return browserify('main.ts', {} )
.add(config.angularApp.additionalFiles)
.plugin(require('tsify'), {target: 'es5'})
.transform('./ng2inlinetransform')
.bundle()
.pipe(gulp.dest(config.rootDirectory)) Thanks to @zsedem How it worksapp.html <p>
Hello {{ world }}
</p> app.css .hello {
color: red;
} app.ts import {Component, View} from 'angular2/angular2';
@Component({ selector: 'app' })
@View({
templateUrl: './app.html',
styleUrls: ['./app.css'],
directives: [CORE_DIRECTIVES]
})
class AppCmp {} result (app.ts) import {Component, View} from 'angular2/angular2';
@Component({ selector: 'app' })
@View({
template: `
<p>
Hello {{ world }}
</p>
`,
styles: [`
.hello {
color: red;
}
`],
directives: [CORE_DIRECTIVES]
})
class AppCmp {} Contributegit clone https://github.com/ludohenin/gulp-inline-ng2-template
cd gulp-inline-ng2-template
npm install
npm run test-dev ContributorsTodo
LicenceMIT |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论