• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

bruderstein/gulp-html-src: Gulp plugin to emit all the <script> or <lin ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

bruderstein/gulp-html-src

开源软件地址(OpenSource Url):

https://github.com/bruderstein/gulp-html-src

开源编程语言(OpenSource Language):

JavaScript 100.0%

开源软件介绍(OpenSource Introduction):

#gulp-html-src

Convert the HTML input to all the linked script or link/css tags

Streams are supported. (It will emit whatever it gets - i.e. streams in, streams out; Buffer in, Buffer out)

Usage

Install

npm install gulp-html-src --save

Example

var gulp = require('gulp');
var ghtmlSrc = require('gulp-html-src');
var uglify = require('gulp-uglify');

gulp.task('copy-js', function() {
	gulp.src('./src/*.html')
		.pipe(ghtmlSrc())
		// From this point, it's as if you'd used gulp.src() listing each of your 
		// javascript files that are in your html as <script src="..."></script>
		.pipe(uglify())
		.pipe(gulp.dest('./build/'));

});

gulp.task('copy-css', function() {
	gulp.src('./src/*.html')
		.pipe(ghtmlSrc({ presets: 'css'}))
		.pipe(gulp.dest('./build/'));
});

Options

Basic usage

ghtmlSrc(options), where options is an object with the following properties. If you pass no options, then the presets for script are used.

You can use the presets option to choose either script or css files to enumerate.

It will skip any script or link tags with data-remove="true" or data-ignore="true" set. You can then use these tags to control what to remove when you remove the script tags from your HTML later.

options.presets

Type: `String`
Default: `script`
Possible Values: `script`, `css`

options.includeHtmlInOutput

Type: `bool`
Default: `false`

By default the original HTML file (that probably came from gulp.src()) is swallowed by gulp-html-src, and it only emits the matching script or css files. However, if you want to keep the HTML in the stream, then set this option to true. One use of this could be to blindly copy the HTML and all references to a destination directory.

Advanced usage

The following options are not used for the "normal" cases, but could be useful if you want to do something more advanced (for instance select all images out of an HTML file). These options individually override the presets, so it's perfectly fine to specify presets:'script', and then override the selector to be 'img', leaving the getFileName function as the default.

options.selector

Type: `String`
Default: For presets == `script`, `script:not([data-ignore=true], [data-remove=true])`, for presets == `css`, `link[type="text/css"][rel=stylesheet]:not([data-ignore=true], [data-remove=true])`

This is the cheerio selector (basically a jQuery selector) for the elements to select. See options.getFileName for how this element is converted to a filename.

options.getFileName

 Type: `function`
 Arguments: `element` - a single element selected by the `selector`
 Returns: The name of the file to open (relative to the HTML file)

This function is called with each matching element from the selector, and returns the relative filename. For presets == script, this is

function getFileName(node) {
	return node.attr('src');
}



鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap