gulp常用插件之gulp-useref使用
更多gulp常用插件使用请访问:gulp常用插件汇总
gulp-useref这是一款可以将HTML引用的多个CSS和JS合并起来,减小依赖的文件个数,从而减少浏览器发起的请求次数。gulp-useref根据注释将HTML中需要合并压缩的区块找出来,对区块内的所有文件进行合并。注意:它只负责合并,不负责压缩!,如果需要做其他操作,可以配合gulp-if
插件使用.
安装
一键安装不多解释
npm install --save-dev gulp-useref
使用
以下示例将解析HTML中的构建块,将其替换并传递这些文件。构建块内的资产也将被串联并通过流传递。
var gulp = require('gulp'), useref = require('gulp-useref'); gulp.task('default', function () { return gulp.src('app/*.html') .pipe(useref()) .pipe(gulp.dest('dist')); });
带有选项的使用:
var gulp = require('gulp'), useref = require('gulp-useref'); gulp.task('default', function () { return gulp.src('app/*.html') .pipe(useref({ searchPath: '.tmp' })) .pipe(gulp.dest('dist')); });
如果要压缩或执行其他一些修改,则可以使用 gulp-if
有条件地处理特定类型的资产。
var gulp = require('gulp'), useref = require('gulp-useref'), gulpif = require('gulp-if'), uglify = require('gulp-uglify'), minifyCss = require('gulp-clean-css'); gulp.task('html', function () { return gulp.src('app/*.html') .pipe(useref()) .pipe(gulpif('*.js', uglify())) .pipe(gulpif('*.css', minifyCss())) .pipe(gulp.dest('dist')); });
上面是在 gulpfile.js
中的调用代码,但是还需要在HTML写一些代码配合使用,下面我们就来看看在html中需要怎么配合使用。
<!-- build:<type>(alternate search path) <path> <parameters> --> ... HTML Markup, list of script / link tags. <!-- endbuild -->
type
(键入): 可以是js
,css
或remove
;remove
将完全删除构建块,而不会生成文件alternate search path
(替代搜索路径):(可选)默认情况下,输入文件是相对于已处理文件的。替代搜索路径允许更改此路径。该路径还可以包含使用JSON大括号数组表示法(例如)从右到左处理的一系列路径<!-- build:js({path1,path2}) js/lib.js -->
。path
: 优化文件的文件路径,目标输出parameters
(参数): 应该添加到标签中的其他参数
完整形式的示例如下所示:
<html> <head> <!-- build:css css/combined.css --> <link href="css/one.css" rel="stylesheet"> <link href="css/two.css" rel="stylesheet"> <!-- endbuild --> </head> <body> <!-- build:js scripts/combined.js --> <script type="text/javascript" src="scripts/one.js"></script> <script type="text/javascript" src="scripts/two.js"></script> <!-- endbuild --> </body> </html>
生成的HTML将是:
<html> <head> <link rel="stylesheet" href="css/combined.css"/> </head> <body> <script src="scripts/combined.js"></script> </body> </html>
API
useref(options [,transformStream1 [,transformStream2 [,...]]])
返回一个流,其中包含资产替换后的结果HTML文件以及来自HTML内部构建块的串联资产文件。支持 useref
的所有选项。
Transform Streams(转换流)
类型:Stream
默认值:none
在合并之前转换资产。例如,要集成源地图:
var gulp = require('gulp'), sourcemaps = require('gulp-sourcemaps'), useref = require('gulp-useref'), lazypipe = require('lazypipe'); gulp.task('default', function () { return gulp.src('index.html') .pipe(useref({}, lazypipe().pipe(sourcemaps.init, { loadMaps: true }))) .pipe(sourcemaps.write('maps')) .pipe(gulp.dest('dist')); });
Options
- options.searchPath
类型:String
或Array
默认值:none
指定相对于当前工作目录搜索资产文件的位置。可以是字符串或字符串数??组。 - options.base
类型:String
默认值:process.cwd()
指定相对于cwd的输出文件夹。 - options.noAssets
类型:Boolean
默认值:false
跳过资产,仅处理HTML文件。 - options.noconcat
类型:Boolean
默认值:false
跳过串联,而是将所有资产添加到流中。 - options.newLine
类型:String
默认值:none
添加应分隔串联文件的字符串。 - options.additionalStreams
类型:Array<Stream>
默认值:none
使用其他流作为资产来源。有助于将gulp-useref
与预处理工具结合使用。例如,与TypeScript
一起使用
var ts = require('gulp-typescript'); // create stream of virtual files var tsStream = gulp.src('src/**/*.ts') .pipe(ts()); gulp.task('default', function () { // use gulp-useref normally return gulp.src('src/index.html') .pipe(useref({ additionalStreams: [tsStream] })) .pipe(gulp.dest('dist')); });
- options.transformPath
类型:Function
默认值:none
如果需要在搜索之前修改路径,请添加transformPath函数。
var gulp = require('gulp'), useref = require('gulp-useref'); gulp.task('default', function () { return gulp.src('app/*.html') .pipe(useref({ transformPath: function(filePath) { return filePath.replace('/rootpath','') } })) .pipe(gulp.dest('dist')); });
相关推荐
星辰的笔记 2020-07-04
zhongweinan 2020-06-10
jiangfulai 2020-04-18
hlihaihong 2020-01-13
kaosini 2020-01-12
kaosini 2020-01-12
FranksTD 2019-12-19
hlihaihong 2019-12-15
我有一只小松鼠 2019-12-14
FranksTD 2019-12-13
SeekerTime 2019-11-17
yuetingzhuying 2015-10-17
福叔 2019-09-06
kaosini 2019-09-06
RainyX 2019-07-01
hlihaihong 2019-07-01
idnochinese 2019-07-01
UndefineOrNull 2019-07-01
idnochinese 2019-07-01