Gulp插件笔记

2024-10-31 02:52:21 原文

初次接触Gulp是出于网页模块化的需要，用过之后发现这个任务管理工具有很多实用的插件，意外地好用，于是打算写下这篇笔记把用到的Gulp插件记录一下。至于想了解Gulp基本用法的同学可以去Gulp官网查看API文档，一看便懂。

此处贴上地址https://www.gulpjs.com.cn/docs/api/

gulp-html-import

API文档: https://www.npmjs.com/package/gulp-html-import

简介:

引入html内容到另一个html文件的指定位置，生成引入后的完整html文件。

示例:

./components/component.html

<h1> Component to be imported </h1>

./pages/page.html

<html>
@import "component.html"
<h1> Page to import component </h1>
</html>

./gulpfile.js

var gulp = require('gulp');
var htmlImport = require('gulp-html-import');
gulp.task('import', function () {
    gulp.src('./pages/page.html') // 需要引入元素的页面
        .pipe(htmlImport('./components/')) // 引入的元素所在目录
        .pipe(gulp.dest('dist')); // 引入元素后html文件所在的目录
});

Terminal中键入gulp import，将会得到如下文件:

./dist/page.html

<html>
<h1> Component to be imported </h1>
<h1> Page to import component </h1>
</html>

这样，html文件就能轻松模块化啦~

browser-sync

API文档:

https://browsersync.io/docs/gulp

简介:

是否还在为难以即时预览设计效果感到苦恼？用browser-sync就对了！另提一句，Browsersync还支持GUI操作，并且有跨平台的特性，感兴趣的同学可以去他们官网看看https://www.browsersync.io/

示例:

gulpfile.js

var gulp = require('gulp');
var browserSync = require('browser-sync');
gulp.task('view', function () {
    browserSync.init({
      proxy: "127.0.0.1:8000", // 此处连接本地代理进行预览，也可用server参数设置文件路径进行浏览
      browser: "firefox" // 设置预览时所用浏览器，推荐使用firefox
    });
    gulp.watch('./dist/*.html', browserSync.reload); // 不断检查dist目录下所有html文件修改状况，一有修改就刷新页面
});

Terminal中键入gulp view后，只要html文件一保存，dist目录下所有html文件对应页面就会刷新，实现实时预览。

Gulp插件笔记的更多相关文章

gulp学习笔记4
gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 之前的任务都是单个的,比较简单.接下去我们开始引用多个插件,一次性把任务搞定,省 ...
gulp学习笔记3
gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 1.编译sass Sass 是一种 CSS 的开发工具,提供了许多便利的写法,大 ...
常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案（三）
前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的插件生态可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...
gulp 安装笔记
1.全局安装cnpm(淘宝的npm国内镜像),gulp,rimraf(卸载用插件)npm install -g cnpm --registry=https://registry.npm.taobao. ...
gulp 插件
原文链接:http://www.mamicode.com/info-detail-517085.html gulp是什么? http://gulpjs.com/ 相信你会明白的! 与著名的构建工具gr ...
gulp学习笔记
第一步:安装Node 首先,gulp 是基于 Nodejs 的自动任务运行器,所以安装gulp之前,最基本也最重要的是,我们需要搭建node环境.访问http://nodejs.org,下载并安装No ...
gulp使用笔记
gulp简介 gulp 是基于 Nodejs 的自动任务运行器,能自动化地完成javascript/coffee/sass/less/html/image/css等文件的的测试.检查.合并.压缩.格式 ...
gulp插件(gulp-jmbuild)，用于WEB前端构建
源码地址:https://github.com/jiamao/gulp-jmbuild https://github.com/jiamao/gulp-jmbuild gulp-jmbuild gulp ...
gulp插件gulp-usemin简单使用
关于什么是gulp,它和grunt有什么区别等问题,这里不做任何介绍.本文主要介绍如何使用gulp-usemin这款插件,同时也会简单介绍本文中用到的一些插件. 什么是gulp-usemin 用来将H ...

随机推荐

Noip前的大抱佛脚----赛前任务
赛前任务 tags:任务清单前言现在xzy太弱了,而且他最近越来越弱了,天天被爆踩,天天被爆踩题单不会在作业部落发布,所以可(yi)能(ding)会不及时更新省选前的练习莫名其妙地成为了Noi ...
9.13 开课第十天（JS脚本语音：语句：循环）
循环:循环操作某一个功能(执行某段代码) 四要素: 循环初始值循环条件状态改变循环体 for 穷举迭代 while(true) break //先执行 ...
前端- JavaScript - 总结
1.JavaScript的介绍 javaScript是一种web前端的描述语言,也是一种基于对象(object)和事件驱动(Event Driven)的.安全性好的脚本语言. 它运行在客户端从而减轻服 ...
Gitlab+Jenkins学习之路（十二）之Maven的私有仓库Nexus
1.什么是Nexus? 在前面进行maven项目的构建中,可以看到在构建的过程中需要安装maven的依赖插件,如图: 而在maven的默认配置中是在官网的中央仓库和第三方的maven仓库进行下载,速度 ...
洛咕 P2467 [SDOI2010]地精部落
同波浪,简单dp. 高度从1到n插入山脉,设f[i][j][k]表示插入了i个山脉,组成了j段,边界上有k个山脉的方案数. 那么新插入的山脉只会:插入在边界上且自己是一段.插入在边界上且与最左边的段相 ...
JDBC注册驱动的三种方式(MySQL)
第一种:通过反射Class.forName("com.mysql.jdbc.Driver"); 第二种:通过DriverManage的静态方法DriverManager.regis ...
XAF-如何实现自定义权限系统用户对象
本示例使用XPO. 新建一个XAF项目.填加两个类进来: [DefaultClassOptions] public class Employee : Person { public Employe ...
DMS路由表
DMS路由表: route add -p 53.90.146.0 mask 255.255.255.0 10.77.35.249 ================================= ...
小佬頭眼里的读研VS工作
最近小佬頭在各种平台和论坛看到很多临近毕业的本科生在纠结读研和工作.于他们来说,人生到了一个十字路口,需要做出一个选择然后继续前行,今天小佬頭就来聊聊读研和工作的话题. 其实有这个考虑的同学不在少数, ...
[硬件配置]记录Ubuntu 14.04 下安装无线网卡驱动解决无法连接WiFi的过程
新电脑安装了Ubuntu 14.04,但是网络连接中只有以太网而没有WiFi的选项. 打开System Setting系统设置-Software&Updates软件&更新-Additi ...