gulp--gulp-useref

最新推荐文章于 2024-05-18 09:36:23 发布
最新推荐文章于 2024-05-18 09:36:23 发布
阅读量783 收藏
点赞数
分类专栏： gulp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37978717/article/details/73650141
版权

gulp-useref的作用

它可以把html里零碎的这些引入合并成一个文件，但是它不负责代码压缩。

var gulp = require('gulp'),
        useref = require('gulp-useref');
    
    gulp.task('default', function () {
        return gulp.src('app/*.html')
            .pipe(useref()) //useref()里面可以添加参数useref({searchPath: '.tmp' })
            .pipe(gulp.dest('dist'));
    });

An example of this in completed form can be seen below:

<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>

The resulting HTML would be:

<html>
<head>
    <link rel="stylesheet" href="css/combined.css"/>
</head>
<body>
    <script src="scripts/combined.js"></script> 
</body>
</html>
m0_37978717
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
gulp系列：gulp-useref
12-12 3954
gulp-useref的作用
gulp 插件之 gulp-useref 和 gulp-if
weixin_33913332的博客
09-02 249
gulp-useref 和 gulp-if 的简介： gulp-useref 插件会将多个路径不同的文件拼接成一个文件，并输出到相应目录（https://www.npmjs.com/package/gulp-useref）。gulp-if 插件会根据条件判断是否成立执行相应的操作（https://github.com/robri...
推荐使用：gulp-useref - 高效的HTML构建工具
最新发布
gitblog_00007的博客
05-18 316
推荐使用：gulp-useref - 高效的HTML构建工具 项目地址:https://gitcode.com/jonkemp/gulp-useref gulp-useref 是一个基于Gulp的插件，用于解析HTML文件中的构建块，并将未优化的脚本或样式表引用替换为已合并的版本。它灵感来源于grunt-useref，但提供了更高效和简单的API。 1、项目介绍 通过gulp-useref，您可以...
gulp-useref：解析HTML文件中的构建块，以替换对非优化脚本或样式表的引用
02-19
-useref 解析HTML文件中的构建块，以未优化脚本或样式表的引用替换为 受grunt插件。 它可以处理文件串联，但不能处理缩小。 然后，文件沿流传递。 为了使资产最小化或进行其他修改，请使用有条件地处理特定类型的资产。 3.0中有什么新功能？ 内幕上的更改使代码更加有效，并简化了API。 由于API已更改，因此请注意以下用法示例。 如果出现类似错误 TypeError: useref.assets is not a function 或者 TypeError: $.useref.assets is not a function 请阅读下面的迁移说明。 安装 用安装 npm install --save-dev gulp-useref 用法 以下示例将解析HTML中的构建块，将其替换并传递这些文件。 构建块内的资产也将被串联并通过流传递。 var gulp = require
React Hooks(四) useRef
LittleMoon_lyy的博客
05-02 1165
一 介绍 useRef是一个返回可变引用对象的函数，该对象current属性的初始值为传入的initialValue，且返回的对象在组件整个生命周期中持续存在。 1.用法 通过ref属性完成对DOM元素的引用 通过useRef()实现初始赋值 通过current属性查看值 import {useRef} from 'react'; const ref = useRef(initialValue); ··· //可以在组件生命周期的任何时间log该属性以查看其值 console.log(ref.curr
你不知道的 useRef
qq_36742720的博客
01-10 1197
前言: 这篇文章会假设你已经对 react hook 有一些基础的了解. 主要讨论什么是 useRef , useRef 与 createRef 的区别, 以及在什么情况下使用 useRef . 什么是 useRef 首先, 我们要实现一个需求 -- 点击 button 的时候 input 设置焦点. createRef API 同样的, 我们可以使用 useRef 来实现完全相同的结果. useRef Hook 从上面的例子看, createRef 和 useRef 的作用完全一.
Gulp案例优化（四）
qq_24719349的博客
11-17 319
一、自动加载插件 当我们项目越来越复杂，那么我们使用到的插件也会越来越多，如果每一个插件都去使用一次require引入进来的话，会很麻烦，而且使代码量增加。所以，这里我们可以使用自动加载插件，也就是安装gulp-load-plugins，安装过后，我们可以将它引入进来，并且在它之上使用所有的已安装过的gulp插件。如下： const loadPlugins = require('gulp-load-plugins') const plugins = loadPlugins(); // const sas
gulp-html-replace：替换HTML中的构建块。 像useref一样，但是做对了
02-03
像useref一样，但是做对了。目录用法安装： npm install --save-dev gulp-html-replace 在您HTML文件中放置一些块： <!-- build:<name> -->Everything here will be replaced<!-- endbuild --> name是...
gulp-useref-cdn:解析HTML文件中的构建块以替换引用，然后自动上传到qiniu CDN
05-17
npm install --save-dev gulp-useref-cdn 用法 以下示例将解析HTML中的构建块，将其替换，上传到cdn，然后将这些文件传递通过。 构建块中的资产也将被串联并通过流传递。 var gulp = require ( 'gulp' ) , ...
asset-browserifier:在 gulp-useref 中浏览器
06-03
var gulp = require ( 'gulp' ) , useref = require ( 'gulp-useref' ) , AssetBrowserify = require ( 'asset-browserifier' ) ;gulp . task ( 'default' , function ( ) { var filter = new AssetBrowserify ( ) ...
gulp-OptimizedHTML
03-27
例如，`gulp-useref`插件可以将分散的CSS和JS文件合并成一个或少数几个文件，减少HTTP请求。 5. **Babel or TypeScript Support**：如果项目包含ES6+或TypeScript代码，可能会有相应的编译步骤，如使用`gulp-babel`...
构建gulp自动化流程的思路及示例
weixin_45449964的博客
03-02 159
构建gulp自动化流程的思路gulp实现思路项目准备开发准备gulp自动化构建gulpfile.js对HTML、Css、JavaScript进行自动化构建css任务的构建javascript任务的构建html页面的构建合并任务图片、子图图标的压缩与额外操作构建web server服务以及热更新构建dev开发模式任务完整的构建任务，代码清除、代码和文件的压缩处理html、css、javascript代码的压缩构建clean任务构建build任务示例 gulp gulp本身只是一个平台，并不具备对项目进行构建的
React Hooks大全—useRef
CreatorRay的博客
01-29 1003
本文将重点介绍useRef这个Hook，它可以让你在组件的整个生命周期中访问一个可变的引用对象。
Gulp自动化构建工作流及其具体实例
weixin_42499553的博客
06-19 217
Gulp的基本使用 1.创建一个新的package.json的文件 yarn init 2.安装gulp模块 yarn add gulp --dev 3.在文件根目录创建一个gulpfile.js的文件作为gulp的入口文件 4.gulp4.0版本以后以导出成员的方式定义任务，在最新的gulp版本中取消了同步代码模式全部采用异步代码模式，任务完成之后要以回调函数的方式对任务结束进行标记 exports.foo = done => { // 传入的done作为回调函数标识任务完成 c
前端工程化-02-初识gulp
赵忠洋的博客
06-07 225
基于流的构建系统 gulp基本使用 # 初始化项目 yarn init -y # 安装gulp yarn add gulp -D 项目根目录创建 gulpfile.js 文件 (gulp入口文件) 定义一个基本任务 // 定义一个构件任务 exports.foo = done => { console.log('hello foo') // 标识任务完成 done() } 执行 yarn gulp foo 定义一个默认任务 // 定义一个默认构建任务 exports.
前端工程化之自动化构建
gongye2019的博客
04-05 239
在前端快速发展的今天，如果不能时刻保持学习就会很快被淘汰。分享一下前端工程化中有关于自动化构建的相关知识，文章有点长，希望对大家有所帮助。每天进步一点点。 一、自动化构建简介 自动化构建就是把我们开发阶段写出来的源代码，自动化的转换成生产环境中可以运行的代码或者程序，这个自动化转换的过程称为自动化构建工作流。 它的作用是尽量脱离运行环境兼容带来的问题，在开发阶段使用一些提高效率的语法，规范和标准，例如，ES6+、Sass、模板引擎等。 二、自动化构建初体验 这里引入 进阶__前端漫漫路 写的 自动化构建 的
UseRef 使用
qq_22536729的博客
08-12 1797
useRef是一个方法，且useRef返回一个可变的ref对象（对象！！！） initialValue被赋值给其返回值的.current对象 可以保存任何类型的值:dom、对象等任何可变化值 ref对象与自建一个{current：‘’}对象的区别是：useRef会在每次渲染时返回同一个ref对象，即返回的ref对象在组件的整个生命周期内保持不变。自建对象每次渲染时都建立一个新的。 ref对象的值发生改变之后，不会触发组件重新渲染。有一个窍门，把它的改变动作放到useState()之前。 ..
react 项目中 useRef的运用
秋来九月八
08-20 9582
大概分享一下两种常见情况下，使用useref。 第一种，同一组件内部，通过useref来获取某一个dom标签以及dom标签的方法。 在以前使用ref的时候，我们经常用ref来保存某个需要的dom标签，这样需要用到的时候，就可以不用去寻找这个dom标签了，在js中，通过方法，parentNode，lastchild，nextElementsibling 这种关系结构来找dom是一件比较麻烦的事情。如果不是动态类名或者id的话，通过document.getElementsByClassName 之类的方法，虽然
gulp-useref 的assets方法
05-30
`gulp-useref` 的 `assets` 方法是用于指定要处理的文件类型的方法。这个方法可以在 `gulp-useref` 的注释块里使用，用于选择需要合并的文件。 具体来说，`assets` 方法可以接收一个字符串或者一个正则表达式作为...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值