正文 

当前位置： 首页 > IT > java教程

gulp常用插件之gulp-useref使用(代码片段)

jiaoshou jiaoshou     2023-05-04     269

关键词：

更多gulp常用插件使用请访问：gulp常用插件汇总

gulp-useref这是一款可以将HTML引用的多个CSS和JS合并起来，减小依赖的文件个数，从而减少浏览器发起的请求次数。gulp-useref根据注释将HTML中需要合并压缩的区块找出来，对区块内的所有文件进行合并。注意：它只负责合并，不负责压缩！,如果需要做其他操作，可以配合gulp-if插件使用.

更多使用文档请点击访问gulp-useref工具官网。

安装

一键安装不多解释

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'));
);

gulp常用插件之gulp-beautify使用(代码片段)

更多gulp常用插件使用请访问：gulp常用插件汇总gulp-beautify这是一款使用js-beautify进行资产美化插件。更多使用文档请点击访问gulp-beautify工具官网。安装一键安装不多解释npminstall--save-devgulp-beautify使用这是js-beautify的gulp插件。varbea... 查看详情

gulp常用插件之gulp-uglify使用(代码片段)

更多gulp常用插件使用请访问：gulp常用插件汇总gulp-uglify这是一款使用UglifyJS缩小js文件。更多使用文档请点击访问gulp-uglify工具官网。安装一键安装不多解释npminstall--save-devgulp-uglify使用vargulp=require('gulp');varuglify=require('gul... 查看详情

gulp常用插件之gulp-plumber使用(代码片段)

更多gulp常用插件使用请访问：gulp常用插件汇总gulp-plumber这是一款防止因gulp插件的错误而导致管道中断，plumber可以阻止gulp插件发生错误导致进程退出并输出错误日志。更多使用文档请点击访问gulp-plumber工具官网。安装npminstall--s... 查看详情

gulp常用插件之gulp-notify使用(代码片段)

更多gulp常用插件使用请访问：gulp常用插件汇总gulp-notify这是一款gulp通知插件。更多使用文档请点击访问gulp-notify工具官网。安装一键安装不多解释npminstall--save-devgulp-notify使用例1：varnotify=require("gulp-notify");gulp.src("./src... 查看详情

gulp常用插件之gulp-babel使用(代码片段)

更多gulp常用插件使用请访问：gulp常用插件汇总gulp-babel这是Babel的Gulp插件。此自述文件适用于gulp-babelv8+Babelv7检查7.x分支以了解使用Babelv6的文档更多使用文档请点击访问gulp-babel工具官网。安装安装gulp-babel，如果你想获得的下一... 查看详情

gulp教程之静态资源压缩(代码片段)

...package.json和gulpfile.js文件，项目目录如下：2压缩插件简介gulp-useref合并html里面的js/cssgulp-concat用于合并文件，把也就是多个文件合并到一个文件中，以节省存储空间gulp.spritesmith图片合并成雪碧图3本地安装插件安装gulp-userefnpminstal... 查看详情

gulp常用插件之gulp-rev-collector使用(代码片段)

更多gulp常用插件使用请访问：gulp常用插件汇总gulp-rev-collector这是一款根据gulp-rev生成的manifest.json文件中的映射,去替换文件名称,也可以替换路径。更多使用文档请点击访问gulp-rev-collector工具官网。安装一键安装不多解释npminstall-... 查看详情

gulp常用插件之gulp-rev-rewrite使用(代码片段)

更多gulp常用插件使用请访问：gulp常用插件汇总gulp-rev-rewrite这是一款重写对由gulp-rev修订的资产的引用。更多使用文档请点击访问gulp-rev-rewrite工具官网。安装一键安装不多解释npminstall--save-devgulp-rev-rewrite使用最常见的使用模式包... 查看详情

gulp常用插件之wiredep使用

更多gulp常用插件使用请访问：gulp常用插件汇总wiredep这是一款gulp插件，能够将js、css文件自动插入到html中。更多使用文档请点击访问wiredep工具官网。Bower是一个客户端技术的软件包管理器，它可用于搜索、安装和卸载如JavaScript... 查看详情

gulp常用插件之rev-del使用(代码片段)

更多gulp常用插件使用请访问：gulp常用插件汇总rev-del这是一款从模块（如gulp-rev）生成的修订清单中删除旧的、未使用的指纹文件。更多使用文档请点击访问rev-del工具官网。安装一键安装不多解释npminstall--save-devrev-del使用revDel(ol... 查看详情

gulp常用插件之gulp-inject使用(代码片段)

更多gulp常用插件使用请访问：gulp常用插件汇总gulp-inject这个插件的作用与wiredep类似，不同的是可以自己任意指定需要插入文件的列表。它同样是利用注释来寻找插入的位置。获取源文件流，将每个文件转换为字符串，并将每个... 查看详情

gulp构建前端自动化工作流之：常用插件介绍及使用

在对Gulp有了一个初步的了解之后，我们开始构建一个较为完整的Gulp开发环境。本文主要分为6个段落：1.构建项目目录结构（DirectoryStructureBuild）2.插件介绍及使用方法（Tasksanddependencies）3.扩展优化（Extend&OptimizeTask）4.其他插... 查看详情

gulp介绍及常用插件使用方法(代码片段)

...让我们可以专注于代码，提高工作效率。一、API介绍gulp常用的API只有四个：gulp.task(),gulp.src(),gulp.dest(),gulp.watch() 1.gulp.src()输出（Emits）符合所提供的匹配模式（glob）或者匹配模式 查看详情

gulp插件之gulp-livereload

...p-livereload的简介：      gulp-livereload插件用于实时重载，当html，css文件内容发生改变时，浏览器会自动刷新页面。在使用gulp-livereload插件时需要浏览器安装相应的liveReload插件（浏览器插件）一、gulp-livereload... 查看详情

gulp插件之gulp-uglify

...擎，用来压缩js文件，加快网站响应速度。一、gulp-uglify插件的使用1、安装“gulp-uglify”插件命令（在终端进入到项目根目录执行）      npminstall--save-dev&nbs 查看详情

gulp插件之del

...内容并没有太大关系，所以，我们没必要去使用一个gulp插件。最好是选择使用一个原生的node模块，因为 del 模块支持多个文件以及模式匹配，因此，我们将使用它来删除文件。一、del模块的使用1、安装“del”插件命令（... 查看详情

gulp插件之gulp-autoprefixer

...toprefixer的简介：      gulp-autoprefixer插件用来自动给css文件样式添加浏览器前缀。一、gulp-autoprefixer插件的使用1、安装“gulp-autoprefixer”插件命令（在终端进入到项目根目录执行）      n... 查看详情

gulp插件之gulp-concat

...就能减少页面的http请求数，提升用户体验。一、gulp-concat插件的使用1、安装“gulp-concat ”插件命令（在终端进入到项目根目录执行）    & 查看详情