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 ...
随机推荐
- 13-[Mysql]--pymysql模块
1.介绍 之前我们都是通过MySQL自带的命令行客户端工具mysql来操作数据库,那如何在python程序中操作数据库呢?这就用到了pymysql模块,该模块本质就是一个套接字客户端软件,使用前需要事 ...
- java四舍五入
package com.clzhang.sample; import java.math.BigDecimal; import java.math.RoundingMode; import java. ...
- node.js学习笔记（三）——事件循环
要理解事件循环,首先要理解事件驱动编程(Event Driven Programming).它出现在1960年.如今,事件驱动编程在UI编程中大量使用.JavaScript的一个主要用途是与DOM交互 ...
- 关于AutoMapper和WCF的一些认识
现在互联网时代呈尚快速开发,快速迭代.伴随着必然产生一些好用的第三方工具,今天有幸看到了Automapper这种类似ORM的框架,但是跟ORM还不太一样, ORM是实体和数据库表之间的映射,而此框架主 ...
- Async方法死锁的问题 Don't Block on Async Code（转）
今天调试requet.GetRequestStreamAsync异步方法出现不返回的问题,可能是死锁了.看到老外一篇文章解释了异步方法死锁的问题,懒的翻译,直接搬过来了. http://blog.st ...
- CSS3新增特性详解（一）
注:由于CSS3的新特性较多,所以分两篇博文来说明.第一篇主要包括新的选择器.文字及块阴影.多背景图.颜色渐变.圆角等.第二篇主要细说CSS3的各种动画效果,如:旋转.移动.缩放等,还包括图标字体的应 ...
- Java多线程多个线程wait()，一个notify()唤醒，唤醒的顺序
package thread; public class ThreadWN implements Runnable { public String name; public String getNam ...
- 180801-Spring之定时任务基本使用篇
文章链接:https://liuyueyi.github.io/hexblog/2018/08/01/180801-Spring之定时任务基本使用篇/ Spring之定时任务基本使用篇 spring- ...
- Android studio Error occurred during initialization of VM 问题解决
最近开发导入其他Android项目遇见的问题,如下图: 解决办法: 将org.gradle.jvmargs=的值该为521(堆内存分配过高导致) 备忘,希望能帮助到大家
- myBatis逆向工程的使用
使用myBatis Generator可以快速生成实体类.dao类和mapper文件.有两种方式,现在说的是比较灵活的方式.本文栗子使用的是IDEA,目录结构为maven项目的结构. 1.在pom.x ...