Gulp插件笔记
初次接触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 ...
随机推荐
- JS 判断滚动底部并加载更多效果。。。。。。。。。
JS 判断滚动底部并加载更多效果......... <html lang="zh-cn"> <head> <meta http-equiv=" ...
- 2017-2018-2 20155315《网络对抗技术》Exp5 ：MSF基础应用
实验目的 学会用metasploit进行简单的攻击操作 教程 实验内容 metasploit中有六个模块分别是 渗透攻击模块(Exploit Modules) 辅助模块(Auxiliary Modul ...
- NLPIR分词(c++接口整理）
C/C++接口——对应的各个函数 函数1-bool NLPIR_Init(const char * sInitDirPath=0, int encoding=GBK_CODE,constchar*sL ...
- 博弈论简单入门sb总结
博弈论简单入门sb总结 下午讲博弈论.没预习,GG. 整个下午都在学. 0 有一堆共n个石子,两个人轮流取石子,每个人一次可以取1到k个,取到最后一个石子的人胜利. 小学生都会的sb题.若k+1|n, ...
- Introduction to Big Data with PySpark
起因 大数据时代 大数据最近太热了,其主要有数据量大(Volume),数据类别复杂(Variety),数据处理速度快(Velocity)和数据真实性高(Veracity)4个特点,合起来被称为4V. ...
- Java中getConstructors()、getDeclaredConstructors()、getConstructor(Class<?>... parameterType)、getDeclaredConstructor(Class<?>... parameterType)的区别
区别一 在方法名末尾有s的是返回一个数组,没有s的是返回单个构造器. 区别二 在方法名中加Declared的是返回所有的构造方法,不加Declared的只返回public访问权限的构造器 区别三 有参 ...
- bootstrap学习笔记(5)
Bootstrap输入框组 主要记住一个原则 创建输入框的步骤 把前缀或后缀元素放在一个带有 class .input-group 的 <div> 中. 接着,在相同的 <div&g ...
- 【PaPaPa】集成B/S主流技术的MVC5项目 - 实干派：说做就做，我们已经起航，你还在观望吗
我们是谁 我们是C#爱好者,互相分享技术,一起学习一起成长一起做一个项目. 我们是开源爱好者,从我们手上出来的代码都会托管在源代码管理平台(oschina),到目前为止不收费,将来也不会出现任何收费情 ...
- selenium+java多层级frame切换的问题
关于selenium多层iframe切换,及iframe没有id和name属性的情况下进行切换的问题.(如下图:) 问题: 1. 在切入到frame:left中后,直接切换其他同级和上级frame报错 ...
- 【Unity Shader】（九） ------ 高级纹理之渲染纹理及镜子与玻璃效果的实现
笔者使用的是 Unity 2018.2.0f2 + VS2017,建议读者使用与 Unity 2018 相近的版本,避免一些因为版本不一致而出现的问题. [Unity Shader](三) ----- ...